目录：
- article元素
- section元素
- nav元素
- aside元素
- time元素与微格式
- 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>
效果展示：
