欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

HTML5中的article标签是什么？HTML5中的article元素用在什么地方？

程序员文章站 2022-03-18 22:09:59
...
HTML5中的article标签是什么？HTML5中的article元素用在什么地方？本篇文章主要为大家解释了什么是HTML5中的article标签，article用在什么地方，还有HTML5中article标签的标准属性有哪些。让我们一起来看看吧。（文末有元素有话说article标签的自我介绍）

HTML5中的article标签解释：

这个标签在HTML5中，意思应该是取代DIV结构的，它定义了一个大的外部框架，就像你我们经常定义的最外层的那对DIV意思一样，现在有了这些自己具有层级结构的不同标记了。

所以article的下面应该还包括很多其它标签。结合后实现分栏之类的设计，CSS也根据这个做了调整以便支持其样式的显示，同时JS也需要些变动，JQuery则依然活跃，并没有因为HTML5重复了其部分功能而被排挤掉

在HTML5中相对于以往版本的文档书写方面，追加了一些标签。如页眉、页脚、内容区等等的元素结构。其中在主体结构元素中增加了article及section元素。那么他们两个有什么区别呢，什么时候用article，什么是用section

想了解HTML5中的sention：HTML5中的section标签是什么？HTML5中的section标签怎么居中？

article元素代表了文档、页面或者是应用程序当中的独立完整可以被外部引用的内容，他可以以一篇文章、一篇帖子、一段评论或者是独立的插件形式出现。除了内容主题以外，一个article元素通常会有自己的标题及脚注。

HTML5中article标签的定义和用法：

<article> 标签定义外部的内容。

外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

有实例：

<article>
<a href="http://www.apple.com">Safari 5 released</a><br />
7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, 
Apple announced the release of Safari 5 for Windows and Mac......
</article>

article为可以嵌套的元素，原则上需article内层应与外层的内容相关联，例如一篇文章的正文及对正文的评论就可以同过article进行嵌套。

其中section将正文及评论进行了区分，他是一个分块区的元素，下一课会讲解到。article有很完整及独立的将评论的每一条都进行了分割。

article还能用来表示一个插件，下面是一个允许全屏的代码，他的作用就是让这个插件看上去像完全内嵌在网页里面一样。

HTML5中article标签的标准属性：

class, contenteditable, contextmenu, dir, draggable, id, irrelevant,

lang, ref, registrationmark, tabindex, template, title

这里使用article标签布局一篇实例，通过此示例掌握了解article元素标签。

完整HTML5实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>article 实例 ThinkCSS</title>
<style>
article{ color:#000}
article h1{ color:#F00}
</style>
</head>
<body>
<article>
    <h1>文章标题</h1>
    <p>文章段落一，内容CSS技术上ThinkCSS网 ...</p>
    <p>文章段落二，内容CSS技术上ThinkCSS网 ...</p>
    <p>段落三，内容CSS技术上ThinkCSS网 ...</p>
</article>
</body>
</html>

提示和注释：

注释：<article> 标签的内容独立于文档的其余部分。

【元素有话说】

article：

同志们好，我是article，是特殊的section，我比section具有更明确的语义，是一个独立的、完整的相关内容块的代表。一般来说， 我会有标题部分(通常包含在 header 内)，有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，我本身就是独立的、完整的，代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如：博客中的一篇文章，论坛中的一个帖子或者一段浏览者的评论等。因为article元素是一段独立的内容，所以article元素中，通常包含头部（header元素）、底部（footer元素）。

【相关推荐】

HTML5中web是什么？web存储中的元素有哪些？

HTML IMG标签的属性是有哪些？了解IMG标签的用法

以上就是HTML5中的article标签是什么？HTML5中的article元素用在什么地方？的详细内容，更多请关注其它相关文章！

相关标签： HTML5中的article标签含义 HTML5中的article标签的标准属性有哪些？

上一篇： ES6中类与对象的讲解与应用

下一篇： 总结JavaScript中的特效系列

推荐阅读