1 概述
HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。
HTML 的全名是“超文本标记语言”（HyperText Markup Language），上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999年，HTML 4.01 版发布，成为广泛接受的 HTML 标准。2014年，HTML 5 发布，这是目前正在使用的版本。
2 HTML起手式
打开VS Code，新建一个html文件，输入!再按TAB，起手式就完成了。VS Code会帮我们生成如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
2.1 <!DOCTYPE html>
第一行<!DOCTYPE html>告诉浏览器文档类型为HTML
2.2 <html>
<html>标签是网页的顶层容器，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<html>标签。该标签的lang属性，表示网页内容默认的语言，国内一般用zh-CN。
2.3 <head>
<head>标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染做准备。
2.4 <meta>
<meta>标签用于设置或说明网页的元数据，必须放在<head>里面。一个<meta>标签就是一项元数据，网页可以有多个<meta>。一般来说，网页至少应该具有以下两个<meta>标签，而且必须在<head>的最前面。
(1) charset 属性
<meta>有一个charset属性，指定网页的编码方式，该属性非常重要。如果设置得不正确，浏览器可能无法正确解码，就会出现乱码。一般默认使用utf-8编码。
(2) name 属性，content 属性
<meta>的name属性表示元数据的名字，content属性表示元数据的值。
起手式中的<meta name="viewport" content="width=device-width, initial-scale=1.0">作用为禁止页面缩放，兼容手机。
(3) http-equiv 属性，content 属性
http-equiv属性用来覆盖 HTTP 回应的头信息字段，content属性是该字段的内容。
起手式中的<meta http-equiv="X-UA-Compatible" content="ie=edge">作用为告诉IE使用最新内核。
2.5 <title>
<title>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。
搜索引擎根据这个标签，显示每个网页的标题。它对于网页在搜索引擎的排序，有很大的影响，应该精心安排，反映网页的主题。
<title>标签的内部，不能再放置其他标签，只能放置无格式的纯文本。
2.6 <body>
<body>标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都是放置在它的内部。它是<html>的第二个子元素，紧跟在<head>后面。
3 常用的表章节的标签
3.1 标题h1~h6
HTML 提供了6个标签，用来表示文章的标题。按照标题的等级，一共分成六级。
<h1>：一级标题<h2>：二级标题<h3>：三级标题<h4>：四级标题<h5>：五级标题<h6>：六级标题
<h1>是最高级别的标题，<h6>是最低级别的标题。下一级标题都是上一级标题的子标题，比如，一个<h1>后面可以有多个<h2>，每个<h2>后面又可以有多个<h3>。
标题不应该越级，比如h1下面直接写h3。虽然这样不会报错，但会导致文章失去清晰的章节结构。
默认情况下，浏览器会粗体显示标题。h1的字号比h2大，h2比h3大，以此类推。
3.2 章节section
<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<section>。
3.3 文章article
<article>标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题（<h1>到<h6>）。
一个网页可以包含一个或多个<article>，比如包含多篇文章。
3.4 段落p
<p>标签是一个块级元素，代表文章的一个段落（paragraph）。不仅是文本，任何想以段落显示的内容，比如图片和表单项，都可以放进<p>元素。
3.5 头部header
<header>标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。
如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在<header>里面。
3.6 脚部footer
<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。
3.7 主要内容main
<main>标签表示页面的主体内容，一个页面只能有一个<main>。
注意，<main>是顶层标签，不能放置在<header>、<footer>、<article>、<aside>、<nav>等标签之中。
另外，功能性区块（比如搜索栏）不适合放入<main>，除非当前页面就是搜索页面。
3.8 旁支内容aside
<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<aside>，可以用来放置评论或注释。
3.9 划分div
<div>是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。
4 全局属性
全局属性（global attributes）是所有元素都可以使用的属性。也就是说，你可以把下面的属性，加在任意一个网页元素上面，不过有些属性对某些元素可能不产生意义。
下面是一些常见的全局属性。
4.1 class
class属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的
4.2 contenteditable
HTML 网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。它有两个可能的值。
true或空字符串：内容可以编辑false：不可以编辑
4.3 hidden
hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。
注意，CSS 的可见性设置，高于hidden属性。如果 CSS 设为该元素可见，hidden属性将无效。
4.4 id
id属性是元素在网页内的唯一标识符。比如，网页可能包含多个<p>标签，id属性可以指定每个<p>标签的唯一标识符。
id属性的值必须是全局唯一的，同一个页面不能有两个相同的id属性。另外，id属性的值不得包含空格。
id属性的值还可以在最前面加上#，放到 URL 中作为锚点，定位到该元素在网页内部的位置。比如，用户访问网址 foo.com/index.html#… 的时候，浏览器会自动将页面滚动到bar的位置，让用户第一眼就看到这部分内容。
不到万不得已，尽量不要使用id。
4.5 style
style属性用来指定当前元素的 CSS 样式。
4.6 tabindex
网页通常使用鼠标操作，但是某些情况下，用户可能希望使用键盘，或者只有键盘可以用。因此，浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停按下 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。
这里就有一个问题，按下 Tab 键的时候，浏览器怎么知道跳到哪一个元素。HTML 提供了tabindex属性，解决这个问题。它的名字的含义，就是 Tab 的顺序（index）。
tabindex属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。
- 负整数：该元素可以获得焦点（比如使用 JavaScript 的
focus()方法），但不参与 Tab 键对网页元素的遍历。这个值通常是-1。 0：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。- 正整数：网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历。如果多个元素的
tabindex属性相同，则按照在网页源码里面出现的顺序遍历。
4.7 title
title属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。
5 常用的内容标签
5.1 列表标签
-
<ol>标签是一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号。列表项的顺序有意义时，比如排名，就会采用这个标签。 -
<ul>标签是一个无序列表容器（unordered list），会在内部的列表项前面产生实心小圆点，作为列表符号。列表项的顺序无意义时，采用这个标签。 -
<li>表示列表项，用在<ol>或<ul>容器之中。<ol>+<li>有序列表<ul>+<li>无序列表
-
<dl>，<dt>，<dd><dl>标签是一个块级元素，表示一组术语的列表（description list）。术语名（description term）由<dt>标签定义，术语解释（description detail）由<dd>标签定义。<dl>常用来定义词汇表。<dt>和<dd>都是块级元素，<dd>默认会在<dt>下方缩进显示。
5.2 <pre>
<pre>是一个块级元素，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。
5.3 <hr>
<hr>用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线。该标签是单独使用的，没有闭合标签。
5.4 <br>
<br>让网页产生一个换行效果。该标签是单独使用的，没有闭合标签。
5.5 <a>
链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。
具体用法见下篇博客。
5.6 <em>
<em>是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。
5.7 <strong>
<strong>是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容。
5.8 <code>
<code>标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。
如果要表示多行代码，<code>标签必须放在<pre>内部。<code>本身仅表示一行代码。
5.9 <blockquote>
<blockquote>是一个块级标签，表示引用他人的话。浏览器会在样式上，与正常文本区别显示。
5.10 <q>
<q>是一个行内标签，也表示引用。它与<blockquote>的区别，就是它不会产生换行。
