特别提醒：以下内容中，HTML 标签内会出现若干 “标签样式属性”，此处只需要了解即可，因为实际开发中都是使用 CSS 来对 HTML 进行样式设置，一般都不会使用样式属性。
2.1 HTML语法规范
2.1.1 基本语法概述
HTML 标签是由尖括号包围的关键字词，例如：<html>。
HTML 标签通常是成对出现的，例如：<html> 和 </html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签，例如：<br />，我们称为单标签。注意：/ 之前有一个空格（Coding Style 编码风格）。每个标签原则上都应该有结束符，即：/。所以单标签的最后要加 / 以表示结束，当然不加也是可以被浏览器正常解析的。
HTML5 规范中明确说明单标签
/是可以忽略的，实际开发中建议不要给单标签添加斜线。
任何标签都建议不要大写，即便是
<!doctype html>标签。
2.1.2 标签关系
- 包含关系
<head>
<title></title>
</head>
- 并列关系
<head>
</head>
<body>
</body>
2.2 HTML基础结构标签
2.2.1 第一个HTML网页
每个网页都会有一个基础的结构标签（骨架标签：4组），页面内容也是在这些基础标签上书写的。
HTML 页面也称为 HTML 文档。
【HTML 基础结构】
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
| 标签名 | 定义 | 说明 |
|---|---|---|
<html> </html>
|
根标签 | 页面中最大的标签（最基础的标签） |
<head> </head>
|
头部标签 | 在 head 标签中我们必须要设置 title 标签 |
<title> </title>
|
标题标签 | 页面自己的网页标题 |
<body> </body>
|
主体标签 | 包含文档的所有内容 |
网页 title 示例：
2.3 网页开发工具
-
WebStorm（生态、智能、收费） -
VSCode（免费、插件、轻量） -
HBuilderX（国产、跨端开发） -
Sublime Text（插件、轻量、收费） -
Atom（免费、插件、轻量） -
Dreamweaver（可视化、智能、收费） -
Notepad++（免费、轻量） -
Windows 记事本（坑爹） - ……
2.3.1 文档类型声明标签
<!doctype> 文档类型声明，作用是告诉浏览器应该使用哪种 HTML 版本来解析渲染网页。
<!doctype html>
<!-- 当前页面采用 HTML5 版本 -->
注意：
-
<!doctype>声明位于文档最前面的位置，处于 <html> 标签之前 -
<!doctype>文档类型声明标签，不属于 HTML 标签 - 请默认统一指定 HTML5 版本
<!doctype html>
2.3.2 lang语言种类
用来定义当前网页显示的主语言，书写在 <html> 标签内。
-
en定义语言为英语 -
zh定义语言为中文
简单来说：定义为 en 就是面向英文用户的网页，定义为 zh 就是面向中国大陆用户的网页。
en-GB英文（英国）
en-US英文（美国）
zh-CN中文（简体，中国大陆）
zh-SG中文（简体，新加坡）
zh-HK中文（繁体，香港）
zh-MO中文（繁体，澳门）
zh-TW中文（繁体，台湾）
<html lang="zh-CN">
</html>
语言的设置是为了方便
浏览器搜索推荐以及触发浏览器翻译功能，并不是说设置了某类主语言后网页中就不能存在其他类型的语言了。
2.3.3 字符集
字符集：多个字符的集合，以便计算机能够识别和储存各种文字。
在 <head> 标签内，可以通过 <meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
<meta charset="UTF-8">
charset 常用的值有：GB2312、BIG5、GBK、UTF-8，其中 UTF-8 也被称为：万国码，基本包含了全世界所有国家需要用到的字符。
注意：字符设置是必须的，否则极大可能引起网页乱码。一般情况下，统一使用 "UTF-8" 编码，尽量统一写成标准的 UTF-8，不要写成 "utf8" 或 "UTF8"。
标准骨架：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
2.3.4 IE 兼容模式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的绘制模式。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
</body>
</html>
2.4 HTML常用标签
2.4.1 标签语义
简单的理解：标签的含义，即：这个标签是用来干嘛的。
2.4.2 标题标签
为了使网页更具有语义化，我们经常会在页面中用到标题标签。
HTML 提供了 6 个等级的网页标题，即：<h1> 到 <h6>。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
单词 head 的缩写，意为：头部、标题。
标签语义：作为标题使用，并且依据重要性递减。
特点：
- 加了标题的文字会自动加粗，字号也会依次变大
- 一个标题就独占一行，同一行标题后不会再放置其他任何内容（后期可以通过 CSS 修改）
级别越大的标题标签，对网页元素的强调性越强，同时也和浏览器 SEO 优化有关。
故：标题标签不得滥用，要用在合适的地方！
2.4.3 段落和换行标签
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示，在 HTML 标签中，<p> 标签用于定义段落，它可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
单词 paragraph 的缩写，意为：段落。
便签语义：可以把 HTML 文档分割为若干段落。
特点：
-
文本在一个段落中会根据浏览器窗口的大小自动换行
对于中文段落来说无论如何都会自动换行，但是对于英文段落来说如果字母是连续的（aaa...），那么浏览器会认为该段落整体都是一个字母不会自动换行，要想英文段落自动换行字母之间得有空格。
段落和段落之间保有空隙（段间距）
同一段落里的不同行文字之间也有一定的空隙（行间距）
在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。
如果希望某段文本强制换行显示，就需要使用换行标签 <br>。
<br>
单词 break 的缩写，意为：打断、换行。
标签语义：强制换行。
特点：
-
<br>是个单标签 -
<br>标签只是简单地开始新的一行，跟段落不一样，所以不会产生段间距
分割线标签：<hr>。
<hr>
<!-- 某些时候需要对内容块进行分割时会用到分割线标签 -->
注意：实际开发中并不常用 hr 作为分割线，而是使用 CSS 盒子模型中的边框来实现分割线效果，或是利用一个空盒子设置长宽高及背景颜色来实现分割线效果。
2.4.4 文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 |
<strong> </strong> 或 <b> </b>
|
介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者 |
| 倾斜 |
<em> </em> 或 <i> </i>
|
介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者 |
| 删除线 |
<del> </del> 或 <s> </s>
|
介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者 |
| 下划线 |
<ins> </ins> 或 <u> </u>
|
介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者 |
注意：
<em>标签不只是单纯的用于倾斜文本，其核心的意义在于对元素进行强调！所以在后期的开发中可以把一些特殊性、强调性的元素放在 em 标签中，然后再对 em 这个盒子进行样式设置，这比把其放入其他盒子（如：span）中要更合理，同理<strong>标签页适合放一些重点强调的元素。
2.4.5 <div>和<span>标签
<div> 和 <span> 是没有语义的，它们就是两种盒子，用来对网页进行布局和装其他内容。
<div>这是头部</div>
<span>今日价格</span>
div 是 division 的缩写表示：分割、分区。
span 意为：跨度、跨距。
特点：
-
<div>标签用来布局，一行只能放一个<div>，大盒子 -
<span>标签用来布局，一行上可以放多个<span>，小盒子
说明：后期可以通过 CSS 将 div 与 span 之间的特性相互转换。
拓展： span 标签不单单是用于布局，对于一些需要单独修饰和设置的元素，可以将其用 span 标签嵌套起来，然后就可以单独对其进行设置（比如：在一个 p 标签的段落中要对其中某一句话单独设置样式，那么就可以用 span 将这句话单独嵌套起来，这样就方便对其单独设置样式还不会影响段落中的其他内容，这其实也是利用了 span 一行可以放置多个盒子的特性），不过对于特殊且具有强调性的元素建议使用 em，对于重点强调但不特殊的的元素建议使用 strong。
2.4.6 图像标签和路径
（1）图像标签
在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
<img src="图像URL">
单词 image 的缩写，意为图像。
src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名。
URL 是 统一资源定位符（通俗理解：地址、网址）。
所谓属性：简单理解就是属于这个图像标签的特性。
图像标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
src |
图片路径 | 必须属性 |
alt |
文本 | 替换文本，图像显示失败时显示（为了提高 SEO 及适配屏幕阅读器，建议都把 alt 写上） |
title |
文本 | 提示文本，鼠标放到图片上，显示的提示文字 |
width |
像素 | 设置图像的宽度（了解，后面通过 CSS 设置） |
height |
像素 | 设置图像的高度（了解，后面通过 CSS 设置） |
border |
像素 | 设置图像的边框粗细（了解，后面通过 CSS 设置） |
图像标签的注意点：
- 图像标签可以同时拥有多个属性（其它标签也是同理）
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开（其它标签也是同理）
-
属性均采取键值对的格式，即：
key="value"的格式，属性="属性值" - 设置图像的宽度与高度时：一般设置其中之一便可，另外一个会自动按比例适配
- 设置宽高时，可以使用百分数作为值，此时图片大小会以当前父元素的大小为基础进行比例缩放，这样做的好处在于当父元素改变大小时，图片也会随比例同等缩放
（2）路径
- 相对路径
相对路径：以引用文件所在位置为参考基础，而建立出目录路径。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | . |
如：<img src="baidu.png" />
|
| 下一级路径 | / |
如：<img src="image/baidu.png" />
|
| 上一级路径 | ../ |
如：<img src="../image/baidu.png" />
|
- 绝对路径
绝对路径：指目录下的绝对位置，直接到达目的位置，通常是从盘符开始的路径。
如 Windows 系统的绝对路径：D:\web\img\logo.png
-
网络地址
https://www.jianshu.com/u/47af21c4c59f
注意：
- 相对路径为
/（正斜杆），绝对路径为\（反斜杆） - 实际开发中建议使用相对路径或网络地址（都是
/正斜杆）
这里所说的绝对路径为
/（正斜杠）指的是在 Windows 环境中，而 Linux 系统依旧是反斜杠。
2.4.7 音频标签
图像标签
在 HTML 标签中，<audio> 标签用于定义 HTML 页面中的音频。
<audio src="./music.mp3" controls></audio>
音频标签的常见属性：
| 属性名 | 功能 |
|---|---|
src |
音频的路径 |
controls |
显示播放的控件 |
autoplay |
自动播放（部分浏览器不支持） |
loop |
循环播放 |
注意：
- 音频标签目前支持三种格式：MP3、Wav、Ogg
2.4.8 视频标签
视频标签
在 HTML 标签中，<audio> 标签用于定义 HTML 页面中的视频。
<video src="./video.mp4" controls></video>
视频标签的常见属性：
| 属性名 | 功能 |
|---|---|
src |
视频的路径 |
controls |
显示播放的控件 |
autoplay |
自动播放（谷歌浏览器中需配合muted实现静音播放） |
loop |
循环播放 |
注意：
- 视频标签目前支持三种格式：MP4、WebM、Ogg
2.4.9 超链接标签
在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
（1）链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本、图像或其他内容</a>
单词 anchor 的缩写，意为：锚。
两个属性的作用如下：
| 属性 | 作用 |
|---|---|
href |
用于指定链接目标的 url 地址，（必须属性）当标签应用 href 属性时，它就具有了超链接的功能 |
target |
用于指定链接页面的打开方式，其中 _self 在当前页面打开的方式（为默认值），_blank 在新窗口中打开的方式 |
（2）链接分类
-
外部链接：例如：
<a href="http://www.baidu.com">百度</a> -
内部链接：网站内部页面之间相互链接，直接链接内部页面名称即可，例如：
<a href="index.html">首页</a> -
空链接：如果当时没有确定链接目标时，
<a href="javascript:void(0)">首页</a>"，当用户点击链接时，void(0) 计算为 0，但 Javascript 上没有任何效果 -
下载链接：如果 href 里面地址是一个文件或者压缩包（前提：路径包含文件类型后缀名，如：
.exe、.zip等），便会下载这个文件 - 网页元素链接：在网页中的各种网页元素，如：文本、图像、表格、音频、视频等都可以添加超链接
-
锚点链接：点击链接，可以快速定位到当前页面中的某个位置
- 在链接文本的 href 属性中，设置属性值的
#名字的形式，如：<a href="#two">第2集</a> - 找到目标位置标签（此处以 h3 标签为例），里面添加一个
id属性="刚才的名字"，如：<h3 id="two">第2集介绍</h3> -
<a href="#"></a>默认定位到页面顶部
- 在链接文本的 href 属性中，设置属性值的
