页面结构语义化
为什么需要语义化
- 易修改，易维护
- 无障碍阅读支持
- 搜索引擎友好，利于
SEO - 面向未来的
HTML，浏览器在未来可能提供更丰富的支持
结构语义化
语义化结构展示
头部 header
<header>元素有两种用法，第一种是标注内容的标题，第二种是标注网页的页眉（如上图）。除非必要（内容标题附带其他的信息情况下：发布时间，作者等），一般不在内容中使用<header>。因而，网页中的可以包含多个<header>，
按照HTML5的规定，<header>都应该包含某个级别的标题，所以应隐式或显式的包含标题，通常将不希望显示的标题设置为display: none;，一方面遵守规范，另一方面则提供了无障碍阅读而不至于影响到页面设计。
导航栏 nav
nav不仅仅只作用在常用的导航栏上，他也可以用于一组文章的链接。一个页面可以包含多个<nav>元素，但通常仅仅只在页面导航部分使用它
《HTML5：The Missing Manual》中指出了在侧栏使用
<!-- 案例一 -->
<nav>
<!-- 此处是链接 -->
<aside></aside>
<aside></aside>
</nav>
<!-- 案例二 -->
<aside>
<nav>
<!-- 此处是链接 -->
</nav>
<section></section>
<div></div>
</aside>如果侧栏中包含其他同于链接的其他区块，那么使用第二种方案更合适
导航通常包含一组链接，普遍认为链接使用列表来组织。
<nav>
<ul>
<li><a href="#" title="链接">链接</a></li>
<li><a href="#" title="链接">链接</a></li>
<li><a href="#" title="链接">链接</a></li>
</ul>
</nav>附注 <aside> - 侧栏
<aside>元素不仅仅是侧栏，他表示与他周围文本没有密切关系的内容。文章中同样可以使用<aside>元素，来说明文章中的附加内容，解释说明文章的某个观点，相关内容链接等。
当<aside>用于侧边栏时，其表示整个网页的附加内容，通常的广告区域、搜索、分享链接则位于侧栏。侧栏中的<section>元素规定了一个区域，通常是带有标题的内容
<section> 标签适合标记的内容区块：
- 与页面主体并列显式的小内容块
- 独立性内容，清单、表单等
- 分组内容，如 CMS 的文章分内区块
- 比较长文档的一部分，可能仅仅是为了正确规定页面大纲
页脚 <footer>
与<header>不同的是，标准规定<footer>标签仅仅可以包含版权、来源信息、法律限制等等之类的文本信息。
<div>
<aside>
<!-- 其它内容 -->
</aside>
<footer>
<!-- 法律、版权、来源、联系信息等 -->
</footer>
</div>主要内容 <main>
在早先的HTML5中并没有规定页面主体的标签，相关的书中经常说：除去头部、尾部、侧边栏等于其他部分，剩下的就是主体部分
HTML5.1 中规定了一个<main>标签来识别主体内容，<main>标签不能被包含在页面其他区块元素中，通常是<body>的子标签，或者是全局<div>的子标签。<main>标签可以帮助工具来识别页面的主体部分，从而让访问者迅速得到有用的信息
文章 <article>
<article>表示一个完整的、自成一体的内容块，例如文章或新闻报道，<article>应包含完整的标题、文章署名、发布时间、正文。当语义发生冲突，例如有时需要将文章分多个页面显式，那么需要把每个页面的文章区域都用<article>标记
文章中包含插图时，使用新的语义元素
<article>
<h1>标题</h1>
<p>
<!-- 内容 -->
</p>
<figure>
<img src="#" alt="插图">
<figcaption>这是一个插图</figcaption>
</figure>
</article>上述情况下，<img>的alt属性可以略去。
微信- 支付宝
