article元素

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。

它可以使一篇博客或者报刊中的文章,一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。

article元素是可以嵌套使用的。(内层的article原则上要与外层的article内容相关联)

article元素可以用来表示插件。(使插件看起来像是页面中一样)

举个例子:

<article>
<header>
<h1>标题</h1>
<p>这是头部</p>
</header>
<p>Hello</p>
<footer>
<p>这是底部</p>
</footer>
</article>

aside元素

aside元素用来表示当前页面或文章的附属信息部分,它可以包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别于主要内容的部分。

  1. 包含在article中,作为主要部分的附属信息

nav元素

nav元素是一个可以用作页面导航的连接组,其中的导航元素链接到其他页面或当前页面的其他部分。

并不是所有的连接组都要被放进nav元素,只需要将主要的、基本的连接组放进nav元素即可。

nav的应用场景:

  • 传统导航条
  • 侧边栏导航
  • 页内导航
  • 翻页操作

section元素

section元素用于对网站或应用程序中页面上的内容进行分块。

一个section元素通常由内容及其标题组成。

但section元素并非一个普通的容器元素;当一个容器需要被指定定义样式或通过脚本定义行为时,推荐使用div而非section元素。

通常不推荐内有标题内容使用section元素

不要与article元素混淆

HTML5中新增的主体结构元素的更多相关文章

  1. html5中新增非主体结构元素

    1.header元素 定义HTML文档的页眉,是一种具有引导和导航作用的结构元素 <header> <h1>header元素</h1> <nav> &l ...

  2. HTML5的结构学习(1) --- 新增的主体结构元素

      1.article 元素 解释:代表文档.页面和应用程序中独立的.完整的.可以被独自引用的内容. 主要用途:博客中的文章.评论,贴吧中的帖子,或者独立的插件等. article中可以包含多种元素例 ...

  3. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  4. html5中的fieldset/legend元素和keygen元素

    html5中的fieldset/legend元素和keygen元素 一.总结 一句话总结: fieldset/legend元素和figure和figcaption很像,只不过是作用于表单,前者表示内容 ...

  5. HTML5中新的结构元素

    HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...

  6. html5中不再支持的元素

    html5中不再支持的元素:1.acronym(建议abbr) : 定义首字母缩写2.applet(建议object): 定义 applet3.basefont(使用css控制)4.big(使用css ...

  7. html5中新增的非主体结构的元素

    html5中出了新增了article.section.nav.aside.time主要结构元素外,还增加了一些表示逻辑结构或附加信息的非主体结构元素. 一.header元素 header元素是一种具有 ...

  8. html5新增的主体结构元素

    1.  article 主体结构元素 通常是一篇文章.一个页面.一个独立完整的内容模块一般会带个标题,并放在 header 标签中,article 元素可以互相嵌套,使用频率极高,强调独立性,多注意下 ...

  9. html5中新增的元素和废除的元素

    一.新增的结构元素 1.section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.它可以与h1.h2.h3.h4.h5.h6等元素结合起来使用,标示文档结构. h5中的代码事 ...

随机推荐

  1. 吴裕雄 python 机器学习——数据预处理过滤式特征选取VarianceThreshold模型

    from sklearn.feature_selection import VarianceThreshold #数据预处理过滤式特征选取VarianceThreshold模型 def test_Va ...

  2. C9300升级-USB

    1.show ver查看设备的版本 2.一些版本信息的参考 3.准备USB查看其具备的镜像命令:dir usbflash0: 4.复制镜像到设备命令:copy usbflash0:cat9k_iosx ...

  3. 【PAT甲级】1105 Spiral Matrix (25分)

    题意:输入一个正整数N(实则<=1e5),接着输入一行N个正整数(<=1e4).降序输出螺旋矩阵. trick: 测试点1,3运行超时原因:直接用sqrt(N)来表示矩阵的宽会在N是素数时 ...

  4. HTML5学习(7)多媒体元素

    视频元素video <video src="./media/xxx.mp4" controls autoplay muted loop></video> 音 ...

  5. PHP中使用CURL实现Get和Post请求方法

    1.cURL介绍 cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL的一些高级特性, ...

  6. Spring Boot高频面试题:Spring Boot执行原理

    之前一篇文章Spring Boot快速入门文章中,我们已经体会到Spring Boot的神器,不再像之前Spring那样需要繁琐的XML,甚至几秒钟就能搭建出Spring的项目骨架.接下来我们简单分析 ...

  7. 6_8 树(UVa548)<从中序和后序恢复二叉树>

    你的任务是找出一棵二叉树中最小路径上终端节点(树叶,leaf node)的值.所谓路径乃指从根节点(root)旅行到任一终端节点.路径的值为所经过的节点的值的和(包含根节点及终端节点).而最小路径就是 ...

  8. 6_3 矩阵链乘(UVa424)<用栈实现简单的表达式解析>

    假设你必须做A*B*C*D*E的运算,在这里A,B,C,D,E都是矩阵(matrix).由于矩阵相乘具有连接性(associative),所以相乘的顺序可以是任意的.然而所需要的基本乘法数却与不尽相同 ...

  9. jmeter循环读取数据库中的数据

    1,添加一个jdbc请求 2,添加一个循环控制器,循环的次数为sql返回的记录数${var_#} 3,添加一个计数器(用来做变量拼接) 4,拼接变量,往目标接口发请求 最后脚本的构造如下:

  10. lambda表达式在解决java后台分组排序时的应用

    需求:按照起始日期查询出数据库里一段连续日期的住院信息. 问题:数据库里的住院信息可能不是完整的,也就是在给出的日期区间里只有若干天的数据,缺少某些日期的数据. 解决: 1.需要我们先按日期分组查出数 ...