HTML5最显著的一个特征就是语义化，所以引入了很多语义化标签，深入理解并熟练运用这些语义化标签可以编写出更符合规范，用户体验更好的web页面。
上面这张图描绘了html5中一个语义比较好的界面的结构，本文将深入讲解article标签的使用。
article元素代表一个web页面中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报纸杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件，或者其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题，这个标题通常放在一个header元素里面，有时还有自己的脚注。
文章/论坛帖子使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>article_demo</title>
</head>
<body>
<article>
<header>
<h1>标题</h1>
<p>发布日期：<time pubdate="true">2020-03-09</time></p>
</header>
<p>此处是正文内容</p>
<footer>
<p><small>此处是脚注，例如：PM 小凯哥<xuxinkai.cn>版权所有</small></p>
</footer>
</article>
</body>
</html>页面呈现效果如下：
这个示例在header元素中嵌入文章的标题部分。在标题下部的p元素中，嵌入该文章的正文，在结尾处的footer元素中，嵌入文章的著作权作为脚注。整个示例的内容相对比较独立、完整，因此，对这部分内容使用article元素。
用户评论使用示例
下面的article元素嵌套使用，内层的内容在原则上需要与外层内容相关联。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>article_demo</title>
</head>
<body>
<article>
<header>
<h1>标题</h1>
<p>发布日期：<time pubdate="true">2020-03-09</time></p>
</header>
<p>此处是正文内容</p>
<section>
<h2>评论区</h2>
<article>
<header>
<h3>小凯哥1 ：</h3>
<p><time pubdate datetime="010-10-11T20:00">1小时前</time></p>
</header>
<p>评论正文</p>
</article>
<article>
<header>
<h3>小凯哥2 ：</h3>
<p><time pubdate datetime="010-10-11T20:00">1小时前</time></p>
</header>
<p>评论正文</p>
</article>
</section>
<footer>
<p><small>此处是脚注，例如：PM 小凯哥<xuxinkai.cn>版权所有</small></p>
</footer>
</article>
</body>
</html>效果如下：
这个demo比前面的demo更加完整，它添加了文章/帖子读者的评论内容，整体内容还是比较独立、完整的，因此对其使用article元素。该部分内容用section元素把正文与评论部分进行区分。在section元素中嵌入评论的内容，评论中有几个人的评论，每个人的评论部分相对来说又是比较独立、完整的，因此对它们都使用一个article元素，在评论的article元素中，又可以分为标题与评论内容部分，分别放在header元素与p元素中。
section元素是一个分块元素，用来对页面中的内容进行分块，后面会介绍。
用article元素表示独立插件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>article_demo</title>
</head>
<body>
<article>
<header>
<h1>视频播放器</h1>
</header>
<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
</article>
</body>
</html>用article元素来表示一个独立插件，使插件看起来像内嵌在页面中一样。
补充：time元素和pubdate属性
time元素代表某个具体的时刻或日期，表示时刻时允许带时差，它可以定义很多格式的时间，它有datetime属性和pubdate属性。
datetime属性中日期与时间之间需要用T分隔，T表示时间，如：
<time datetime="2020-03-09T20:00">生日是晚上八点</time>时间后面加上Z表使用UTC时间标准，如：
<time datetime="2020-03-09T20:00Z">生日是晚上八点</time>时间后面加上时差，表示另一地区时间，如果是编码本地时间，则不需要添加时差，如：
<time datetime="2020-03-09T20:00+09：00">生日是晚上八点</time>pubdate属性是可选属性,属性值为Boolean，它可以用到article元素中的time元素上，使time元素的时间代表（time元素的上一级article元素）当前文章/帖子/评论等发布日期。
留言