重学前端:深入理解article标签

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>

页面呈现效果如下:

article元素demo效果

这个示例在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>

效果如下:

article元素嵌套示例

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

© 版权声明
THE END
请我喝怡宝
点赞0
分享
评论 抢沙发