注意: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. Consistent hashing

    Download source code - 20.3 KB What is libconhash libconhash is a consistent hashing library which c ...

  2. Keras网络层之卷积层

    卷积层 Cov1D层 keras.layers.convolutional.Conv1D(filters, kernel_size, strides=1, padding='valid', dilat ...

  3. Hibernate简单配置

    1.配置构建路径,加载用户库,hibernate4.3.8 MySQL-Driver 2.写User.java      纯POJO+持久化注解=PO @Entity @Table(name=&quo ...

  4. HDOJ 1257 最少拦截系统 【DP】

    HDOJ 1257 最少拦截系统 [DP] Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...

  5. netty应用

    http://www.blogjava.net/yongboy/archive/2013/05/13/399203.html http://shentar.me/tag/netty-2/ 代理 htt ...

  6. Http请求的TCP连接

    我们一直认为,HTTP连接分为长连接和短连接,而我们现在常用的都是HTTP1.1,因此我们用的都是长连接. 这句话其实只对了一半,我们现如今的HTTP协议,大部分都是1.1的,因此我们平时用的基本上都 ...

  7. jQuery 3D垂直多级菜单

    在线演示 本地下载

  8. Spring AOP(3)

  9. [国家集训队2011]happiness

    Description 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友 ...

  10. 【P2944】地震损失(最大流,洛谷)

    绝对难度虚高的一题 看到题目,至少损坏几个房子,开始考虑最小割,建的是双向边,所以拆点,边权除了自己与自己的之外都连inf.然后把所有求救的点都连到超级源上,跑一遍最大流就可以了. #include& ...