HTML语义化
1.什么是HTML语义化？
通过标签判断内容语义，例如根据h1标签判断出内容是标题，根据
判断内容是段落、标签是输入框等。
2.为什么要语义化？
1).去掉或样式丢失的时候能让页面呈现清晰的结构
2).方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
3).有利于SEO
4).便于团队开发和维护，遵循W3C标准，可以减少差异化
3.如何确定你的标签是否语义良好？
去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。
4.常见的语义化标签模块
表单
登录表单
账号：
密码：
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
5.语义化标签应注意的一些问题
尽可能少的使用无语义的标签p和span；
在语义不明显时，既可以使用p或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中，strong默认样式是加粗(不要用b)，em是斜体(不用i)
6.语义化标签的使用
1.头部标签header：header元素有两种用法，第一是标注内容的标题，第二是标注网页的页眉，如上图你看到的那样。除非必要（内容标题附带其它信息的情况下：发布时间、作者等），一般不在内容中使用header。因而，网页中可以包含多个header元素。按照 HTML5 的规定，header都应包含某个级别的标题，所以应隐式或显式地包含标题，通常将不希望显示的标题设置为display: none;，一方面遵守规范，另一方面则提供了无障碍阅读而不至于影响到页面设计。
2.导航栏标签nav：导航栏使用nav看起来是理所当然的，进一步，它也用于一组文章的链接。一个页面可以包含多个nav元素，但通常仅仅在页面的主要导航部分使用它。
3.附注标签aside：aside元素并不仅仅是侧栏，它表示与它周围文本没有密切关系的内容。文章中同样可以使用aside元素，来说明文章的附加内容、解释说明某个观点、相关内容链接等等。
4.页脚标签footer：footer标签仅仅可以包含版权、来源信息、法律限制等等之类的文本或链接信息。如果想要在页脚中包含其它内容，可以使用熟悉的div来帮忙。
5.主要内容标签main：在早先的 HTML5 版本中并没有规定页面主体的标签，相关的书中经常会说：除去头部、尾部、侧栏等其它部分，剩下的自然是主体部分。然而，HTML5.1 中规定了一个main标签来标识主体内容。main标签不能包含在页面其它区块元素中，通常是body的子标签，或者是全局div的子标签。main标签可以帮助屏幕阅读工具识别页面的主体部分，从而让访问者迅速得到有用的信息。
6.文章标签article：article表示一个完整的、自成一体的内容块。如文章或新闻报道。article应包含完整的标题、文章署名、发布时间、正文。当语义与表现发生冲突，例如有时需要将文章分多个页面显示，那么需要把每个页面的文章区域都用article标记。
7.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化标签</title>
</head>
<body>
<header>我是页面标题</header>
<header>我是页面标题</header>
<nav>
<a href=""> 导航1 </a>
<a href=""> 导航1 </a>
<a href=""> 导航1 </a>
</nav>
<aside>侧边栏</aside>
<article>我是文章
</article>
<footer>我是页脚</footer>
</body>
</html>
