HTML5新增的主体结构元素

目录：

  1. article元素
  2. section元素
  3. nav元素
  4. aside元素
  5. time元素与微格式
  6. pubdate属性

1.article元素

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

  • article元素是可以嵌套使用的。
  • article元素可以用来表示插件。

代码片段：

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水香木鱼的博客</title>
</head>

<body>
    <article>
        <header>
            <h1>水香木鱼的博客</h1>
            <p>欢迎来到水香木鱼的博客</p>
        </header>
        <p>花开花落，只为今朝！</p>
        <footer>
            <p>这是底部导航</p>
        </footer>
    </article>

    <article>
        <h1>这是一个内嵌页面</h1>
        <object>
            <embed src="#" width="600px" height="400px"></embed>
        </object>
    </article>

    </ul>
</body>

</html>

效果演示：

2.section元素

　　section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容以及标题组成。但section元素并非一个普通的容器元素；

当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。

代码演示：

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水香木鱼的博客</title>
</head>

<body>
    <section>
        <h1>水香木鱼的博客</h1>
        <p>天空的云朵好美！</p>
    </section>

    <article>
        <h1>这个水香木鱼的博客</h1>
        <p>欢迎大家来到水香木鱼的博客</p>
        <section>
            <h1>你好，水香木鱼</h1>
            <p>好帅的神秘的男人</p>
        </section>
    </article>

    <section>
        <h1>水香木鱼就是帅</h1>
        <p>这个一个神秘的男人</p>
        <article>
            <h1>水香木鱼是个大帅哥</h1>
            <p>好帅</p>
        </article>
        <article>
            <h1>水香木鱼是个大帅哥</h1>
            <p>好帅</p>
        </article>
    </section>

</body>

</html>

效果演示：

3.nav元素

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

　　nav元素应用场景：

　　1.传统导航条

　　2.侧边栏导航

　　3.页内导航

　　4.翻页操作

代码演示：

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水香木鱼的博客</title>
</head>

<body>
    <nav>
        <ol>
            <li>
                <a href="https://www.cnblogs.com/chenchunbo/">博客园的主页</a>
            </li>
            <li>
                <a href="https://chenchunbo.blog.csdn.net">CSDN的主页</a>
            </li>
        </ol>
    </nav>
    <article>
        <h1>水香木鱼的博客</h1>
        <p>星火可以燎原，一粒沙可填满海洋</p>
        <section>
            <h1>HTML的发展史</h1>
            <p>我已经关注你啦</p>
        </section>
        <section>
            <h1>css的发展史</h1>
            <p>我已经关注你啦</p>
        </section>
        <section>
            <h1>你好，水香木鱼</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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水香木鱼的博客</title>
</head>

<body>
    <header>
        <h1>aside元素</h1>
    </header>
    <article>
        <h1>你好，水香木鱼</h1>
        <p>星火可以燎原，一粒沙可填满海洋</p>
        <aside>
            <h2>名词解释</h2>
            <p>XXX:这个是一个含金量很高的内容</p>
        </aside>

    </article>
    <aside>
        <nav>
            <h2>好好学习，天天向上</h2>
            <ol>
                <li>
                    <a href="#">未来属于你们</a>
                </li>
                <li>
                    <a href="#">2021-2-17</a>
                </li>
                <li>
                    <a href="#">大牛：真希望你们能好好学习一下</a>
                </li>
            </ol>
        </nav>
    </aside>
</body>

</html>

效果演示：

5.time元素

T表示time,Z表示标准时间，+表示对应的时间差加上。

代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水香木鱼的博客</title>
</head>

<body>
    <time datetime="2021-2-17">2021-2-17</time>
    <br/>
    <time datetime="2021-2-17T">2021-2-17</time>
    <br/>
    <time datetime="2021-2-17T20:00Z">2021-2-17</time>
    <br/>
    <time datetime="2021-2-17T20:00+9:00">2021-2-17</time>
    <br/>

</body>

</html>

效果演示：

6.pubdate属性

代码演示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>pubdate属性</title>
</head>

<body>
    <article>
        <header>
            <h1>水香木鱼的博客</h1>
            <p>发布日期
                <time datetime="2020-4-23" pubdate>2021-2-17</time>
            </p>
            <p>敲代码时间
                <time datetime="2020-4-25">2021-2-17</time>
            </p>
        </header>
    </article>

</body>

</html>

效果展示：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/chenchunbo/p/14408775.html