HTML5 header 标签-W3CAPI 在线教程

HTML5 语义元素标签简介

什么是HTML5 语义元素标签？

概念：语义等于意义，语义元素等于有意义的元素标签；一个语义元素标签在浏览器和开发者看来能够清楚的描述其自身功能含义的，比如：<form>, <table> 和 <img> 这些标签从字面上看来就清楚的定义了它们的功能含义，像<div> 和 <span> 这些标签我们从字面上不能了解它们所包含的内容类型的称之为无语义元素标签，它们可以包含多种内容类型。

为什么需要HTML5 语义元素标签？

见名知意对于我们开发者来说是非常有用的，我们在开发中不管是定义变量也好还是管理源代码也好，给它们赋予一个有意义的名称，能让别人一目了然是很重要的；如果一个项目中所有的命名都是非常杂乱无章，对于任何一个接手人或者读者来说都是一个灾难；HTML中对于元素标签的命名也是非常科学的设计，让我们学习和使用起来都是非常顺手和自然的；HTML5给我们带来了更多这种自身存在语义的元素标签。

HTML5中新的语义元素

许多现有网站都包含以下HTML代码： <div id="nav">，<div class="header"> 或者 <div id="footer">，来指明导航链接，头部，以及尾部，让页面源代码的更好的结构化，以便于日后的维护和升级；HTML5 给我们提供了新的语义元素可以更方便的明确一个Web页面的不同部分：

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

HTML5 语义元素标签浏览器支持及兼容

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 都支持语义元素。
Internet Explorer 8 及更早版本不支持该元素。请使用如下兼容方式。

IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements
我们可以使用 HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：https://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js

下载后，将以下代码放入到网页中：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head> 元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素

针对于一些含有语义的块元素（header、section、footer、aside、nav、article、figure），为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素)：
```
header, section, footer, aside, nav, article, figure { 
    display: block; 
}
```

HTML5 section 标签

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
根据W3C HTML5文档：section 包含了一组内容及其标题。

<section>
    <h1>WWF</h1>
    <p>世界自然基金会(wwf)是一个致力于环境保护、研究和恢复的国际组织，前身为世界野生动物基金会。 世界自然基金会成立于1961年。</p>
</section>

<section>
    <h1>WWF's Panda symbol</h1>
    <p>熊猫已经成为世界自然基金会的象征。 世界自然基金会著名的大熊猫标志源自一只名叫“驰驰”的大熊猫，它在世界自然基金会成立的同一年从北京动物园转移到伦敦动物园。</p>
</section>

执行一下

HTML5 article 标签

<article> 标签定义独立的内容块，一般一个article标签包含多个section标签，表示一个页面中的主体内容块；一个页面也可以定义多个article内容块，表示多个独立的内容块。
<article> 元素使用实例:
- 论坛贴吧（Forum post ）
- 博客（Blog post）
- 媒体新闻（News story）
- 备注解释（Comment）

<article>
    <section>
        <h1>我是section标签标题1</h1>
        <p>我是section标签标题1的内容</p>
    </section>

    <section>
        <h1>我是section标签标题2</h1>
        <p>我是section标签标题2的内容</p>
    </section>
</article>

执行一下

HTML5 nav 标签

<nav> 标签定义导航链接的部分。
<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中。

<nav>
    <a href="http://m.w3capi.com">W3CAPI 在线教程 手机版</a> |
    <a href="http://www.w3capi.com">W3CAPI 在线教程 电脑PC版</a> |
    <a href="/doc/document/id/5.html">W3CAPI HTML 教程</a> |
    <a href="/doc/document/id/21.html">W3CAPI PHP 教程</a>
</nav>

执行一下

HTML5 aside 标签

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。
aside 标签的内容应与主区域的内容相关

<article style="border: 1px solid #ddd; padding: 5px;">
    <section>
        <h1>我是主标题</h1>
        <p>
            我是主内容<br/>
            我是主内容<br/>
            我是主内容<br/>
            我是主内容<br/>
        </p>
    </section>
</article>

<aside style="position:absolute;right: 10px;top:10px; border: 1px solid #ddd; padding: 5px;">
    <h4>我是页面推荐内容标题</h4>
    <p>我是页面推荐内容主体</p>
</aside>

执行一下