• 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>
  • 相关阅读:
    ubuntu(linux)虚拟主机部署桌面,使用window链接
    扫描shader
    Android Studio快捷键
    eclipse取消空格、等号、分号自动录入
    Libgdx学习记录28——创建Desktop程序
    设计模式19——代理模式
    设计模式18——模板方法
    设计模式17——解释器模式
    设计模式16——工厂模式
    设计模式15——外观模式
  • 原文地址:https://www.cnblogs.com/wddx/p/5030960.html
Copyright © 2020-2023  润新知