什么是HTML?
HTML: Hyper Text Markup Language.
HTML tags
HTML的标签分为两种：双标签（paired tag）和单标签（self-closing tag）。所谓的双标签，就是说该标签有一个起始标签（opening tag）和一个结束标签（closing tag），形式为：<起始标签>标签体</结束标签>。单标签的形式为：<标签名 />，其中foward slash是可以忽略不写的。
标签和标签之间的关系可以是并列，也可以是嵌套。如果是嵌套关系，编写代码的时候可以用tab键来进行缩进。
HTML的每个标签有其对应的标签属性（attribute），给标签提供一些附加信息。属性可以写在双标签中的起始标签里，或者单标签里。形式为：
<起始标签 属性名1=“属性值1” 属性名2=“属性值2”>标签体</结束标签>
<标签 属性名1=“属性值1” 属性名2=“属性值2”>有一些比较特殊的标签，只有属性名，没有属性值，例如：
<input type="text" disabled>注意事项：
- 不同的标签有不同的属性，当然了，有一些属性是所有标签通用的，比如id， class等；
- 属性名和属性值都不能乱写；
- 属性名和属性值是不区分大小写的，但都推荐小写；
- 双引号也可以写作单引号，甚至不写都行，但推荐双引号；
- 标签中不要出现同名属性，否则后写的会失效。
HTML的基本结构
在网页上点击鼠标右键，会出现查看网页源代码和检查。查看网页源代码看到的是程序员编写的源代码，检查看到的是经过浏览器处理后的源代码，一般来说日常开发中“检查”用到的居多。
网页的基本结构如下：
<html>
<head>
<!-- 不会出现在网页中，但会指定一些关于该网页的信息，例如网页标题，指定解码字符集等 -->
</head>
<body>
<!-- 想要网页呈现的内容 -->
</body>
</html>HTML注释
注释的作用是对代码进行解释和说明，其内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见。
<html>
<head>
</head>
<body>
<!-- 这是单行的注释 -->
<!--
这个是
多行的
注释
-->
</body>
</html>HTML文档声明
告诉浏览器当前网页的版本，由于html5是向后兼容的，所以直接标注为html5版本就好，以前的版本声明写起来非常的麻烦，也没有必要。要将文档写在第一行，且在html标签的外侧。
<!DOCTYPE html>HTML字符编码
常见的字符集有如下几种：
- ASCII：大写字母，小写字母，数字，一些符号，共计128个字符；
- ISO 8859-1：在ASCII的基础上扩充了一些希腊字符等，共计是256个字符；
- UTF-8：包含世界上所有字符的字符集。
原则是：存储的时候，务必采用合适的字符编码，必须有汉字，就不能用ASCII或者ISO 8859-1字符集。存储是用的那种方式编码，读取的时候就用哪种方式解码，要不然就会出现乱码。平时编写代码的时候，统一采用UTF-8编码。
<head>
<meta charset="UTF-8" />
</head>HTML设置语言
主要作用是让浏览器显示对应的翻译提示，且有利于搜索引擎的优化。具体写法:
<html lang="en">
<!--
其他比较常见的有：
zh-CN：中文-中国大陆
zh-TW: 中文-中国台湾
zh: 中文
en-US: 英语-美国
en-GB: 英语-英国
-->h标签
一种语义化标签。块级元素（block element）。h1~h6为标题。h1最好写一个，h2~h6能适当多写。h标签不能相互嵌套。
p标签
块级元素。代表一个段落。里面不能有别的块级元素。
div标签
块级元素。没有任何含义，是用来整体布局的一个标签，可以比喻为生活中的包装袋。
文本标签
文本标签用于包裹词汇，短语等，通常写在排版标签里面（p, div等）。排版标签更宏观（大段的文字），文本标签更微观（词汇，短语）。文本标签通常都是行内元素。
| 标签名 | 标签语义 | 单/双标签 |
|---|---|---|
| em | 要着重阅读的内容 | 双 |
| strong | 十分重要的内容（语气比em要强） | 双 |
| span | 没有语义，用于包裹短语的通用容器（div是大包装袋，span是小包装袋） | 双 |
| sub | 下标文字 | 双 |
| sup | 上标文字 | 双 |
| code | 一段代码 | 双 |
| address | 地址信息 | 双 |
blockquote和address都是块级元素，其他的文本标签都是行内元素。这些标签很多都不常用，所以不用过过于纠结。
图片标签
标签名是img，其中常用的属性有：
- src：图片路径，只图片的具体位置
- alt: 图片的描述。搜索引擎通过alt属性，得知图片的内容；当图片无法展示的时候，有的浏览器会呈现alt属性的值。
- width, height：图片的宽度和高度，单位是像素。尽量不同时修改图片的宽和高，可能会造成比例失调。
img是行内元素，不会独占一行。图片路径分为相对路径和绝对路径。相对路径是以当前网页的位置作为参考点去建立路径，而绝对路径是以根位置作为参考点，去建立路径。绝对路径分为本里绝对路径和网络绝对路径。使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。使用网络相对路径确实很方便，但一旦资源服务器开启了防盗链，会造成图片引入失败。
常见图片标签
jpg
是一种有损的压缩格式，把肉眼不容易观察出来的细节丢弃了。主要特点：支持的颜色丰富，占用空间较小，不支持透明背景，不支持动态图。使用场景：对图片细节没有极高要求的场景，例如网站的产品宣传图。这种格式在网页里很常见。
png
是一种无损的压缩格式，能够更高质量的保存图片。主要特点：支持的颜色丰富，占用空间略大，支持透明背景，不支持动态图。使用场景：想让图片有透明背景；想更高质量的呈现图片，例如公司logo图，重要配图等。
bmp
不进行压缩的一种格式，在最大程度上保留图片更多的细节。主要特点：支持的颜色丰富，保留的细节更多，占用空间极大，不支持透明背景，不支持动态图。使用场景：对图片细节要求极高的场景，例如一些大型游戏中的图片，网页里很少使用。
gif
仅支持256种颜色，色彩呈现不是很完整。主要特点：支持的颜色较少，支持简单透明背景，支持动态图。使用场景为网页中的动态图片。
webp
谷歌推出的一种格式，专门用来在网页中呈现图片。具备上述几种格式的优点，但就是兼容性不太好。不过应该是未来的趋势。
base64
把图片进行base64编码，从而形成一串特殊的文本，需要通过浏览器才能打开。直接作为img标签的src属性值即可使用，不收文件位置的影响。使用场景为一些较小的图片，或者需要和网页一起加载的图片。
超链接
主要作用是从当前页面进行跳转。常用的属性如下：
| 属性 | 解释 |
|---|---|
| href | 指定要跳转到的具体目标 |
| target | 控制跳转时如何打开页面，常用值：_self：在本窗口打开，_blank：在新窗口打开 |
| id | 元素的唯一标识，可用于这只锚点 |
| name | 元素的名字，写在a标签中，也能设置锚点 |
1. 跳转到页面
<!-- 跳转到其他网页 -->
<a href="https://www.amazon.com" target="_blank">amazon</a>
<!-- 跳转到本地网页 -->
<a href="./contact.html" target="_self">contact</a>注意：代码中的多个空格，多个回车，都会被浏览器解析成一个空格。虽然a是行内元素，但a元素可以包裹除它自身外的任何元素！
2. 跳转到文件
<!-- 浏览器能直接打开的文件,jpg,mp4,gif,pdf等 -->
<a href="./resource/小电影.mp4">看资源文件</a>
<!-- 浏览器不能打开的文件，会自动触发下载 --->
<a href="./resource/secret.zip">点击下载内部资源</a>
<!-- 强制触发下载，download的属性值即为下载文件的名称 -->
<a href="./resource/小电影.mp4" download="别名.mp4">下载电影</a>3. 跳转到锚点
什么是锚点？是网页中的一个标记点。具体使用方式分为两步：
第一步：设置锚点
<!-- 第一种方式：a标签配合name属性。 --->
<a name="test1"></a>
<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>注意：
- 具有href属性的a标签是超链接，具有name属性的a标签是锚点。
- name和id都是区分大小写的，且id最好别是数字开头。
第二步：跳转锚点
<!-- 跳转到test1锚点 -->
<a href="#test">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js，如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>4. 唤起指定应用
通过a标签，可以唤起设备应用程序。
<!-- 唤起设备拨号 --->
<a href="tel:911">call me</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:911@gmail.com">email me</a>
<!-- 唤起设备发送短信 -->
<a href="sms:911">text me</a>列表
有序列表
有顺序或者侧重顺序的列表。
<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>无序列表
无顺序或不侧重顺序的列表。
<h2>City I want to visit</h2>
<ul>
<li>Beijing</li>
<li>Hangzhou</li>
<li>Shanghai</li>
<li>Xi'an</li>
</ul>列表嵌套
列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把结构写完整）。
<h2>City I want to visit</h2>
<ul>
<li>Dallas
<li>
<span>Seattle</span>
<ul>
<li>Space Needle</li>
<li>Aqurium</li>
<li>
<a href="https://www.example.com">Ferry Wheeel</a>
</li>
</ul>
</li>
<li>San Fracisco</li>
<li>Atlanta</li>
</ul>li标签最好写在ul或者ol中，不要单独使用。
自定义列表
所谓自定义列表，就是一个包含术语名称以及术语描述的列表。一个dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述（一个术语名称可以有多个术语描述）。
<h2>如何高效的学习？</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版，也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正后并记住，就是经验</dd>
</dl>表格
基本结构
一个完整的表格由表格标题，表格头部，表格主题，表格脚注四个部分组成。
表格涉及到的标签有：
- table: 表格
- caption：表格标题
- thead: 表格头部
- tbody: 表格主体
- tfoot: 表格脚注
- tr: 行
- th, td：单元格（表格头部用th，表格主体和脚注用td）
具体编码：
<table border="1">
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>常用属性
| 标签名 | 标签语义 | 常用属性 | 单/双标签？ |
|---|---|---|---|
| table | 表格 | width: 表格宽度 height: 表格最小高度，表格的最终高度可能比设置的值大 border: 设置表格边框宽度 cellspacing: 设置单元格之间的间距 | 双 |
| thead | 表格头部 | height: 设置表格头部高度 align: 设置单元格的水平对齐方式，可选值有left, center, right valign: 设置单元格的垂直对齐方式，可选值有top, middle, bottom | 双 |
| tbody | 表格主体 | 常用属性和thead相同 | 双 |
| tr | 行 | 常用属性和thead相同 | 双 |
| tfoot | 表格脚注 | 常用属性和thead相同 | 双 |
| td | 普通单元格 | width: 设置单元格的宽度，同列所有单元格全都受影响 height: 设置单元格的高度，同行所有单元格都受影响 align: 设置单元格的水平对齐方式 valign: 设置单元格的垂直对齐方式 rowspan: 指定要跨的列数 colspan: 指定要跨的行数 | 双 |
| th | 表头单元格 | 常用属性和td相同 | 双 |
注意：
- <table>元素的border属性可以控制表格边框，但border值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度。
- 默认情况下，每列的宽度，得看这一列单元格最长的那个文字。
- 给某个th或td设置了宽度之后，他们所在的那一列的宽度就确定了。
- 给某个th或td设置了高度之后，他们所在的那一列的高度就确定了。
常用标签补充
| 标签名 | 标签含义 | 单/双标签 |
|---|---|---|
| br | 换行 | 单 |
| hr | 分隔 | 单 |
| pre | 按原文显示（一般用于在网页中嵌入大段代码） | 双 |
注意：
- 不要用<br>来增加文本之间的行间隔，应使用<p>元素和css中的margin属性。
- <hr>的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用css完成。
表单
一个包含交互的区域，用于收集用户提供的数据。
基本结构
| 标签名 | 标签语义 | 常用属性 |
|---|---|---|
form | 表单 | action: 表单要提交的地址（后端api） target: 要跳转的新地址打开位置，_self或者_blank method: 请求方法，一般为get或者post |
input | 多种形式的表单控件 | type: 指定表单控件的类型，有text, password, radio, checkbox, hidden, submit, reset, button等 name: 指定数据的名称，做后端请求的时候会当做参数携带 value: 对输入框->指定默认的值，对单选和复选框->实际提交的数据，对按钮->显示按钮文字 disabled: 设置表单控件不可用 maxlength: 用于输入框，设置最大可输入长度 checked: 用于单选按钮和复选框，默认选中 |
| textarea | 文本域 | name: 指定数据名称 rows: 指定默认显示的行数，影响文本域的高度 cols: 指定默认显示的列数，影响文本域的宽度 disabled: 设置表单控件不可用 |
| select | 下拉框 | name: 指定数据名称 disabled: 设置整个下拉框不可用 |
| option | 下拉框的选项 | disabled: 设置下拉选项不可用 value: 该选项事件提交的数据（不指定value就会把标签中的内容作为提交数据） selected: 默认选中 |
| button | 按钮 | disabled: 设置按钮不可用 type: 这只按钮的类型，submit, reset, button等 |
| label | 与表单控件做关联 | for属性：值与要关联的表单控件的id值相同 |
框架标签
iframe, 用来在网页中嵌入其他文件，name为框架名字，可以与target属性配合，width是框架的宽，height是框架的高度，frameborder是否显示边框，值为0或者1。双标签。
HTML实体
在HTML中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是HTMl实体。比如小于号<用于定义HTML标签的开始，如果我们希望浏览器正确地显示这些字符，我们必须在html源码中插入字符实体。
字符实体由三部分组成，一个&，一个实体名称，最后加上一个分号;。
常见实体如下：
| 符号 | 描述 | 实体名称 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| “ | 引号 | " |
HTML全局属性
| 含义 |
|---|
| 给标签指定唯一标识，全局唯一。作用是可以让label标签与表单控件相关联，也可以和css, javascript配合使用。 |
| 给标签指定类名，随后通过css就可以给标签设置样式 |
| 给标签设置css样式 |
| 给标签设置一个文字提示，一般超链接和图片用的比较多 |
| 给标签指定语言 |