冰剑'blog

HTML5已经出来了很长时间了，最近也终于有空写一下HTML5的一些内容。本文主要了解一下HTML5新增加的一些标签及属性。

HTML5增加了一些新的标签，

HTML5新增加的标签主要有： article、aside、audio、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、ruby、section、summary、time、video、source、wbr

下面来对一些标签进行介绍

article

article标签表示一篇文章、博客日志等，实例代码如下：

<article>
<h4>这是我的第一篇博客文章</h4>
<p>html5是一项新的技术。</p>
<p>html5是一项新的技术。</p>
</article>

aside

aside标签用于定义一个与主要内容有关的辅助性内容。

audio

audio标签html5新增加的一个新的标签，用于显示网页上的声音媒体，之前都是借助第三方插件来实现网页声音。目前有是三种声音格式在html5里能被支持，.Ogg， .MP3 和 .WAV。audio标签的基本格式如下

<audio src="newsong.ogg" controls="controls">
	<p>Y你的浏览器不支持video,请更新你的老爷车浏览器。</p>
</audio> 

audio 标签的属性

audio有5个属性src、loop、preload、autopaly、controls；

src有一个值“url”，用来定义一个音频地址、以是本地地址、也可是是远程服务器的地址

loop有一个值“loop”定义音频是否重复播放。

preload表示音频是否预先加载。它有三个值：

• auto值表示： 页面一打开就开始加载；
• Metadata值表示： 页面不预先开始加载，但是音频文件的一些属性信息可以加载，比如文件大小、第一帧等信息；
• none值表示：不预先加载。

autopaly有一个值“autoplay”，定义视频自动播放。如果定义了这个属性，将会覆盖上面的preload属性。

controls有一个值“controls”，定义音频的控制按钮，比如播放、暂停、音量等。

canvans

canvans标签用于定义一个图形，使得web开发人员不用借助三方插件（flash、Silverlight）来完成图像的制作，而是直接使用javascript脚本来绘图。Canvans标签有宽、高属性

关于canvans绘图的一些内容，详细可点击这里查看IBM的教程：使用 HTML5 canvas 进行 Web 绘图

command

command标签用于定义命令按钮。实例代码

<command type="command">Click here for more info on HTML5!</command> 

command有5个属性type=command/radio/checkbox、checked= checked、disabled=disabled、label=[ command name]、icon=[一个url]、radiogroup=[ radiogroup的名字]

datalist

datalist标签用于定义一个下啦列表，示例代码如下：

<input list="Cellphones" />
      <datalist id=" Cellphones ">
        <option value="BENQ">
        <option value="BLACKBERRY">
        <option value="ERICCSSON">
        <option value="FLY">
        <option value="HTC">
      </datalist> 

details

details标签用于定义关于一个文档的详细说明。Details有一个属性open值为open。

embed

embed标签用于定义一个外部的内容或插件，可以是任何的媒体文件。

footer

footer标签用来定义一个页脚/页面底部。可以是整个网页的footer，也可是一个section的footer。

header

header标签用来定义一个页脚/页面底部。可以是整个网页的header，也可是一个section的header。

hgroup

hgroup标签用来定义一组标题。比如：

	<hgroup>
		<h1>冰剑blog</h1>
		<h2>专注于web前端开发</h2>
</hgroup>

nav

nav 标签用来定义一个导航。可以是整个网页的导航，也可是一个section的导航。

	<nav>这是一个mark标签的例子，这里需要<mark>标记</mark>一下。</p>

meter

meter标签是用来测量一个范围。有一个预先定义的最小值喝最大值。必须预先指定一个范围。有最小值喝最大值。

	<p>你的分数： <meter value="93" min="0" max="100" low="50" high="90" optimum="100">A+</meter></p>

high值为一个数值，表示这个定义的范围的最高部分；

low 值为一个数值，表示这个定义的范围的最低部分；

max值为一个数值，表示这个定义的最大值；默认为1

min 值为一个数值，表示这个定义的最小值；默认为0

optimum值为一个数值，表示这个定义的范围的最佳值、最好值；

value 值为一个数值，表示这个定义的实绩值；

output

output标签是用来显示通过指令计算出来的结果

progress

progress标签是用来显示一个进度。它包含两个属性：value 表示的是当前进度；max表示一个任务或工程的总量，是一个必须的属性。

section

section 表示一个页面文档的一部分，包括header、footer、article等。

summary

summary标签是用来显示一个摘要，它是details标签的一个子元素，也就是说，它必须和details标签一起使用。

	<details>
		<summary>冰剑blog</summary>
		专注于web前端开发
</ details >

time

time标签是用来显示一个日期，或者时间。

	<p> 我大概 <time>09:00</time>到达。 </p>
 	<p> I have an appointment with doctor on date <time datetime="2010-09-02"> day</time>.</p>
 

video

video标签是用来显示一个视频。Source 是video标签的一个子元素，用来显示视频来源。Source 的type属性来显示视频的类型。Video示例代码如下：

	<video controls="true" height="295" width="480">
     <!-- hello iOS, Safari and IE9 -->
     <source src="chris.mp4" type="video/mp4" />
     <!-- Hello Chrome and Firefox (and Opera?) -->
     <source src="chris.webm" type="video/webm" />
     <!-- Hello Firefox and Opera -->
<source src="chris.ogv" type="video/ogg" />
     <!-- Hello legacy -->
     <a href="#">你的浏览器不支持video标签，点击这里查看视频</a>
</video>
 

总结：

写关于HTML5方面的东西，可能会有一些错误或者不当的地方。欢迎大家在下面的评论里和我交流！

本文由冰剑原创文章。转载请注明出处，来自冰剑blog。

一些HTML5的参考资料：

IBM-- HTML5专题：http://www.ibm.com/developerworks/cn/web/lp/html5/

W3C-- HTML5： http://www.w3.org/TR/html5/

W3C-- HTML5 Reference ： http://dev.w3.org/html5/html-author/

HTML5 Tag Reference ： http://www.w3schools.com/html5/html5_reference.asp