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: