前端基础——HTML5标签
语义化标签
section
只要是个页面内容区块就可以用section标签，比如：章节，页脚，页眉以及页眉的其他部分。
可以和h标签结合起来使用，表示文档结构。
header
一个内容区块或者整个页面的头部
footer
整个页面或者页面区块的尾部（底部）
nav
页面中导航链接的部分
hgroup
对整个页面或者页面中的一个内容区块的标题进行组合
article
定义可以独立于内容其余部分的完整独立内容块，article是专门为摘要设计的，比如一篇文章。
这文章可以放在网页中，报纸上，也可以独立成为一个网页。
aside
表示article标签内容之外的，与article内容相关的辅助信息，aside元素应该被用于无关内容。
- 如果有应该与主内容分开的内容，aside元素是需要正确考虑的元素。
- 询问自己aside元素中的内容是否可以独立开来而不会影响文档或者section中主内容的含义
- 可以用在主要内容相关的引用，侧边栏，广告，nav元素组等
- 简单来说，aside内容如果被删除，剩下的内容仍然很合理，它存在与否对主体内容不会有影响
figure
表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元（用在文章中，表示文章的插画）
figure元素经常用于图片
figcaption
代表一个图例的说明（插画下面的一行文字说明）
代表figure元素的标题或者说是其相关解释
在使用figcaption时，它最好是figure块的第一个或者最后一个元素
新增标签的兼容问题
HTML5语义化标签在IE6-8下，对不支持的标签不会有任何的样式，也默认的当做行内元素显示出来。所以在样式表里要对这些标签定义一下它默认的display
通过引入如下JS来解决IE9以下新增标签的兼容问题。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--[if lt IE 9]> (兼容ie浏览器的方法) <script src="html5shiv.js"></script> <![endif]--> </head> <body> <header class="header"> <h1>某某科技有限公司</h1> <nav> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <span>热线电话：000-88888888</span> </nav> <div class="banner"></div> </header> <!--主体部分可以用main标签标示--> <main> <aside class="aside"> <section> <h3>产品分类</h3> <ul> <li></li> <li></li> <li></li> </ul> </section> <section> <h3>联系我们</h3> <ul> <li></li> <li></li> <li></li> </ul> </section> </aside> <section class="content"> <section class="company"> <h3>公司简介</h3> <figure> <img src="companyShow.png" alt="" /> </figure> <figcaption>图例说明</figcaption> </section> <section class="apply"> <h3>应用领域</h3> </section> <section> <h3>产品展示</h3> <ul> <li><img src="" alt="" /><span></span></li> <li><img src="" alt="" /><span></span></li> <li><img src="" alt="" /><span></span></li> </ul> </section> </section> </main> <footer> <!--页脚也是一个导航，但是主导航用了nav，所以这里可以用个div--> <div> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> </div> </footer> </body> </html>
