[笔记]HTML5 新增的主体结构元素

桩白墨
前端笔记
2016-04-03
185热度
0评论

导航

想了解一下前端，以前没有深入研究过，一点一点学吧。

详见极客学院：http://www.jikexueyuan.com/course/733.html

在 HTML5 中，为了使文档的结构更加清晰明确，追加了几个与页眉、页脚、内容区块等文档结构相关联的元素。本文主要介绍 article 元素、section 元素、nav 元素、aside 元素、time 元素和 pubdate 属性。

一、article 元素

article 元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章，一篇论坛帖子，一段用户评论或独立的插件，或其他任何独立的内容。
article 元素可以嵌套使用。
article 元素可以表示插件。

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>article 元素</title>
</head>
<body>
    <article>
        <header>
            <h1>桩白墨的博客</h1>
            <p>欢迎来到桩白墨的博客</p>
        </header>
        <article>
            <header>
                作者
            </header>
            <p>评论</p>
            <footer>
                time
            </footer>
        </article>
        <footer>
            <p>这是底部</p>
        </footer>
    </article>
    <article>
        <h1>这是一个内嵌页面</h1>
        <object>
            <embed src="#" width="600" height="400"/>
        </object>
    </article>
</body>
</html>

二、section 元素

section 元素用于对网站或应用程序中页面上的内容进行分块。一个 section 元素通常由内容及其标题组成。
不要将 section 元素作为设置样式的页面容器（那是 div 的工作）。
如果 article 元素、aside 元素、nav 元素更符合使用条件，不要使用 section 元素。
如果没有标题内容，不要使用 section 元素。

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>section 元素</title>
</head>
<body>
    <section>
        <h1>苹果</h1>
        <p>这是一个水果，可以吃。而且很好吃。</p>
    </section>

    <article>
        <h1>苹果</h1>
        <p>这是一个水果，可以吃。而且很好吃。</p>
        <section>
            <h2>红富士</h2>
            <p>这是一种外表很红的苹果，吃起来也不错。</p>
        </section>
        <section>
            <h2>国光</h2>
            <p>这是一种外表很红的苹果，吃起来也不错。</p>
        </section>
    </article>

    <section>
        <h1>水果</h1>
        <article>
            <h2>pingguo</h2>
            <p>内容</p>
        </article>
        <article>
            <h2>pingguo</h2>
            <p>内容</p>
        </article>
        <article>
            <h2>pingguo</h2>
            <p>内容</p>
        </article>
    </section>
</body>
</html>

三、nav 元素

nav 元素是一个可用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进 nav 元素，只需要将主要的、基本的连接组放入 nav 元素即可。
nav 元素应用场景：
- 传统导航条
- 侧边栏导航
- 页內导航
- 翻页操作
HTML5 中不能使用 menu 元素代替 nav 元素。menu 元素一般用在 web 应用程序中。

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>nav 元素</title>
</head>
<body>
<nav>
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">开发文档</a></li>
    </ul>
</nav>
<article>
    <header>
        <h1>HTML5 与 CSS3 的历史</h1>
        <nav>
            <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>
    <footer>
        <a href="#">删除</a>
        <a href="#">修改</a>
    </footer>
</article>
<footer>
    <p><small>版权声明：</small></p>
</footer>
</body>
</html>

四、aside 元素

aside 元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>aside 元素</title>
</head>
<body>
    <header>
        <h1>js 入门</h1>
    </header>
<article>
    <h1>语法</h1>
    <p>文章的正文。。。。。。</p>
    <aside>
        <h1>名词解释</h1>
        <p>语法：这是一个对语言来说很重要的内容体</p>
    </aside>
</article>
<aside>
    <nav>
        <h2>评论</h2>
        <ul>
            <li><a href="#">2015-3-10</a></li>
            <li><a href="#">大牛：真希望能好好学一下</a></li>
        </ul>
    </nav>
</aside>
</body>
</html>

五、time 元素和 pubdate 属性

time 元素

time 元素代表某个日期或 24 小时中的某个时刻
明确、无歧义地对机器码时间进行编码
易读

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>time 元素</title>
</head>
<body>
    <time datetime="2015-10-10">2015-10-10</time>
    <time datetime="2015-10-10T20:00">2015-10-10</time>
    <time datetime="2015-10-10T20:00Z">2015-10-10</time>
    <time datetime="2015-10-10T20:00+09:00">2015-10-10</time>
</body>
</html>

pubdate 属性

可选的，布尔类型的属性。可用在 article 元素中的 time 元素上，意思是 time 元素代表了文章或整个网页的发布日期。

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>pubdate 属性</title>
</head>
<body>
    <article>
        <header>
            <h1>苹果</h1>
            <p>发布日期
            <time datetime="2015-10-10" pubdate="pubdate">2015-10-10</time>
            </p>
            <p>舞会时间
            <time datetime="2015-10-12">2015-10-12</time>
            </p>
        </header>
    </article>
</body>
</html>