1. HTML语法规范
1.1 基本语法概述
1. HTML标签是由尖括号包围的关键词。 e.g <html>
2. HTML标签通常是成对出现的，例如 <html> 和</html>，称为双标签，前者为开始标签，后者为结束标签。
3. 有些特殊标签必须是单个标签（极少情况），例如 <br />，称为单标签。
1.2 标签关系
双标签关系可以分为两类：包含关系和并列关系。
2. HTML基本结构标签
| 标题名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，即根标签。 |
| <head></head> | 文档头部 | 在head标签中我们必须要设置的标签是title |
| <title></title> | 文档标题 | 让页面有一个属于自己的网页标题 |
| <body></body> | 文档主体 | 页面内容基本放在body里面 |
HTML文档的后缀名必须为 .html 或 .htm
3. 必备代码（可由开发工具自动生成）
3.1 文档类型声明标签
<!DOCTYPE> 文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。
！！！<!DOCTYPE>声明位于文档最前面，在<html>标签之前
！！！<!DOCTYPE>不是一个HTML标签
3.2 lang 语言种类
用来定义当前文档显示的内容。
1. en定义语言为英语（英文网页）
2. zh-CN定义语言为中文（中文网页）
3.3 字符集
字符集是多个字符的集合，以便计算机能够识别和存储各种文字。
在<head>标签内，可通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
charset常用的值：GB2312、BIG5、GBK、UTF-8，UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
<meta charset="UTF-8" /> 是必须要写的代码，否则会出现乱码的情况。
UTF-8书写时要写标准，不要写成 UTF8 或 utf8 。
4. HTML常用标签
4.1 标题标签 <h1> - <h6>
作为标题使用，并依据重要性递减。
（1）加了标题的文字会变得更粗，字号也会依次变大；
（2）一个标题独占一行。
4.2 段落标签和换行标签
<p></p>定义段落，可以将整个网页分为若干个段落。
（1）文本在一个段落中会根据浏览器窗口的大小自动换行；
（2）段落和段落之间保有空隙。
<br />将某段文本强制换行显示。
（1）<br />是一个单标签；
（2）<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
4.3 文本格式化标签
突出重要性，比普通文字更重要。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或<b></b> | 更推荐使用strong标签，语义更强烈 |
| 倾斜 | <em></em>或<i></i> | 更推荐使用em标签，语义更强烈 |
| 删除线 | <del></del>或<s></s> | 更推荐使用del标签，语义更强烈 |
| 下划线 | <ins></ins>或<u></u> | 更推荐使用ins标签，语义更强烈 |
4.4 <div> 和 <span>标签
没有语义，它们就是一个盒子，用来装内容的。
（1）<div>标签用来布局，一行只能放一个<div>（大盒子）
（2）<span>标签用来布局，一行可以放多个<span>（小盒子）
4.5 图像标签和路径
1. 图像标签
<img>定义HTML页面中的图像。
src是<img>标签的必须属性，用于指定图像文件的路径和文件名。
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示时的替换文字 |
| title | 文本 | 提示文本，鼠标放到图像上时显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
（1）图像标签可以拥有多个属性，必须写在标签名的后面；
（2）属性之间不分先后顺序，标签名与属性，属性与属性之间均已空格分开；
（3）属性采取键值对的格式，即key = "value" 的格式，属性 = "属性值"。
2. 路径
目录文件夹：普通文件夹，里面存放了我们做页面时所需要的相关素材，例如html文件、图片等。
根目录：即打开目录文件夹的第一层。
相对路径：以引用文件所在位置为参考基础而建立出的目录路径，即图片相对于HTML页面的位置。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级，如<img src="1.png" /> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级，如<img src="images/1.png" /> |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级，如<img src="../1.png" /> |
绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
4.6 超链接标签
<a></a>标签定义超链接，作用为从一个页面链接到另一个页面。
| 属性 | 作用 |
|---|---|
| href | 指定链接目标的url地址，必须属性，当为标签应用该属性时，它就具有超链接的功能 |
| target | 用于指定链接页面的打开方式，_self为默认值，_blank为在新窗口打开方式 |
链接分类：
（1）外部链接：<a href="http://www.baidu.com">百度</a>；
（2）内部链接：网页内部相互链接，直接链接内部页面名称即可，<a href="1.html">首页</a>；
（3）空链接：没有确定链接目标时，<a href="#">首页</a>；
（4）下载链接：href里面地址是一个文件或压缩包；
（5）网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等；
（6）锚点链接：点击链接时，可以快速定位到页面中的某个位置。
• 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#one">第一页</a>
• 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如<h3 id="one">第一页介绍</h3>
5. HTML中的注释和特殊字符
5.1 注释
HTML中的注释以 "<!--" 开头，以 "-->" 结束，快捷键为 ctrl + /。
注释标签里的内容是给程序员看的，这个代码并不会执行也不会显示到页面中，添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码。
5.2 特殊字符
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空字符 | | |
| < | 小于号 | &It; |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ▫ | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
