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. k8s默认存储动态挂载分配配置

    k8s默认存储动态挂载分配配置 k8s默认存储动态挂载分配配置 https://blog.csdn.net/BigData_Mining/article/details/96973871

  2. 在mac上进行JAVA开发

    一.  JDK 的下载与安装 终端输入java看看有没有安装java: 见到此弹窗,说明没有安装呀! 点击oracle官网链接: http://www.oracle.com/technetwork/j ...

  3. 题解【POJ2955】Brackets

    Description We give the following inductive definition of a "regular brackets" sequence: t ...

  4. Git - Windows 下, gitbash 打开资源管理器

    1. 概述 windows 下 gitbash 打开 资源管理器 2. 场景 资源管理唤起 gitbash 步骤 进入目录 鼠标右击 在 弹出菜单 中, 找到 Git Bash Here 结果 打开一 ...

  5. Go_type

    1. type的定义和使用 Go语言支持函数式编程,可以使用高阶编程语法.一个函数可以作为另一个函数的参数,也可以作为另一个函数的返回值,那么在定义这个高阶函数的时候,如果函数的类型比较复杂,我们可以 ...

  6. 在Linux系统下安装nginx教程

    最近学习了nginx,就打算nginx安装在Linux系统下,于是我就把安装步骤记录下来了,分享给大家,希望能对大家有帮助! 我的博客地址:https://www.cnblogs.com/themys ...

  7. Mysql与PostgreSql数据库学习笔记

    mysql 从最基础的数据引擎,到进程结构,都不能支持数据版本.导致其职能阻塞“并发”,不支持最基本的事务,innodb达不到基本事务要求,任何写数据,都导致整个表锁住.充其量只能算是一个玩具,或者说 ...

  8. sqlserver查询使用with(nolock)详解

    所有Select加 With (NoLock)解决阻塞死锁 在查询语句中使用 NOLOCK 和 READPAST 处理一个数据库死锁的异常时候,其中一个建议就是使用 NOLOCK 或者 READPAS ...

  9. 移动端 vue + mintUI 实现头部页签切换,按需加载~

    记录~记录~~有时候,我们会遇到一个页面有两个页签切换需求,但是为了避免同时加载两个页面,我们要做到的就是当前进入的是那个页面,就先加载哪一个页面,并且也不会造成浏览器地址的变化.一开始我使用的方法是 ...

  10. html学习-第一集(基本标签)

    什么是HTML html是一套规则,浏览器认识的规则 开发者怎么使用html 学习HTML语言 开发后台程序 写HTML文件 从数据库获取数据,然后替换到html中对应的位子(web框架) HTML文 ...