首页 » 编程语言 » html » 正文

HTML5标签:article元素的使用方法及作用

html元素<article>标签是html5新增标签,其用法和作用如下:

<article>标签定义

<article> 标签定义独立的内容。

<article> 标签是 HTML 5 中的新标签

<article> 标签代表一个在页面或网站中,可以独立自成一体的正文内容;比如,论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具;

浏览器支持情况

<article> 标签不被 IE8 以及更早的版本支持;

 <article> 标签已被IE9+, Firefox, Opera, Chrome 以及 Safari 支持。

<article>标签用法

<article> 标签属于双标签,必须有开始标签和结束标签。

1、简单用法

演示代码如下:

<article>
  <h1>刘代码博客</h1>
  <p> 
学习网络建站、web编程、前端开发等互联网技术的网站。
 </p>
</article>

2、经典用法

<article> 标签,通常还由标题、正文内容、页脚三部分组成,所以,article标签里面可包含独立的 header、footer 等结构化的标签,比如下面的代码:

<article>
<header>
<h1>头部</h1>
<p><time datetime="2019-12-17">1 hours ago</time></p>
</header>
<p>主体内容</p>
<footer>
<p>尾部</p>
</footer>
</article>

上述代码通过一个article标签,定义了一个完整文章,该文章由三部分组成,分别是头部、主体内容和尾部。头部和尾部则通过独立的 header、footer 结构化元素来定义,使文章的结构十分清晰。

3、列表用法

一个网页文档页面也可以有多个 article元素(也可以没有),如博客的首页列表和分类列表等页面通常包括多篇文章列表,每篇文章就可以是一个 article元素表示,多篇就有多个article元素。

4、嵌套用法

可以将一个 article标签嵌套在另一个 article标签中,主要内层的 article标签与外层 article标签是部分与整体的关系。且整体和部分内容是有关联的,可能是文章的标题、评论,或该该文章有关联的其他内容。



欢迎您发表评论或留言