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元素)当前文章/帖子/评论等发布日期。