HTML5新增的主体结构元素

最新推荐文章于 2022-03-30 18:44:33 发布

China_chen_p_l

最新推荐文章于 2022-03-30 18:44:33 发布

阅读量438

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/china_chen_p_l/article/details/78902421

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML5新增的主体结构元素

aside元素

<body>
    <header>
        <h1>js入门</h1>
    </header>
    <!--在article内引用的-->
    <article>
        <h1>语法</h1>
        <p>文章的正文..</p>
        <aside>
            <h1>名词解释</h1>
            <p>语法： 这是一个对语言来说很重要的内容体</p>
        </aside>
    </article>

    <!--在article外-->
    <aside>
        <nav>
            <h2>评论</h2>
            <ul>
                <li><a href="#">2015-3-10</a></li>
                <li><a href="#">
                    大牛： 真希望能好好学一下
                </a></li>
            </ul>
        </nav>
    </aside>
</body>

pubdate属性

<body>
<!--这是一个可选的,boolean值属性，它可以用到article元素中的time元素上，意思是time元素代表了文章（article元素的内容）或者整个网页的发布日期-->
    <article>
        <header>
            <h1>苹果</h1>
            <p>发布日期
                <time datatime="2017-12-2" pubdate>2017-12-2</time>
            </p>
            <p>舞会时间
                <time datatime="2017-2-12">2017-2-12</time>
            </p>

        </header>
    </article>
</body>

section元素

<body>
    <!--1. 不要将section元素作为设置样式的页面容器-->
    <!--2. 如果article元素、aside元素、nav元素更符合使用条件，那不要使用section元素-->
    <!--3. 没有标题内容不要使用section元素-->
    <!--通常不推荐没有标题内容使用section元素-->
    <section>
        <h1>苹果</h1>
        <p>这是一个水果</p>
    </section>

    <article>
        <h1>苹果</h1>
        <p>这是一个水果</p>
        <section>
            <h2>红富士</h2>
            <p>这是苹果的一个品种</p>
        </section>
        <section>
            <h2>国光</h2>
            <p>这是苹果的一个品种</p>
        </section>
    </article>

    <!--secton强调分段或分块，但acticle强调独立性-->
    <section>
        <h1>水果</h1>
        <article>
            <h2>苹果</h2>
            <p>内容</p>
        </article>
        <article>
            <h2>苹果</h2>
            <p>内容</p>
        </article>
        <article>
            <h2>苹果</h2>
            <p>内容</p>
        </article>
    </section>
</body>

nav元素

<body>
<!--标签定义导航链接的部分。-->
<!--html5中不能使用menu元素代替nav元素-->
    <nav>
        <ul>
            <li><a href="#">主页</a></li>
            <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>

article元素

<body>
<!--<article> 标签规定独立的自包含内容。-->
    <!--一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。-->
    <!--<article> 元素的潜在来源：-->
        <!--论坛帖子-->
        <!--报纸文章-->
        <!--博客条目-->
        <!--用户评论-->
    <article>
        <header>
            <h1>广州大学华软软件学院</h1>
            <p>广州大学华软软件学院</p>
        </header>
        <p>Hello</p>
        <footer>
            <p>这是底部</p>
        </footer>
    </article>

    article可以作为插件内嵌页面
    <article>
        <h1>这是一个内嵌页面</h1>
        <object>
            <embed src="#" width="600" height="400"/>
        </object>
    </article>
</body>

time

<body>
<!--<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。-->
<!--该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。-->
    <!--time元素代表24小时中的某个时刻和某个日期，表示时刻时允许带时差，它可以定义很多格式的时间-->



    <time datatime="2015-10-10">2015-10-10</time>
    <!--datetime属性中日期与时间之间需要用T文字分隔，T表示时间；<time datetime="2010-11-13T20:00">我生日是晚上八点</time>-->
    <time datatime="2015-10-11T20:00">2015-10-11</time>
    <!--时间加上Z文字表示给机器编码时使用UTC时间标准；<time datetime="2010-11-13T20:00Z">我生日是晚上八点</time>-->
    <time datatime="2015-10-11T20:00Z">2015-10-11</time>
    <!--加上时差，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差<time datetime="2010-11-13T20:00+09：00">我生日是晚上八点</time>-->
    <time datatime="2015-10-11T20:00Z+09：00">2015-10-11</time>
</body>