热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

HTML5中的article标签是什么?HTML5中的article元素用在什么地方?本篇文章主要为大家解释了什么是HTML5中的article标签,article用在什么地方,还有HTML5中article标签的标准属性有哪些。让我们一起来看看吧。(文末有元素有话说article标签的自我介绍)
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标签的定义和用法:

标签定义外部的内容。

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

有实例:

Safari 5 released
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进行嵌套。

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

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

HTML5中article标签的标准属性:

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

lang, ref, registrationmark, tabindex, template, title

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

完整HTML5实例代码:








文章标题

文章段落一,内容CSS技术上ThinkCSS网 ...

文章段落二,内容CSS技术上ThinkCSS网 ...

段落三,内容CSS技术上ThinkCSS网 ...

提示和注释:

注释:

标签的内容独立于文档的其余部分。

【元素有话说】

article:

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


推荐阅读
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • ED Tree HDU4812 点分治+逆元
    这道题非常巧妙!!!我们进行点分治的时候,算出当前子节点的所有子树中的节点,到当前节点节点的儿子节点的距离,如下图意思就是当前节点的红色节点,我们要求出红色节点的儿子节点绿色节点, ... [详细]
  • 本文介绍了用户界面(User Interface, UI)的基本概念,以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件,以及它与其他UI控件和业务逻辑的关系。 ... [详细]
  • 本文探讨了线性表中元素的删除方法,包括顺序表和链表的不同实现策略,以及这些策略在实际应用中的性能分析。 ... [详细]
  • 实现Win10与Linux服务器的SSH无密码登录
    本文介绍了如何在Windows 10环境下使用Git工具,通过配置SSH密钥对,实现与Linux服务器的无密码登录。主要步骤包括生成本地公钥、上传至服务器以及配置服务器端的信任关系。 ... [详细]
  • 本文由chszs撰写,详细介绍了Apache Mina框架的核心开发流程及自定义协议处理方法。文章涵盖从创建IoService实例到协议编解码的具体步骤,适合希望深入了解Mina框架应用的开发者。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • 本文介绍了如何利用jQuery实现对网页上多个div元素的显示与隐藏控制,包括基本的toggle方法及更复杂的显示隐藏逻辑。 ... [详细]
  • 本文详细介绍了JQuery Mobile框架中特有的事件和方法,帮助开发者更好地理解和应用这些特性,提升移动Web开发的效率。 ... [详细]
  • 本文详细介绍了如何利用 Bootstrap Table 实现数据展示与操作,包括数据加载、表格配置及前后端交互等关键步骤。 ... [详细]
  • Bootstrap 的轮播图(Carousel)组件提供了一种简单而灵活的方法,用于在网站上实现响应式幻灯片效果。此组件不仅支持图片展示,还兼容嵌入式框架、视频等多媒体内容。 ... [详细]
author-avatar
mobiledu2402851373
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有