HTML5新增的主体结构元素

最新推荐文章于 2022-07-03 15:35:16 发布

乞力马扎罗的雪CYF

最新推荐文章于 2022-07-03 15:35:16 发布

阅读量1.9k

点赞数 1

分类专栏： HTML5 文章标签： html5 主体结构元素

本文链接：https://blog.csdn.net/chenyufeng1991/article/details/48803001

版权

HTML5 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.article元素

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

article元素是可以嵌套使用的；

article元素用来表示插件；

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article元素</title>
</head>
<body>

    <article>
        <header>
            <h1>HTML5</h1>
            <p>欢迎学习HTML！</p>
        </header>

        <!--article是可以嵌套的-->
        <article>
            <header>开发者</header>
            <p>Web开发者</p>
            <footer>评论</footer>
        </article>

        <footer>
            <p>这是底部</p>
        </footer>
    </article>

    <!--article是可以内嵌的-->
    <article>
        <h1>这是一个内嵌页面</h1>
        <object>
            <embed src="#" width="600" height="400"></embed>
        </object>
    </article>

</body>
</html>

效果如下：

。

2.section元素

section元素对于网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而不是section。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>section元素</title>
</head>
<body>


<!--通常不推荐没有标题内容使用section元素-->
    <!--不要与article元素混淆-->
    <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和article的区别-->

    <section>
        <h1>有很多水果</h1>

        <article>
            <h2>苹果</h2>
            <p>介绍</p>
        </article>

        <article>
            <h2>香蕉</h2>
            <p>介绍</p>
        </article>

        <article>
            <h2>西瓜</h2>
            <p>介绍</p>
        </article>
    </section>

使用section注意事项：
1.不要将section元素作为设置样式的页面容器；
2.如果article元素，aside元素，nav元素更符合使用条件，那就不要使用section元素；
3.没有标题内容，不要使用section元素。

</body>
</html>

3.nav元素

nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。

nav元素应用场景：

（1）传统导航条；

（2）侧边栏导航；

（3）页内导航；

（4）翻页操作；

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nav元素</title>
</head>
<body>

<!--HTML5中不能使用menu元素代替nav元素-->
<nav>
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">开发文档</a></li>
    </ul>
</nav>

<article>
    <header>
        <h1>HTML5与JS的历史</h1>
        <nav>
            <ul><a href="#">HTML5的历史</a></ul>
            <ul><a href="#">JS的历史</a></ul>
        </nav>
    </header>

    <section>
        <h1>HTML5的历史</h1>
        <p>........</p>
    </section>

    <section>
        <h1>JS的历史</h1>
        <p>........</p>
    </section>

    <footer>
        <a href="#">删除</a>
        <a href="#">修改</a>
    </footer>
</article>

<footer>
    <p>
        <small>版权声明。。。</small>
    </p>
</footer>


</body>
</html>

4.aside元素

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

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aside元素</title>
</head>
<body>

    <header>
        <h1>HTML5入门</h1>
    </header>

    <article>
        <h1>语法</h1>
        <p>下面开始讲解。。。</p>
        <aside>
            <h1>名词解释</h1>
            <p>语法很重要</p>
        </aside>
    </article>


<aside>

    <nav>
        <h2>评论</h2>
        <ul>
            <li><a href="#">2015-9-29</a></li>
            <li><a href="#">第二。。</a></li>
        </ul>
    </nav>

</aside>

</body>
</html>

5.time元素与微格式

time元素示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <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元素示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pubdate属性</title>
</head>
<body>

    <article>
        <header>
            <h1>苹果</h1>
            <p>发布日期
                <time datetime="2015-10-10" pubdate="true">2015-10-10</time>
            </p>
        </header>
    </article>

</body>
</html>

github主页：https://github.com/chenyufeng1991 。欢迎大家访问！