HTML5学习笔记3

1、新增的主体结构元素

　　article元素：代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。

<article>
    <header>
        <h1>苹果</h1>
        <p>发表日期：<time pubdate="pubdate">2010/10/09</time></p>
    </header>
    <p><b>苹果</b>,植物类水果，多次花果...（“苹果”文章正文）</p>
    <footer>
        <p><small>著作权归***公司所有。</small></p>
    </footer>
</article>

　　article可以嵌套使用

<article>
    <header>
        <h1>苹果</h1>
        <p>发表日期：<time pubdate="pubdate">2010/10/09</time></p>
    </header>
    <p><b>苹果</b>,植物类水果，多次花果...（“苹果”文章正文）</p>
    <section>
        <h2>评论</h2>
        <article>
            <header>
                <h3>发布者：陆凌牛</h3>
                <p>
                    <time pubdate datetime="2010-10-10T19:10-08:00">
                        1小时前
                    </time>
                </p>
            </header>
            <p>我喜欢苹果，我最喜爱的品种是红富士。</p>
        </article>
        <article>
            <header>
                <h3>发布者：章鱼</h3>
                <p>
                    <time pubdate datetime="2010-10-10T19:15-08:00">
                        1小时前
                    </time>
                </p>
            </header>
            <p>苹果？我不喜欢，我喜欢吃橘子。</p>
        </article>
    </section>
</article>

 

　　article可以表示插件

<article>
    <h1>My Fruit Spinner</h1>
    <object>
        <param name="allowFullScreen" value="true">
        <embed src="#" width="600" height="395"></embed>
    </object>
</article>

 

　　

　　section元素：用于对网站或应用程序中页面上的内容进行分块。不推荐为没有标题的内容使用section元素。

<article>
    <h1>苹果</h1>
    <p><b>苹果</b>,植物类水果，多次花果...</p>
    <section>
    <h2>红富士</h2>
    <p>红富士是从普通富士的芽变种选育出的着色系富的统称...</p>
    </section>
    <section>
        <h2>国光</h2>
        <p>国光苹果品，又名小国光、万寿。原产美国，1600年发现的偶然实生苗...</p>
    </section>
</article>

 

　　nav元素：可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。

 

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>

</head>
<body>
<h1>技术资料</h1>
<nav>
    <ul>
        <li><a href="/">主页</a></li>
        <li><a href="/events">开发文档</a></li>
        ...more...
    </ul>
</nav>
<article>
    <header>
        <h1>HTML 5与CSS 3的历史</h1>
        <nav>
            <ul>
                <li><a href="#HTML 5">HTML 5的历史</a></li>
                <li><a href="#CSS 3">CSS 3的历史</a></li>
                ...more...
            </ul>
        </nav>
    </header>
    <section id="HYML 5">
        <h1>HTML　5的历史</h1>
        <p>讲述HTML 5的历史的正文</p>
    </section>
    <section>
        <h1>CSS 3的历史</h1>
        <p>讲述CSS 3的历史的正文</p>
        ...more...
    </section>
    <footer>
        <p>
            <a href="">编辑</a>
            <a href="">删除</a>
            <a href="">重命名</a>
        </p>
    </footer>
</article>
<footer>
    <p><small>版权所有：路与湖</small></p>
</footer>
</body>
</html>

 

posted @ 2015-12-08 20:52  dddw  阅读(186)  评论(0)  编辑  收藏  举报