HTML5-语义元素

概念：一个语义元素能够清楚的描述其意义给浏览器和开发者

H5中的新语义元素

• <article> 标签定义独立的内容（论坛/博客/新闻）。
• <aside> 元素页面主内容之外的某些内容（比如侧栏）。
• <details> 定义用户能够查看或隐藏的额外细节。
• <figcaption> 标签定义 <figure> 元素的标题。
• <figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
• <footer> 元素为文档或节规定页脚。
• <header> 元素为文档或节规定页眉。
• <main> 规定文档的主内容。
• <mark> 定义重要的或强调的文本。
• <nav> 元素定义导航链接集合。
• <section> 元素定义文档中的节。
• <summary> 定义 <details> 元素的可见标题。
• <time> 定义日期/时间。

 

浏览器兼容性

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。

Internet Explorer 8 及更早版本不支持该元素。 但是文章底部提供了兼容的解决方法。

 

兼容解决：

1、为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 

header, section, footer, aside, nav, article, figure{

    display: block;
}

 

2、使用HTML5 Shiv Javascript插件来解决IE的兼容问题，下载地址：https://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js

[if lt IE 9]>

　　<script src="html5shiv.js"></script>

<![endif]