HTML5 新特性一览

HTML5

1.HTML5 新元素

HTML5提供了新的元素来创建更好的页面结构:

标签描述

2.HTML5 Canvas

HTML5  <canvas>  元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

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

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

3.HTML5 拖放

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

设置元素为可拖放

4.HTML5 地理定位

 HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

5.HTML5  Audio(音频)、Video(视频)

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

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

6.HTML5 Input 类型

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

color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

7.HTML5 表单元素

 HTML5 有以下新的表单元素:

<datalist>  元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

使用 元素的列表属性与 元素绑定.

8.HTML5 表单属性

 HTML5 的 <form>  和  <input> 标签添加了几个新属性.

<form> 新属性:

autocomplete、novalidate

<input> 新属性:

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step

 

9.HTML5 语义元素

 HTML5提供了新的语义元素来明确一个Web页面的不同部分:


10.HTML5 Web 存储

 Web Storage DOM API 为Web应用提供了一个能够替代cookie的Javascript解决方案

sessionStorage—客户端数据存储,只能维持在当前会话范围内。

             sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

localStorage—客户端数据存储,能维持在多个会话范围内。

             localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

对于大量复杂数据结构,一般使用IndexDB

 

11.HTML5 离线Web应用(应用程序缓存)

 HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势:

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

HTML5 Cache Manifest 实例

下面的例子展示了带有 cache manifest 的 HTML 文档(供离线浏览):

Manifest 文件

manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

manifest 文件可分为三个部分:

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面

1-CACHE MANIFEST

2-# 2012-02-21 v1.0.0

3-/theme.css

4-/logo.gif

5-/main.js

6-NETWORK:

7-login.php

8-FALLBACK:

9-/html/ /offline.html

12.HTML5 Web Workers

 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。(相当于实现多线程并发)

 

13.HTML5 SSE

 Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。

例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

EventSource 对象用于接收服务器发送事件通知:

14.HTML5 WebSocket

 WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容