HTML5元素

在HTML5中添加了很多新的标记元素，根据内容类型的不同，这些元素分为7大类：

内容类型	说明
内嵌	在文档中添加其他类型的内容， 如audio、video、canvas和iframe等
流	在文档和应用的body中使用的元素，如 form、h1和small等
标题	段落标题，如h1、h2、和hgroup等
交互	与用户交互的内容，如音频和视频控件、 button和textarea
元数据	通常出现在页面的head中，设置页面其它 部分的表现和行为，如script、style和title
短语	文本和文本标记元素，如mark、kbd、sub和sup等

 

 

1.新增的结构元素

 

元素名称	说明
header	标记头部区域的内容 （用于整个页面或页面中的一个区块） 具有引导和导航作用的结构元素。 header元素通常包含h1-h6,也可以包含hgroup、table、form、nav等元素
footer	标记脚部区域的内容 （用于整个页面或页面中的一个区块）
section	Web页面中的一区块域 一个主体性的内容分组，通常包含一个头部(header),还可能会有一个尾部。div元素也可以也可以用来对页面进行分区，当一个容器需要被直接定义样式或通过脚本定义行为时推荐使用div。
article	表示文档、页面中独立的、完整的文章内容块。 也就是说可以被独立的发布或重新使用。 如一篇博客、一篇论坛帖子、一段用户评论、报刊中的文章或独立的插件。 article通常有自己的标题，一般放在header元素里面，有时还有自己的页脚。 当article元素嵌套使用的时候，内部article元素内容必须与外部article元素内容相关。 article元素支持HTML5全局属性。
aside	相关内容或引文 包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充。 如侧边栏、广告、导航条以及其他类似有别于主要内容的部分。
nav	设置导航区域

 

提示：div元素关注结构的独立性，而section元素关注内容的独立性，section元素包含的内容可以单独存储到数据库或输出到Word文档中。

 

article与section的区别：

 

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

 

section元素用于对网站或者应用程序中页面上的内容进行分块。通常用section元素为哪些有标题的内容进行分段。

 

现在div的用处就是用来布局网页，划分大的区域，而HTML5新增加的结构元素则对div划分的大块进行功能内容块划分。

 

因此，在使用section元素时应该注意以下几个问题：

 

1.不要讲section元素当做设置样式的页面容器，对于此类操作应该使用div元素实现。

 

2.如果article 元素、aside元素或nav元素更符合使用条件，不要使用section元素。

 

3.不要为没有标题的内容区块使用section元素。

 

根据HTML5效率优先的设计理念，它推崇表现和内容的分离。

 

2. HTML5新增功能元素

 

hgroup元素：用于对整个页面或页面中一个内容区块的标题进行组合。例如：

 

<hgroup>....</hgroup>

 

figure元素：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。

使用figcaption元素可为figure元素添加标题。例如可以增加一张图片

 

<figure>

     <img src="#" />

     <figcaption>标题</figacption>

</figure>

 

figcaption:定义figure的标题

 

video元素: 定义视频，比如电影片段或其他视频流。例如:

 

<video src="movie.ogg" controls= "controls">

 

video元素

 

</video>

 

audio元素: 定义音频，比如音乐或其他音频流。例如:

 

<audio src="someaudio.wav">

 

audio元素

 

</audio>

 

embed元素：用来插入各种多媒体，格式可以是MIDI、WAV、AIFF、AU、MP3。例如：

 

<embed src="horse.wav" />

 

mark元素：主要用来在视觉上像用户呈现哪些需要突出显示或高亮显示的文字。mark元素的

一个比较典型的应用就是搜索结果中向用户高亮显示搜索关键词。例如：

 

<mark></mark>

 

time元素：表示日期或时间，也可以同时表示两者，重要属性格式datetime。例如：

 

<time datetime="2015-7-19"></time>

 

pubdate属性是一个可选的布尔值属性，可用在article元素中的time元素上，意思是time元素代表文章或整个网页的发布日期。

 

canvas元素：表示图形，如图表和其他图像。这个元素本身没有行为，仅仅提供一块画布，

但他把一个绘图API展现个给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块

画布上。例如:

 

<canvas id ="myCanvas" width="200" height="200"></canvas>

 

output元素：表示不同类型的输出，如脚本的输出。例如：

 

<output></output>

 

source元素：为媒介元素（比如<video>和<audio>）定义媒介资源。例如：

 

<source>

 

menu元素：表示菜单列表。当希望列出表单控件时使用该标签。例如：

 

<menu>

       <li><input type ="checkbox" />red</li>

       <li><input type="cheackbox" /></li>

</menu>

 

ruby元素：表示ruby注释(中文注音或字符)。例如：

 

rt元素：表示字符(中文注音或字符)的解释或发音。

 

rp元素：在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容。

 

wbr元素：表示软换行。wbr元素与br元素的区别是br元素表示此处必须换行；

而wbr元素的意思是浏览器窗口或父级元素的宽度足够宽时(没必要换行时)不

进行换行，而当宽度不够时，主动在此处进行换行。

 

command元素：表示命令按钮，如单选按钮、复选框或按钮。例如

 

<command onclick=ucut()" lable="cut">

 

progress：用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的

表示和监视。

 

mark：定义需要突出显示的区域或高亮显示文本

 

 

details：表示用户要求得到的详细