注意:body、section、nav 需要h1-h6.

   div、header则不需要。

1):<article> 显示一个独立的文章内容。

例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等。artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。

例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中。

<article>
<h1>文章标题</h1>
这是一篇文章
<article>评论1...</article>
<article>评论2...</article>
</article>

2):<section> 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。必须包含有h1-h5.

实例:

<section>
<h1>章节一</h1>
<p>详细内容...</p>
</section>

3):<aside> 用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。

4):<hgroup> 用于对网页或区段的标题元素(h1-h6)进行组合。

例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。

<hgroup>
<h1>标题1</h1>
<h2>标题2</h2>
</hgroup>

5):<header> 定义文档的页面组合,通常是一些引导和导航信息。

6):<footer> 定义 section 或 document 的页脚。

  在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

实例:

<footer> © 2012 Baidu 使用百度前必读 京ICP证030173号 </footer>

7):<nav> 导航链接放在nav标签里。

nav标签里应该放入一些当前页面的主要导航链接。

例如在页脚显示一个站点的导航链接(如首页,服务信息页面,版权信息页面等等),就可以使用nav标签,当然,这不是必须的。

8):<time> 定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码,搜索引擎也能够生成更智能的搜索结果

9):<mark>定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

10):<figure>规定独立的流内容(图像、图表、照片、代码等等)。

figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

11):<figcaption> 定义 figure 元素的标题(caption)。

"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

实例:

<figure> <figcaption>美女图片</figcaption>
<img src="meizi.jpg" width="350" height="234" />
</figure>

html5新增语义化标签的更多相关文章

  1. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  2. html5手册语义化标签

    html5手册语义化标签: article section aside hgroup header footer nav time mark figure figcaption contextmenu ...

  3. HTML5之语义化标签

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  4. HTML5 部分新增语义化标签元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. H5新增语义化标签

    一.根据页面的结构,由div派生的标签. <header> <footer> <nav> 导航 在H4中导航栏一般用ul-li标签,H5中可以直接用<nav& ...

  6. 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. Html5新增的语义化标签(部分)

    2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...

  8. html5新增的语义化标签极其作用

    在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...

  9. html5 新增语义标签

    一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...

随机推荐

  1. 使用 Python 编写 vim 插件

    使用 Python 编写 vim 插件 - 技术翻译 - 开源中国社区 code {margin: 0;padding: 0;white-space: pre;border: none;backgro ...

  2. DotNetBar.Bar图标列表的使用

    DotNetBar.Bar图标列表的使用 老帅 控件DevComponents.DotNetBar.Bar怎样使用图像列表呢?比方给工具条或者菜单加上图标.例如以下几步就可以! 方法1: 1.放一个S ...

  3. weal woe

    He is worth no weal that can bide no woe. 禁不起吃苦的人不配得到幸福 有句谚语叫No weal without woe 福兮祸所伏 ; 祸兮福所倚 weal和 ...

  4. java内存相关

    (类是对象的抽象,而对象是类的具体实例.类是抽象的,不占用内存,而对象是具体的,占用存储空间.) 1.java是如何管理内存的 java的内存管理就是对象的分配和释放问题.(其中包括两部分) 分配:内 ...

  5. HDU1158:Employment Planning(线性dp)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1158 这题又是看了题解,题意是一项工作需要n个月完成,雇佣一个人需要m1的钱,一个人的月工资为sa,辞退一 ...

  6. HTTP状态码集

    1xx消息 这一类型的状态码,代表请求已被接受,需要继续处理.这类响应是临时响应,只包含状态行和某些可选的响应头信息,并以空行结束.由于HTTP/1.0协议中没有定义任何1xx状态码,所以除非在某些试 ...

  7. Django——请求生命周期

    视图层之视图函数(views) 一个视图函数,简称视图,他可以接受Web请求,并且必须返回一个Web响应,响应内容可以是一个HTML内容,一张图片,一个404错误,一个文档等等,都可以称为web为你响 ...

  8. go——方法

    方法是与对象实例绑定的特殊函数.方法是面向对象编程的基本概念,用于维护和展示对象的自身状态.对象是内敛的,每个实例都有各自不同的独立特征,以属性和方法来暴露对外通信接口.普通函数则专注于算法流程,通过 ...

  9. List集合的ForEach扩展

           public static void ForEach<T>(this IEnumerable<T> enumerableSource, Action<T&g ...

  10. JAVA寄存器

    所有进程都使用寄存器,Java虚拟机使用下列寄存器管理系统堆栈:    程序记数寄存器:跟踪程序执行的准确位置    堆栈指针寄存器:指示操作栈项    框架寄存器:指向当前执行的环境    变量寄存 ...