概述
请先阅读：VSCode安装与前端开发必备插件安装
引言
介绍
当用户通过 Internet 浏览网页时，会看到各种文字信息、链接、图表、图片等内容，如图所示。
浏览器是如何显示这个页面内容的呢？
下面通过浏览器来查看这个页面的源代码，如图所示，这些源代码就是浏览器可以理解并展示的一种计算机标签语言—HTML
HTML 是 Hyper Text Markup Language 的缩写，中文翻译为超文本标记语言，是制作网页最基本的语言，它的特点正如它的名称所表示的那样
-
Hyper（超）
超（Hyper）是相对于线性（Linear）而言的，HTML 之前的计算机程序大多是线性的，即必须由上至下顺序执行，而用 HTML 制作的网页可以通过其中的超链接从一个网页跳转至另一个网页。
Text（文本）：不同于一些编译型的程序语言，例如 C、C++ 或 Java 等，HTML 是一种文本解释型的程序语言，即它的源代码不经过编译而直接在浏览器中被翻译运行。 -
Markup（标记）
HTML 的基本规则就是用标记语言（成对尖括号组成的标签元素）来描述网页内容如何在浏览器中显示。 -
Language（语言）
HTML 是一种语言，但它是解释型语言。它所有的标记都会被浏览器翻译成最终显示的效果。
什么是浏览器
浏览器是用来检索、展示以及传递 Web 信息资源的应用程序。Web 信息资源由统一资源标识符（Uniform Resource Identifier，URI）所标记，它是一张网页、一张图片、一段视频或者任何在 Web 上所呈现的内容。使用者可以借助超级链接（ Hyperlinks），通过浏览器浏览互相关联的信息。
当前的主流浏览器有很多，除了使用 Windows 系统自带的 IE 浏览器以外，还推荐使用 Chrome 浏览器。在 Chrome 上可以安装各种常用插件，这对于网页的美化、调试等方面有着非常大的作用。
HTML 发展史
HTML 1.0
1991 年 WWW 在互联网上首次露面，也随之引起了巨大的轰动。1993 年 ITEF（因特网工作小组）发布了一个草案，那时没有 HTML 的官方文档，各种标签（Tag）也很混乱。
这个草案 HTML tags 可以算是 HTML 的第一个版本 1.0。
1994 年，Tim Berners-Lee 创建了非盈利性的 W3C（world wild web consortium 万维网联盟），并邀请了当时的 155 家互联网巨头（如 Microsoft、IBM、APPLE 等公司），致力使得 WWW 有一套更加标准化的协议，能够让资源按照这套标准的协议进行处理与共享。那个时候 W3C 的根本目的就是为了维护互联网的对等性，为了让它保持最起码的秩序。
HTML 2.0
1995 年，HTML 2.0 发布。
HTML 3.2
1996 年，由 Tim Berners-Lee 组织的 W3C 对 HTML 语言进行规范化，HTML 3.2 发布。
HTML 4.0
1997 年发布，W3C 推荐标准。
HTML 4.01
1999 年，HTML 4.01 发布，同一年，W3C 对 HTML 的未来做了展望。他们认为 HTML 存在一些缺陷，例如 HTML 的形式与内容无法分离、标记单一等等，前途不是很光明。于是 W3C 转向语言更加规范的 XML，以便于弥补 HTML 的不足（XML 全称 Extensible Markup Language 可拓展标记语言），但是从 1991 年 HTML 在互联网上出现到 1999 年这个时候已经过去 8 年了，全世界已经有成千上万的网页经由 HTML 编写，突然间更改一种语言是不现实的，故 W3C 只能放慢脚步，开始了 HTML 到 XML 的过渡。于是也就出现了 XHTML。
XHTML 1.0
2000 年发布，XHTML 1.0 与 HTML 4.01 内容是一样的，但是 XHTML 使用了新的语法规则：规定了所有元素、属性必须使用小写字母，属性值必须加引号，规定每个标签都必须有与之对应的结束标签。与这些规则相比起来 HTML 4.01 的语法就显得很松散。
XHTML 1.1
XHTML 1.1 于 2001 年发布，在最开始 W3C 最终的目的就是为了使得 HTML 完全标准化，该版本的 XHTML 强制性的规定了文档必须标注为 xml 而不是 html。
然而很多浏览器并不能很好的解析 XML 格式的文档，W3C 这一步似乎走的太快了。
XHTML 2.0
紧随 XHTML 1.1 之后，XHTML 2.0 也随之发布，XHTML 1.1 那个时候浏览器不能解析 XML 文档的问题还没有得到很好的处理，这个版本又有意不再兼容已有的 HTML 各个版本。开发人员、浏览器厂商也便渐渐放弃了 xml，也许是 xml 太过于规范脱离了实际，又或许是因为 HTML 的生态圈真的太大了。
2004 年，各大浏览器厂商也相继脱离了 W3C，成立了新的小组 WHATWG（超文本应用技术工作组 world hypertext application technique work group）开始对 HTML 进行修缮，开始了向 HTML5 之路的进军。XHTML 生态环境渐渐破碎，2006 年，XTML2 没有实质性进展。Tim Berners-Lee 反思，决定重组 HTML 工作组。
HTML 5.0
2007 年，W3C 工作组重建，在 WHATWG 的基础上继续研究，规范也交付给 WHATWG 来制定。因此，也就出现了现如今的"一种格式，两个版本（HTML/XHTML）"的局面，但随着 HTML5 的到来，一种更加简洁的 doctype（）也逐渐运用到各大网站。2009 年，W3C 也宣布停止 XHTML2 的研究工作。HTML5 是目前最新的 HTML 规范，也已经被 W3C 接纳。截止目前为止，HTML5 标准也已经逐渐被各大网站广泛运用。
HTML 开发工具
如果要做专业的前端开发，使用 EditPlus 等文本编辑器作为开发工具其效率是比较低的，为了提高前端开发工作效率，还是建议使用专业、强大的网站开发工具 JetBrains WEBStrom、VS Code 等。
这些专业工具除了能对 HTML 代码的关键字加亮显示以外，还可以同时显示代码及浏览器展示效果。
这种所见即所得的工具，当页面内容复杂时，使用它可以大大降低代码编写和维护的难度，从而提高程序员或美工人员开发和维护的效率，降低项目用工成本，是编写 HTML 文档不可多得的优秀工具。
标签和属性
标签
所有 HTML 标签都有一个标签名称，有些标签还有一个可选的属性列表。
这些标签在使用时必须用尖括号“<”和“>”括起来，而且一般都是成对出现的，无斜杠的标签表示该标签的作用是开始，有斜杠的标签表示该标签的作用是结束。
HTML 标签是大小写无关的， 与 表示的意思是一样的。
但是 W3C（World Wide Web Consortium ，万维网联盟，制定 Web 规范的权威组织）标准推荐使用小写。
HTML 标签有两种形式：
-
双标签
双标签指标签是成对出现的，也就是有一个开始标签和一个结束标签，开始标签用 <标签名> 表示，结束标签用 </标签名> 表示，只有一对标签一起使用才能表示一个具体的含义。例如
<html></html>表示一个 HTML 文档。<标签名>内容</标签名> -
单标签
单标签指标签不是成对出现的，也就是只用一个标签就能表示一个具体的含义，例如<br>表示换行、<hr>表示创建一条水平线。为了符合 W3C 规范，单标签必须在标签后面加一个斜杠，即<br/>、<hr/>，所以单标签通用格式为 <标签名/>。<标签名/>
属性
HTML 属性一般出现在 HTML 标签中，是 HTML 标签的一部分，属性能对标签进行补充说明。
例如，如果在一行文本中采用标题标签 <h1>。
<h1>学习“使用前端技术展现Web系统”课程</h1>
可以用属性进一步指定文本居中显示。
<h1 align="center">学习“使用前端技术展现Web系统”课程</h1>
所有属性都放在起始标签的尖括号内，并相互用空格分开，有些属性要求用引号，有些则不要求，大多数属性（只包括字母、数字、连字符和点号的）可以不需要引号。
例如，可以写成 align=center 或 align = “center”，所有浏览器均能用相同方式显示，但是，包括空格、%、# 等其他字符的属性值则需要用引号。
例如用 width 属性表示文档元素占文档窗口宽度的百分数，则必须写成 width=“100%”。同样也是为了符合 W3C 标准，要求所有的属性值都使用引号。
在一个标签中可以设置多个属性，语法形式如下：
<标签名 属性名1="属性值1" 属性名2="属性值2" ... 属性名N="属性值N">内容</标签名>
有多个属性说明标签时，它们出现的先后顺序不影响页面显示的结果。
W3C标准
W3C 标准英文全程是：World Wide Web Consortium。万维网联盟标准不是某一个标准，而是一些列标准的集合。
网页主要有三部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。
对应的标准也有三方面：结构化标准主要包括 XHTML 和 XML，表现标准语言主要包括 CSS、行为标准主要包括（如 W3C DOM）、ECMAScript 等。这些标准大部分是 W3C 起草发布，也有一是其他标准组织制定的标准。
常用的标准规范：
-
是由一对尖括号包裹的单词构成，例如：
<html>。 -
标签不区分大小写
<html>和<HTML>，推荐使用小写。 -
标签分为两部分：开始标签
<html>和结束标签</html>，两个标签之间的部分我们叫做标签体。 -
有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如：
<br/>、<hr/>、<img/>等。 -
标签可以嵌套，例如：
<a><b></b></a>；但是不能交叉嵌套，例如：<a><b></a></b>。
快速上手
创建项目
了解了 HTML 文档的基本结构后，下面就来编写第一个最简单的 HTML 文档。
对于 HTML 文档的编写可以使用记事本，也可以使用 VSCode、WEBStrom、Hbuilder 等工具。
此处使用VSCode
到你的文件资源管理器里随便一个位置，创建一个文件夹，该文件夹就是你的项目文件夹了
然后使用VSCode打开这个目录
找到刚刚创建的文件夹，然后选择即可
创建html文件
然后在窗口中输入文件名，点击确认，即可完成创建。
编写内容
在 index.html 中写入以下内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>我的第一个网页</title>
</head>
<body>
Hello World ！
</body>
</html>
单机鼠标右键打开live服务，如果没有请安装插件，详情请看：VSCode安装与前端开发必备插件安装
这样就创建成功了~
注释和特殊符号
为了解释说明 Java 编写的源代码，Java 语言有注释，HTML 也是一种语言，在代码中也需要加入解释说明文字，所以 HTML 也有注释。
另外，在 HTML 中，“<”、“>”这些符号已经作为 HTML 的语法符号，那么如果要在页面中显示这些特殊的符号，该怎么办呢？
注释
在 HTML 文档中，通过注释标签可以插入注释，便于对代码的检查与维护。在 HTML 文档适当的位置添加注释是良好的习惯，因为一旦代码较长或结构复杂，经过一段时间之后，很可能连编写者都很难快速回忆当时的思路，所以适当的注释有助于对源代码的理解。注释部分不会被解析器解释执行，仅用来作为标记使用。
基本语法
<!-- 在此处写注释 -->
作为程序员，在软件开发过程中，注释除了用于进行程序解释说明外，还经常用在调试程序过程中。通过注释标签可以注释掉一部分暂时不用的代码，进行调试和运行，直到达到预期的结果。
特殊符号
在 HTML 文档中，有些符号拥有特殊的含义，可直接写出这些符号，以便浏览器在解释执行的时候，按照其特殊含义进行解释。
如果希望在页面上显示这些特殊符号，则需要在 HTML 文档中使用对应的代码标识，这些代码标识被称为字符实体。
一个字符实体由三个部分组成，分别是“&”符号、实体名称和“;”符合，以下列出了一些常用的特殊符号对应的字符实体。
| HTML 原代码 | 显示结果 | 描述 |
|---|---|---|
< | < | 小于号或显示标记 |
> | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | “ | 引号 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
  | 半个空白位 | |
  | 一个空白位 | |
| 不断行的空白 |
基本结构
接下来介绍 HTML 文档中三个基本的骨架结构标签，以及对页面的一些基本描述。
<html>标签
<html> 标签标识该文档为 HTML 文档。
<html> 标签置于 HTML 文档最前边，用来标识 HTML 文档的开始，而 </html> 标签恰好相反，它放在 HTML 文档最后边，用来标识 HTML 文档的结束。
两个标签必须成对使用，网页中所有其他的内容都应该放在 <html> 和 </html> 标签之间。
基本语法：
<html>
包含<head>、<body>等其他标签
</html>
<head>标签
<head>父标签
<head> 标签是个容器，包含其他位于文档头部的标签元素。把该标签放在文档的开始处，紧跟在<html>标签后面。<head> 和</head>定义了 HTML 文档的头部，其中包含的内容主要包括对页面的一些基本描述。
如标题、关键字等。 CSS 和 JavaScript 可以定义在 HTML 头部。绝大多数文档头部包含的数据都不会真正作为内容显示给用户，但是其间的元素有各自特殊重要的意义，需要大家掌握。
基本语法
<head>
头部标签元素
</head>
常用的头部标签
| 标 签 | 描 述 |
|---|---|
<title> | 定义页面标题内容（唯一必须的头部标签） |
<base> | 当前文档的基准地址，其他相对地址都建立在此基准地址之上 |
<meta> | 有关文档本身的元信息，例如文档的作者，用于查询的关键词，关于文档的描述等 |
<style> | 定义 CSS 层叠样式表的内容 |
<link> | 定义外部文件的链接，最常见的用途是链接外部样式表 |
<script> | 定义页面中程序脚本的内容 |
其他标签元素将在后续介绍
<title>标签
通过前面的例子，已经了解了如何使用 <title> 标签，以及 <title> 标签的使用效果，这里不再赘述。
接下来简要描述通过 <title> 标签设置的页面标题，主要在以下几个方面发挥作用：
-
可以在浏览者保存该页面时成为默认的保存文件名。
-
可以在浏览者将该网址添加进收藏夹时成为收藏夹中该网址的名称。
-
方便搜索引擎索引页面。
-
搜索引擎显示的页面标题往往就是网页
<title>标签的内容。
例如，在CSDN中查看文章时，显示的页面标题如图所示
这篇文章的 <title> 标签内容正是“做了个代码神器,让你敲代码6到起飞, 代码开源给大家【人工智能/自然语言处理】”。
<meta>标签
<meta> 标签的功能是提供关于页面的元信息，能够提供文档作者、关键字、描述等多种信息，在 HTML 的头部可以包括任意数量的 <meta> 标签
下面列举几种最常用的 <meta> 标签。
1、设定关键字
关键字是为搜索引擎提供的，如一个音乐网站，为了提高在搜索引擎中被搜索到的概率，可以设定多个和音乐主题相关的关键字以便搜索，如音乐、流行音乐、港台音乐、欧美音乐、歌曲排行榜、 mp3 下载、在线音乐等。这些关键字虽然不出现在浏览器的显示页面中，但能被搜索引擎准确地获取。如何选择关键字、主页及各级页面设置什么样的关键字是搜索引擎优化（SEO）方面的技术，这里不展开讨论。
需要注意的是，不是关键字越多越好，大多数搜索引擎进行页面抓取时都会限制关键字的数量，过多的关键字反而会影响搜索引擎对该页面质量的评价。
基本语法：
<meta name="Keywords" content="value" />
其中，Keywords 表示关键字定义，content 属性值表示关键字内容，关键字之间要用逗号分隔。
下面列举了一篇文章的关键字，供大家参考。
<meta
data-n-head="ssr"
data-hid="keywords"
name="keywords"
content="做了个代码神器,让你敲代码6到起飞, 代码开源给大家【人工智能/自然语言处理】"
/>
2、设定描述
对于一个网站的每个页面，都可以在源代码中添加说明，用来将页面的主题描述清楚，这就是页面描述的作用。
但因为搜索引擎在评价页面与用户搜索关键字的相关度时，除了考虑关键字，也会分析描述的内容。所以，为了提高页面的搜索引擎排名，在编写描述时，应注意让搜索引擎更好地对本页面的质量进行评价。
搜索引擎同样对描述文字的字数有一定的要求，所以内容应尽量简明扼要。
基本语法：
<meta name="Description" content="value" />
其中，Description 表示描述定义，content 属性值表示描述内容。下面列举了蓝桥网站首页的描述，仅供大家参考。
<meta
data-n-head="ssr"
data-hid="description"
name="description"
itemprop="description"
content="把开发的好用工具推荐给大家, 并提供一些思路和灵感 ✨ 一、为什么要开发一个这样的工具❤️ 二、VARBook介绍 三、怎么使用？ 1、快速访问 2、使用案例 四、VARBook有什么特点 1、为中文支持而生 2、命名规范,多种选择 3、急速响应? 4、智能复制 五、目前开发进度 TODO 期待2022年3月前完成❓ 六、VARBook是怎么实现的前端components"
/>
3、设定字符集
<meta> 标签中的 http-equiv 属性为“名称:值”对提供了名称，并指示服务器在发送实际的页面内容之前，先将这些“名称:值”对发送给用户浏览器。服务器向浏览器发送 HTML 文档时，至少需要发送一个content-type: text/html，告诉浏览器准备接收一个 HTML 文档。
编写一个文档时，需要确定该文档使用的字符集。一个 HTML 文档，可以通过<meta>标签说明该 HTML 文档所使用的字符集。这样浏览器在显示这个 HTML 文档时，就可以根据该标签确定用什么样的字符集显示这个文档。
在中国大陆地区，常用的编码是 GB 码，表示简体中文，字符集应设置为 gb2312 ；中国台湾地区常用的编码是 BIG5 码，表示繁体中文；欧洲地区常用 ISO8859-1 表示英文……对于不同字符集的页面，如果用户的浏览器不支持该字符集的显示，则浏览器中显示的将是乱码。
基本语法：
<meta http-equiv="content-type" content="text/html;charset=value" />
其中，content-type 表示字符集定义，content 属性值表示文档类型和字符集，其中 charset 指定字符编码。下面分别列举了使用 UTF-8 国际化编码的 <meta> 标签内容，后期在开发过程中默认使用 UTF-8 编码。
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
HTML5 字符集设置简化写法：
<meta charset="UTF-8" />
<body>标签
<body> 标签界定了 HTML 文档的主体。在 <body> 标签和其结束标签 </body> 之间的所有部分都被称为主体内容，此标签对必须成对出现。在 <body> 和 </body> 之间放置的是实际要显示的所有内容和其他用来控制显示方式的标签，如 <p></p>、<h1></h1>、<br />、<hr />等，它们中间所定义的文本、超链接、图像、表格和列表等将会在浏览器窗口中显示出来。
基本语法
<body>
主体内容
</body>
完整案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>案例1</title>
<meta
data-n-head="ssr"
data-hid="keywords"
name="keywords"
content="做了个代码神器,让你敲代码6到起飞, 代码开源给大家【人工智能/自然语言处理】" />
<meta
data-n-head="ssr"
data-hid="description"
name="description"
itemprop="description"
content="把开发的好用工具推荐给大家, 并提供一些思路和灵感 ✨ 一、为什么要开发一个这样的工具❤️ 二、VARBook介绍 三、怎么使用？ 1、快速访问 2、使用案例 四、VARBook有什么特点 1、为中文支持而生 2、命名规范,多种选择 3、急速响应? 4、智能复制 五、目前开发进度 TODO 期待2022年3月前完成❓ 六、VARBook是怎么实现的前端components" />
</head>
<body>
完整案例
2022 © uiuing.com
</body>
</html>
块级标签
div 标签
HTML 的 <div> 标签是最重要的一个块级元素，它是可用于组合其他 HTML 元素的容器。<div> 标签没有特定的含义，它主要是用于实现页面布局操作。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
网络流行的“DIV+CSS”布局方式中的 div 指的就是 <div> 标签。
这种新的文档布局方式取代了传统使用表格布局的旧布局方式。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
基本语法
<div>其他标签或文档</div>
示例代码
<body>
<div> uiuing.com </div>
</body>
显示效果：
<p> 标签
在 HTML 语言中，用标签 <p> 表示段落。
基本语法
<p>段落内容</p>
对于段落标签，有一个可选的属性 align，用于表示段落相对浏览器窗口在水平位置上的对齐方式。
align 属性有四个可取值，每个可取值的含义如表所示：
| 值 | 描 述 |
|---|---|
| left | 段落左对齐 |
| right | 段落右对齐 |
| center | 段落居中对齐 |
| justify | 对行进行伸展，每行都可以有相等的长度 |
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>< p ></title>
</head>
<body>
<body>
<p>1+1等于几</p>
<p align="center">
等于2
</p>
</body>
</body>
</html>
显示效果
<hn> 标签
标题标签 <hn>（非 <title> 标签）主要用来标识 HTML 文档中的各级标题。
在浏览器解析标题标签时，会将标题内容设为一个段落，字体设为黑体，字号大小根据 n 值的大小确定。
基本语法
<hn>标题文字</hn>
标题标签共有六种，每种的标题在字号上都有明显的区别。
在 HTML 中，定义了六级标题，从一级到六级，每级标题的字体大小依次递减。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
显示效果
<ul>/<ol>/<li> 标签
介绍
HTML 中的列表可分为两种类型
- 一种是有序列表
- 另一种是无序列表
前者使用编号来记录，而后者则使用项目符号来标识无序的项目。
有序列表
在有序列表中，主要使用 <ol> 和 <li> 两个标签，其中 <ol> 标签定义有序列表，<li> 标签定义列表项目。
基本语法：
<ol>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
…
</ol>
对于
- 标签有两个可选的属性，下表列出了每个属性、可取值和简单描述。
| 属 性 | 可 取 值 | 描 述 |
|---|---|---|
| type | A、a、I、i、1 | 规定列表的类型，默认为数字 |
| start | start_number | 规定列表中的起始点，默认为 1 |
示例代码
<ol type="A" start="2">
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>我是4</li>
<li>我是5</li>
</ol>
显示效果
无序列表
在 HTML 文档中，所谓无序列表，是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。
在无序列表中，各个列表项之间没有顺序之分。无序列表由 <ul> 和 </ul> 标签对实现，每个列表项也是由 <li> 标签定义的。
基本语法
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
…
</ul>
无序列表与有序列表非常类似，不同点在于因为无序列表是无序的，所以不存在 start 这个规定列表起始点的属性。
无序列表的 type 属性可以设置为 disc、circle、square，其中 disc 代表 实心圆 ●（默认），circle 代表 空心圆 ○、square 代表 实心方块 ■。
示例代码
<ul type="disc">
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>我是4</li>
</ul>
显示效果
<dl>/<dt>/<dd> 标签
在 HTML 中，<dl><dt><dd> 是一组合标签，如果使用 <dt> 或 <dd> 标签的话，那么最外层就必须使用 <dl> 包裹，这种组合标签也称作表格标签，与 <table> 表格类似故而也可以称之为 <dl> 表格。
在开发的过程中，一般使用这个组合标签来实现图文混编的功能。例如既有图片又有描述的商品列表，就可以使用这个组合标签来实现。
基本语法
<dl>
<dt>列表项</dt>
<dd>列表描述</dd>
</dl>
示例代码
<body>
<dl>
<dt>
<img width="400"
src="https://user-images.githubusercontent.com/73827386/148187928-2db0116a-3a0e-486b-a427-2f5d959b37c3.jpg" />
</dt>
<dd>访问地址: https://varbook.uiuing.com</dd>
</dl>
</body>
显示效果
综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div>
<h1>大数据</h1>
<hr />
<p>大数据的5V特点：</p>
<ul>
<li>Volume(大量)</li>
<li>Variety(多样)</li>
<li>Velocity(高速)</li>
<li>Veracity(真实性)</li>
<li>Value(低价值密度)</li>
</ul>
</div>
</body>
</html>
行内标签
<a> 标签
超链接，也可以称之为锚（anchor），使用 <a></a> 标签标记。超链接极为常用，是网站页面的重要组成部分。
超链接可以是一个字，一个词，也可以是一张图片，点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当用户把鼠标指针移动到网页中的某个链接上时，鼠标指针箭头会变为一只小手，这是超链接的重要特征。
在开发的过程中有两种使用 <a> 标签的方式：
-
通过使用 href 属性 - 创建指向另一个文档的链接；
-
通过使用 name 属性 - 创建文档内的书签。
超链接
href 属性
一个超链接包含以下两部分：
- 链接地址：链接的目标，可以是某个网址或文件的路径等，对应为 标签的 href 属性。
- 链接文本或图像：单击该文本或图像，将跳转到 href 属性指定的目标，对应为 标签对中的文本或图像。
基本语法
<a href="连接地址或文本">文本或者图片</a>
示例代码
<body>
<a href="https://uiuing.com">我的博客</a><br />
<a href="https://uiuing.com"><img
src="https://pic.imgdb.cn/item/61dc512e2ab3f51d91f96bb9.png" /></a>
</body>
显示效果
target 属性
<a> 标签的 target 属性规定在何处打开链接文档。如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。
如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。
首先我们到根目录创建三个HTML文件
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<ul>
<li><a href="onePage.html" target="showHTML">第一页</a></li>
<li><a href="twoPage.html" target="showHTML">第二页</a></li>
</ul>
</body>
</html>
第一次选择内容列表中的某个链接时，浏览器会打开一个新的窗口，将它标记为 “showHTML”，并在其中显示文档内容。当用户选择另一个链接打开时，如果这个标记为 “showHTML” 的窗体仍处于打开状态，浏览器就会再次将选定的文档在该窗口中显示。
onePage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<p>我是 onePage.html</p>
</body>
</html>
twoPage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<p>我是 twoPage.html</p>
</body>
</html>
效果
例如以下,我点击了第一个时，他将自动更改已点击的效果，并且将新建一个浏览器标签
<a> 标签的 target 属性有一个有 4 个保留的目标名称用作特殊的文档重定向操作：
| 值 | 描述 |
|---|---|
| _blank | 浏览器总在一个新打开、未命名的窗口中载入目标文档 |
| _self | 浏览器在当前窗口载入目标文档 |
| _parent | 浏览器在父窗口载入目标文档。如果这个引用是在窗口或者在顶级框架中，那么它与 _self 等效 |
| _top | 浏览器在最顶端的框架窗体载入目标文档 |
文档与id跳转
当一个页面内容特别多时，可以通过给页面建立书签的方式，对同一页面里的内容进行链接。这样用户在浏览网页时，可以通过书签进行页面内的内容跳转，提高浏览者的用户体验效果。
既然要通过超链接的方式访问同一页面的某一位置内容，那么首先要给该位置建立一个书签。
基本语法
<a name="书签名称">文字</a>
定义了书签后，链接到该书签的超链接的基本语法为：
<a href="#书签名称">链接点</a>
下面通过一个案例，演示使用超链接跳转至本文档的另一个位置，即当用户单击“查看本文档第三部分”这个内部链接时，即可链接到本页面的第三部分位置。代码如下：
<body>
<p><a href="#d3">查看本文档第三部分</a></p>
<h2>第一部分</h2>
<p>这是第一部分的内容！</p>
<h2>第二部分</h2>
<p>这是第二部分的内容！</p>
<h2><a name="d3">第三部分</a></h2>
<p>这是第三部分的内容</p>
<h2>第四部分</h2>
<p>这是第四部分的内容！</p>
<h2>第五部分</h2>
<p>这是第五部分的内容！</p>
<h2>第六部分</h2>
<p>这是第六部分的内容！</p>
<h2>第七部分</h2>
<p>这是第七部分的内容！</p>
<h2>第八部分</h2>
<p>这是第八部分的内容！</p>
<h2>第九部分</h2>
<p>这是第九部分的内容！</p>
<h2>第十部分</h2>
<p>这是第十部分的内容！</p>
</body>
显示效果
同理，也可操作标签的id
<p><a href="#d3">查看本文档第三部分</a></p>
<h2>第一部分</h2>
<p>这是第一部分的内容！</p>
<h2>第二部分</h2>
<p>这是第二部分的内容！</p>
<h2><a id="d3">第三部分</a></h2>
<p>这是第三部分的内容</p>
<span> 标签
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。所以可以这样认为：<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
基本语法
文本
示例代码
<body>
<span>您好</span>
</body>
短语标签
举例如 <strong> 标签是一个短语标签，用来定义重要的文本。
在 HTML 中，短语标签是专用标签，用于指示文本块具有结构意义，执行与文本格式标签类似的特定操作。在开发的过程中并不反对使用这个标签，但如果只是为了达到某种视觉效果而使用这个标签的话，强烈建议使用 CSS ，这样可能会取得更丰富的效果。
基本语法
<strong>重要的文本</strong>
所有短语标签
| 标签 | 描述 |
|---|---|
<em> | 呈现为被强调的文本 |
<strong> | 定义重要的文本 |
<dfn> | 定义一个定义项目。 |
<code> | 定义计算机代码文本。 |
<samp> | 定义样本文本 |
<kbd> | 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 |
<var> | 定义变量。您可以将此标签与 <pre> 及<code> 标签配合使用。 |
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<p>
<strong>strong</strong>
</p>
<p>
<dfn>dfn</dfn>
</p>
<p>
<code>code</code>
</p>
<p>
<samp>samp</samp>
</p>
<p>
<kdb>kdb</kdb>
</p>
<p>
<var>var</var>
</p>
</body>
</html>
效果
<img> 标签
当浏览网页时，如果一个页面内容都由文字组成，往往会让人觉得枯燥、呆板，提不起浏览的兴趣。如今丰富多彩的网页，很大程度上要归功于图像的作用。本节主要介绍如何在 HTML 文档中插入图像。
在日常生活中，使用比较多的图像格式主要有五种，即 JPG、GIF、BMP、PNG、SWF。在网页中使用较多的是 PNG、JPG、GIF，大多数浏览器都可以显示这些图像。
在页面中插入图像可以起到美化的作用，同时可以更形象地说明要表达的意思。在 HTML 文档中，插入图像的标签只有一个，即 <img> 标签，它负责向页面中嵌入一幅图像。准确来讲，<img> 标签并不会在页面中真正插入图像，而只是提供了一个链接地址，链接显示出图像。所以说，<img> 标签创建的是被引用图像的占位空间。
基本语法
<img src="图像 URL" alt="图像描述" />
基本语法中只列出了 <img> 标签的两个重要属性：src 属性和 alt 属性，其中 src 属性定义了图像的链接地址（通常会把图像文件存放在一个单独的目录中，并将这个目录命名为 pics 或者 images 之类的名称），而 alt 属性则当图像无法显示时，替代显示的文本。
<img
src="图片地址"
alt="描述"
/>
对于 图像标签还有一些其他可选的属性，例如 width 属性和 height 属性。下表列出了属性名、可取值及简单描述。
| 属性 | 可取值 | 描述 |
|---|---|---|
| align | top、bottom、middle、left、right | 规定如何根据周围的文本来排列图像，bottom 是默认的对齐方式 |
| width | pixels、% | 定义图像的宽度，可用百分比 |
| height | pixels、% | 定义图像的高度，可用百分比 |
| border | pixels | 定义图像周围的边框 |
综合练习
目标
请通过今天所学实现以下页面
素材
图片素材
文字素材
HTML版本
HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由CERN的 TimBerners-Lee 发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。 [5] HTML历史上有如下版本： [5]
HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5]
HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 [5]
HTML 3.2：1997年1月14日，W3C推荐标准。 [5]
HTML 4.0：1997年12月18日，W3C推荐标准。 [5]
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。 [5]
HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。 [6]
HTML在Web迅猛发展的过程中起着重要作用，有着重要的地位。但随着网络应用的深入，特别是电子商务的应用，HTML过于简单的缺陷很快凸现出来：HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式，但没有语义结构，即HTML显示数据是按照布局而非语义的。随着网络应用的发展，各行业对信息有着不同的需求，这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时，按照语义而非按照布局来显示数据会具有更多的优点。
总而言之，HTML的缺点使其交互性差，语义模糊，这些缺陷难以适应Internet飞速发展的要求，因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。
特点
超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4]
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4]
可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4]
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4]
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。 [4]
最后
以上就是愤怒小海豚为你收集整理的HTML 基础【1】 -- 入门介绍 / 基本结构 / 块级标签 / 行内标签引言标签和属性基本结构块级标签行内标签综合练习的全部内容，希望文章能够帮你解决HTML 基础【1】 -- 入门介绍 / 基本结构 / 块级标签 / 行内标签引言标签和属性基本结构块级标签行内标签综合练习所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复