HTML语义化
什么是HTML语义化？
根据内容的结构，选择合适的HTML标签。使代码优雅易读易维护且有助于爬虫抓取更多的有效信息。
HTML语义化的优点
1、在没有CSS的情况下，页面也能呈现出很好的内容结构；
2、有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字的权重）；
3、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4、便于团队开发和维护，语义化更具可读性。
一些常见html5语义化标签
1、<title> 元素是最重要的 HTML 元素之一。它的主要功能是描述网页的内容。
即使标题不是网页的一个可见的部分，它对于提升网站的品质依然是重要的，这是因为它在以下位置都是可见的：
---搜索引擎列表
---窗口的标题栏
---用户的书签中
标题应当尽可能地短，并具有可描述性。
2、<hn></hn>：h1~h6分级标题，用于创建页面信息的层级关系。
对于搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重，尤其是h1。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
3、<header></header>：页眉。通常包括网站标志、主导航、全站链接以及搜索框。
也适合对页面内部一组介绍性或导航性内容进行标记。<header>标签是HTML5中的新标签。
4、<nav></nav>：标记导航。仅对文档中重要的链接群使用。
html5规范不推荐对辅助性页脚链接使用nav，除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。<nav>标签是HTML5中的新标签。
5、<main></main>：页面主要内容。
<main>元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
注释：在一个文档中，不能出现一个以上的<main>元素。<main>元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。
<main>标签是HTML5中的新标签。
6、<article></article>：定义外部的内容。
外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自blog的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
7、<section></section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
如果只是为了添加样式，请用div！
<section>标签是HTML5中的新标签。属性cite，section的URL，假如section摘自web的话。
8、<aside></aside>：指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。
如果放在main内，应该与所在内容密切相关。
9、<footer></footer>：页脚。
只有当父级是body时，才是整个页面的页脚。
10、<small></small>：标签定义小型文本（和旁注）。
11、<strong></strong>：表示内容重要性。
12、<em></em>：标记内容着重点（大量用于提升段落文本语义）。
13、<mark></mark>：突出显示文本，提醒读者。
14、<figure></figure>：规定独立的流内容（图像、图表、照片、代码等等）。
figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
15、<figcaption></figcaption>：figure的标题，必须是figure内嵌的第一个或者最后一个元素。
16、<cite></cite>：通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
17、<blockquote></blockquote>：引述文本，默认新的一行显示。
18、<q></q>：短的引述（跨浏览器问题，尽量避免使用）。
可以对blockquoto和q元素使用cite属性（不是cite元素！），对搜索引擎自动化工具有用。cite="URL"引述来源地址。
19、<time></time>：标签定义日期或时间，或者两者。
<time>标签是HTML5中的新标签。
20、<abbr></abbr>：解释缩写词。使用title属性可提供全称。
21、<dfn></dfn>：标记那些对特殊术语或短语的定义。
22、<address></address>：定义文档或文章的作者/拥有者的联系信息。
如果<address>元素位于<body>元素内，则它表示文档联系信息。
如果<address>元素位于<article>元素内，则它表示文章的联系信息。
<address>元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
23、<del></del>：移除的内容。
24、<ins></ins>：添加的内容。
25、<code></code>：用于表示计算机源代码或者其他机器可以阅读的文本内容。
26、<pre></pre>：预格式化文本。保留文本固有的换行和空格。
<pre>标签的一个常见应用就是用来表示计算机的源代码。
27、<meter></meter>标签定义度量衡。仅用于已知最大和最小值的度量。
例：<meter min="0" max="20">5</meter>
<meter>2 out of 10</meter>
<meter>30%</meter>
<meter>标签是HTML5中的新标签。
28、<progress></progress>：定义运行中的进度（进程）。
可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。
29、<details></details>标签用于描述文档或文档某个部分的细节。
<details>标签是HTML5中的新标签。目前只有Chrome支持<details>标签。
30、<label></label>标签为input元素定义标签（label）。
label元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击label元素内的文本，则会切换到控件本身。
<label>标签的for属性应该等于相关元素的id元素，以便将它们捆绑起来。
