html5总结之一(综述)

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。

有人说HTML5就像是一场革命,它很“新”,那么它有哪些新颖特殊的地方呢?

HTML 5的革新体现在:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

下面分类说明下:

一、语义化标记:

语义性好,少类名,有利于SEO ,文档易读 ,搜索引擎能够更好的理解页面中的内容,作为开发者,能够更快更准确的搜索到信息。

header、section、aside、hgroup、footer、article、nav、time.....

二、表单增强功能:

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

email、url、number、tel、range[min,max,step]、color、date、time、datetime、datetime-local、month、week、search、required、placeholder、progress......

三、视频/音频:

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<video></video>

可选属性有:autoplay、controls、height、width、loop、muted、poster、src等

HTML5 规定了在网页上嵌入音频元素的标准,即使用

可选属性有:autoplay、controls、loop、muted、poster、src等,还有很多控制播放的属性。

四、画布:

HTML5 中最让人兴奋的特性是 canvas — 那个用来作画的东东。在你的页面中插入 canvas 就像插入其他标记一样平常,但你将需要一些编程 的经验来绘制形状、图表、动画、游戏、图片作品等。

五、拖放:

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

为了使元素可拖动,把 draggable 属性设置为 true :

六、本地存储:

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

  • ocalStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

参考及推荐网站:

  1. http://www.aseoe.com/special/html5/ele.html
  2. http://www.cnblogs.com/jasmine-95/p/4999032.html
  3. http://www.runoob.com/html/html5-intro.html