HTML语义化是什么？
使用有语义的标签，来构建内容结构。代替以往大量的div+css布局方式
语义化后有何作用？
这里列出最为关键的两点：
- 语义化更具可读性，便于团队开发和维护
- 有利于SEO，因为爬虫依赖于标签来确定上下文和各个关键字的权重
介绍使用频率最高的几个语义化标签
nav元素
用于定义页面的主要导航部分
article元素
自身内容独立的情况下：用article
是相关内容：用section
没有语义的：用div
aside元素
aside在article内表示主要内容的附属信息
在article之外则可做侧边栏，没有article与之对应，最好不用
如果是广告，其他日志链接或者其他分类导航也可以用
section元素
表示文档中的节或者段，section通常还带标题
article、nav、aside可以理解为特殊的section，
所以如果可以用article、nav、aside就不要用section，没实际意义的就用div
header元素
可以是“网页”或任意“section”的头部部分
hgroup元素
如果有连续多个h1-h6标签就用hgroup
footer元素
可以是“网页”或任意“section”的底部部分
应用HTML语义化写代码时的一些注意事项
如果你打算从一至终地运用语义化标签写代码，这里介绍一些需要注意的事项：
- 尽可能少使用无语义标签div和span，不要使用纯样式标签(如：b、i、s、u)
- 可以使用div或p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利
- 使用表格时，表头用thead，主体部分用tbody，尾部用tfoot。表头和一般单元格要区分开，表头用th，一般单元格用td
- 表单域要用fieldset标签包起来，并用legend标签说明表单的用途
其它
如果你懒得去官方文档中去查阅更多语义化标签，这里列举了一部分工作中比较常用的。
<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<ol>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
