THML5新增功能

HTML5新增功能

1.语义化标记：

1）article：article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示，然后一 些评论可以以article的形式嵌入其中。

2）section：section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

3）aside：用来装载非正文类的内容。例如广告，成组的链接，侧边栏等等。

4）hgroup：标签用于对网页或区段的标题元素（h1-h6）进行组合。例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。

5）header：header 标签定义文档的页面组合，通常是一些引导和导航信息。

eg:<header>

<p>this is the page Logo</p>

<nav>this is page navigation</nav>

</header>

6)footer:footer 标签定义 section 或 document 的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

7)nav:标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用nav标签，当然，这不是必须的。

8)time: 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

eg:<p>我们在每天早上<time>9:00</time> 开始营业。</p>

<p>我在 <timedatetime="2008-02-14">情人节</time> 有个约会。</p>

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

10)figure:figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

11)figcaption:figcaption 标签定义 figure 元素的标题（caption）。"figcaption"元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

eg:<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg"width="350" height="234" /> </figure>

2.表单增强功能

1）email：此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果，eg:<input type=email >;

2）url:要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.,eg:<inputtype=url >;

3)number:要求输入格式数字，默认会有上下两个按钮，opera支持更好,eg:<input type=number >;

4)tel:此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别,eg:<input type=tel>;

5)range:此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.

eg:<input type=range min=20 max=100 step=2 >;

6)color:此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中,可以设置默认值;

eg:<input type=color value=#ff0000 >

7)date, time, datetime, datetime-local, month, week:这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.

8)search:此类型表示输入的将是一个搜索关键字,通过results=s 或者x-webkit-speech 可显示一个搜索小图标. [在chrome下才能看得见];

eg:<input type=search results=s;

9)required:pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.

10)placeholder:<input type=text placeholder="your message">;

11)autofocus:默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().;

12)list:该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.;

<input type="text" list="ilist">

<datalist id="ilist">

<option label="a"value="a">aaaaa</option>

<option label="b"value="b">bbbbb</option>

<option label="c" value="c">ccccc</option>

</datalist>

13)output:标签定义不同类型的输出，比如脚本的输出;

14)meter:标签定义度量衡。仅用于已知最大和最小值的度量。

15)progress:标签定义运行中的进度（进程）。可以使用 progress 标签来显示 JavaScript中耗费时间的函数的进度。;

16)contenteditable:此属性可以让某个元素里面的文本节点或值变为可编辑,eg:<p contenteditable="true" >可以编辑的内容</p>;

3.音频/视频

HTML5 对视频和音频特性规范文档的制定是被讨论最多的。除浏览器自带支持的明显好处外，评论点集中在浏览器提供商对音频/视频格式 的不同选择；

音频: ogg (ogg, oga), mp3, wav, AAC

视频: ogg (ogv), H.264 (mp4)

备注： Safari 来检测 HTML5 的音频/视频支持，需要安装 QuickTimePlayer；

1）常见H5音频格式：

ogg[ogg, oga]：Ogg全称应该是OGGVobis(oggVorbis)是一种新的音频压缩格式，类似于MP3等的音乐格式。Ogg是完全免费、开放和没 有专利限制的。OggVorbis文件的扩展名是.OGG。Ogg文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。

mp3：MP3是一种音频压缩技术，其全称是 动态影像专家压缩标准音频层面3（Moving Picture ExpertsGroup Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。利用 MPEG Audio Layer 3 的技术，将音乐以1:10 甚至 1:12 的压缩率，压缩成容量较小的文件，而对于大多数用户来说重放的音质与最初的不压缩音频相比没有明显的下降；

wav：WAV为微软公司(Microsoft)开发的一种声音文件格式，它符合RIFF(Resource Interchange File Format)文件规范，用于保存Windows平台的音 频信息资源，被Windows平台及其应用程序所广泛支持，该格式也支持MSADPCM，CCITT A LAW等多种压缩运算法，支持多种音频数字，取样频率和声道，标准格式化的WAV文件和CD格式一样，也是44.1K的取样频率，16位量化数字，因此在声音文件质量和CD相差无几！ WAV打开工具是WINDOWS 的媒体播放器。

AAC：中文称为“高级音频编码”，出现于1997年，基于 MPEG-2的音频编码技术。由Fraunhofer IIS、杜比实验室 、AT&T、Sony（索尼）等公司共同开发，目的是取代MP3格式。

2）音频常见控件：

controls：如果出现该属性，则向用户显示控件，比如播放按钮；

autoplay:如果出现该属性，则音频在就绪后马上播放。;

loop:如果出现该属性，则每当音频结束时重新开始播放。

preload:如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

audio src：要播放的音频的 URL。

3）常见视频H5格式：

ogg[oga]：ogv影片格式需要由ogg容器格式说起，Ogg是一个自由且开放标准的容器格式，由Xiph Org 基金会所维护。Ogg格式并不受到软体专利的限制，并设计用於有效率地串流媒体和处理高品质的数位多媒体。

H.264[mp4]：H.264，同时也是MPEG-4第十部分，是由ITU-T视频编码专家组（VCEG）和ISO/IEC动态图像专家组（MPEG）联合组成的联合视频组（JVT，Joint Video Team）提出的高度压缩数字视频编解码器标准。

4）视频常见控件：

video controls：如果出现该属性，则向用户显示控件，比如播放按钮；

video preload：如果出现该属性，则向用户显示控件，比如播放按钮；

poster：如果出现该属性，则向用户显示视频封面图片；

width：设置视频播放器的宽度。

height：设置视频播放器的高度。

video src：要播放的视频的 URL。

video loop：如果出现该属性，则当媒介文件完成播放后再次开始播放。

video autoplay：如果出现该属性，则视频在就绪后马上播放。

4.画布(canvas):在你的页面中插入 canvas 就像插入其他标记一样平常，但你将需要一些编程 的经验来绘制形状、图表、动画、游戏、图片作品等。

兼容性：在除 IE 外的所有现代浏览器（Firefox 3,Safari 3.1, Chrome 2, and Opera 9.6）都支持 Canvas。你可以使用ExplorerCanvas 这个 Javascript 解决方案来为 IE 添加这个新特性。

canvas 标签只是图形容器，您必须使用脚本来绘制图形。

width：设置 canvas 的宽度。

设置 canvas 的高度。

注意事项：a.先后顺序[就像ps里面的图层]

b.模块化编写代码或者是组件式

c.注意绘制图形的开始和结尾

d.设置canvas的宽高要在行内设置；如果在样式里面设置，画布会根据样式里面的宽高等比例缩放，而不是真正的宽高【canvas默认宽高：300*150】

5.可编辑内容：

这个属性是 HTML5 的一部分，且它几乎被所有主流浏览器支持（Internet Explorer 5.5+, Firefox 3+, Safari 3.1+, Chrome 2+, andOpera 9.6+）。 这个属性很强大，可惜的是很少有人知道。现在所有的网页编辑器都用了这个属性。

6.拖放：

HTML5 的拖放将会把与用户交互带向别一个等级，并将会对你如何设计用户交互产生重大影响。现今，Firefox 3.5+ 已经对此特性提供了最大 化的支持，其他浏览还只是保守地支持了一小部分（Opera 完全不支持）。不幸的是根据现阶段浏览器提供商的执行状况，你将需要依赖大量的 Javascript 和 CSS 来让做跨浏览器支持。

7.本地存储：

localStorage 用以存储周期较长、多页面，以及多浏览器 session 的内数据。甚至持续到你重起浏览器或者电脑。 本地存储特性被如下浏览器所支持：IE8+, Firefox 3.5+, Safari 4.0+,Chrome 2.0+ and Opera 10.5+。

8.代码举例：

<form action=""method="post" id="html5_form">

<p>

<labelfor="isearch">搜索</label>

<inputtype="search" name="isearch" id="isearch"placeholder="search..." required autofocus x-webkit-speech />

<small>请输入搜索内容</small>

</p>

<p>

<label for="keygenx">加密强度</label>

<keygen name="keygen"id="keygenx" />

</p>

<p>

<label for="name">用户名</label>

<input type="text"name="name" id="name" placeholder="请输入您的名字" required />

</p>

<p>

<labelfor="mail">Email</label>

<input type="text" name="mail"id="mail" placeholder="example@domain.com"pattern="\w+@[a-z0-9]+\.[a-z]+" requiredtitle="example@domain.com" />

</p>

<p>

<labelfor="pass">密码</label>

<inputtype="password" name="pass" id="pass"placeholder="请填写密码"required />

</p>

<p>

<labelfor="age">年龄</label>

<inputtype="range" name="age" id="age"min="18" max="60" value="30" required />

</p>

<p>

<labelfor="height">身高</label>

<inputtype="number" name="height" id="height"value="170" required />

</p>

<p>

<labelfor="time">生日</label>

<inputtype="date" name="time" id="time" required />

</p>

<p>

<labelfor="color">颜色</label>

<inputtype="color" name="color" id="color"value="#c8bfe7" required />

</p>

<p>

<labelfor="search">搜索引擎</label>

<inputtype="url" name="search" id="search"list="searchlist" autocomplete="on"pattern="https?://.+" />

<datalistid="searchlist">

<optionvalue="http://www.baidu.com/">

<optionvalue="http://www.google.com/">

<optionvalue="http://www.sogou.com/">

</datalist>

</p>

<pclass="btn"><input type="submit" value="点一下瞧瞧" class="sbt" /></p>

</form>

DEMO: