HTML5--新增结构元素(2)
前言：
HTML5中废除了一些结构元素同时也新增了一些结构元素，这节课主要学习新增的article、aside、nav、section、header、footer、address、hgroup等语义标签
IE浏览器对HTML5中语义化标签的支持：
兼容性：
1.IE9及以上选择性支持，IE8及以下完全不支持。
2.IE9中会将语义化标签转成行内元素。IE8无法识别新增的语义化标签，也就无法正确解析。
解决方法：
1.手动创建这些语义化标签，由于创建的标签默认是行内元素，设置style为display：block即可。(但是这种方式比较繁琐，不推荐)。
document.createElement("header")
document.createElement("article")
document.createElement("aside")
document.createElement("footer")
2.引入第三方插件(html5shiv.min.js)--- http://www.bootcdn.cn/html5shiv/
<script src="./html5shiv.min.js"></script>
这样在IE8及以下的版本，也可以正常显示这些语义化标签。
1.article元素
article：英文本意"文章"
使用场景：
article元素代表文档、页面或应用程序中独立的、完整的、可独自被外部引用的内容。可以是一片博客或报刊中的文章、论坛帖子、用户评论、独立的插件，或任何其他独立的内容。
article元素可以嵌套使用。
示例：article实例
<body> <article> <!-- 此处的article作为独立的内容 --> <header> <h1>卖程序猿的小火柴</h1> <p>hello，高价回收程序猿</p> </header> <article> <!-- 此处的article作为内嵌的内容 --> <header>一次报价</header> <p>$xxx第一次</p> <footer> 正在拍卖中 </footer> </article> <footer> <p>价格私聊</p> </footer> </article> <article> <!-- 此处的article可作为一个插件使用 --> <h1>这是一个内嵌页面</h1> <object> <embed src="#" width="600" height="400"> </object> </article> </body>
2.aside元素标签
aside：英文原意"在一旁、在旁边"
使用场景：
aside：表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，及其他类似有区别与主要内容的部分。
示例：aside实例
<body> <header> <h1>js入门</h1> </header> <article> <h1>语法</h1> <p>文章的正文......</p> <aside> <!-- 1、此处作为文章正文的解释 --> <h1>名词解释</h1> <p>语法：这是一个对语言来说很重要的内容体</p> </aside> </article> <aside> <!-- 2、此处作为区别主要内容的部分 --> <nav> <h2>评论</h2> <ul> <li><a href="#">2015-3-10</a></li> <li><a href="#">大牛：真希望能好好学一下</a></li> </ul> </nav> </aside> </body>
3.nav元素
nav：navigation的缩写，英文本意“航行、导航”
使用场景：
nav：可用作页面导航的连接组，其中导航元素链接到其他页面或当前页面其他部分。
具体场景：
传统导航、侧边栏导航、页内导航、翻页导航
示例：nav实例
<body> <nav> <!-- 1、作为传统导航 --> <ul> <li><a href="#">主页</a></li> <li><a href="#">开发文档</a></li> </ul> </nav> <article> <header> <h1>HTML5与CSS3的历史</h1> <nav> <!-- 2、作为页内导航 --> <ul> <li><a href="#">HTML5的历史</a></li> <li><a href="#">CSS3的历史</a></li> </ul> </nav> </header> <section> <h1>HTML5历史</h1> <p>......</p> </section> <section> <h1>CSS3的历史</h1> <p>......</p> </section> </article> </body>
4.section元素
section：英文原意"部分、切开"
使用场景：
section元素对网站或应用程序页面上的内容进行分块，通常由内容和其标题组成。
注意事项：
1.不要将section元素作为设置样式的页面容器
2.如果article元素、aside元素、nav元素更符合条件，不要使用section元素
3.没有标题内容 不要使用section元素
section和article区分：
1、section和article都表示页面上的独立区域
2、article更强调的是页面上独立的一块内容
3、section更强调的是将独立的内容分块
示例：section实例
<body> <section> <h1>苹果</h1> <p>这是一个水果，可以吃</p> </section> <article> <!-- 1.article表示页面上独立的区域 --> <h1>苹果</h1> <p>这是一个水果，可以吃</p> <section> <!-- 2.section更强调将内容进行分块 --> <h2>红富士</h2> <p>这是一种外表很红的苹果</p> </section> <section> <h2>国光</h2> <p>这是一种的苹果</p> </section> </article> </body>
5.header元素
header：英文原意"标头、头部"
使用场景：
header元素：是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可包含其他内容，例如数据表格、搜索表单或相关的logo图片。
示例：header实例
<body> <header> <!-- header中包含标题，logo或nav等其他元素 --> <h1>IT最新技术</h1> <a href="http://www.baidu.com">百度</a> <nav> <ul> <li><a href="#">学习</a></li> <li><a href="#">图片</a></li> <li><a href="#">网页</a></li> </ul> </nav> </header> </body>
6.footer元素
footer：英文本意"页脚、脚注"
使用场景：
footer元素：可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接、版权信息等
示例：footer实例
<body> <footer> <!-- 作为整个页面的脚注 --> <ul> <li><a href="#">版权信息</a></li> <li><a href="#">站点地图</a></li> <li><a href="#">联系方式</a></li> </ul> </footer> <article> <footer>这是一个文章的底部</footer> <!-- 作为article区块的脚注 --> </article> </body>
7.address元素
address：英文本意"地址、住址"
使用场景：
address元素：主要用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、网站链接、邮箱、地址、电话号码等。
示例：address实例
<body> <footer> <div> <address> <!-- 主要用来呈现联系信息 --> <a href="#">地址</a> <a href="#">联系方式</a> <a href="#">邮箱</a> </address> </div> </footer> </body>
8.hgroup元素
hgroup：是h*标题组
使用场景：
hgroup元素：将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组。
示例：hgroup实例
<body> <article> <header> <hgroup> <!-- 当文章除主标题外还有子标题时，需要使用hgroup对标题进行分组 --> <h1>这是文章标题</h1> <h2>这是文章子标题</h2> </hgroup> <p><time datetime="2015-10-10">2015-10-10</time></p> </header> <div>这是内容</div> <footer>这是底部</footer> </article> </body>
