html新特性新功能,HTML5新特性

1.语义化标签：

标签

描述

header

定义了文档的头部区域

nav

定义导航链接的部分

section

定义文档中的节，比如章节、页眉、页脚或文档中的其他部分

article

定义一个文章区域

aside

定义页面的侧边栏内容

footer

定义 section 或 document 的页脚

details

用于描述文档或文档某个部分的细节

dialog

定义对话框，比如提示框

summary

包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息

figure

规定独立的流内容(图像、图表、照片、代码等等)。

figcation

定义

元素的标题

2.新增表单input输入类型：这些新特性更好地提供了输入控制和验证。

输入类型

描述

color

定义拾色器。

date

定义 date 控件(包括年、月、日，不包括时间)。

datetime

定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区)。

datetime-local

定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒，不带时区)。

email

定义用于 e-mail 地址的字段。

month

定义 month 和 year 控件(不带时区)。

number

定义用于输入数字的字段。

range

定义用于精确值不重要的输入数字的控件(比如 slider 控件)。

search

定义用于输入搜索字符串的文本字段。

tel

定义用于输入电话号码的字段。

time

定义用于输入时间的控件(不带时区)。

url

定义用于输入 URL 的字段。

week

定义 week 和 year 控件(不带时区)。

3.新增表单元素：

表单元素

描述

datalist

规定了 元素可能的选项列表。

keygen

规定用于表单的密钥对生成器字段。

output

作为计算结果输出显示(比如执行脚本的输出)。

4.新增表单属性：

表单属性

描述

autocomplete

规定 元素输入字段是否应该启用自动完成功能。

autofocus

规定当页面加载时 元素应该自动获得焦点。

form

规定 元素所属的一个或多个表单。

formaction

规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")

placeholder

规定可描述输入 字段预期值的简短的提示信息 。

required

规定必需在提交表单之前填写输入字段。

pattern

规定用于验证 元素的值的正则表达式。

multiple

规定允许用户输入到 元素的多个值。

min

规定 元素的最小值。

max

规定 元素的最大值。

height

规定 元素的高度。(只针对type="image")。

width

规定 元素的宽度。 (只针对type="image")。

step

规定 元素的合法数字间隔。

5.音频和视频：

音频：audio

定义声音，比如音乐或其他音频流。

支持Mp3,Wav,Ogg三种格式

属性

描述

autoplay

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

controls

如果出现该属性，则向用户显示音频控件(比如播放/暂停按钮)。

loop

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

muted

如果出现该属性，则音频输出为静音。

preload

规定当网页加载时，音频是否默认被加载以及如何被加载。

src

规定音频文件的 URL。

视频：video

定义视频，比如电影片段或其他视频流。

支持MP4,WebM,Ogg三种格式

属性

描述

autoplay

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

controls

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

height

设置视频播放器的高度。

loop

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

muted

如果出现该属性，则音频输出为静音。

poster

规定视频正在下载时显示的图像，直到用户点击播放按钮。

preload

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

src

要播放的视频的 URL。

width

设置视频播放器的宽度。

6.Canvas:

通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。但该标签只是图形容器，必须使用脚本来绘制图形。

属性

描述

height

规定画布的高度。

width

规定画布的宽度。

7.SVG 与 Canvas

SVG是指可伸缩矢量图形(Scalable Verctor Graphics),是一种基于XML语法的图像格式。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以SVG本质上是文本文件，体积较小，并且不管放大多少倍都不会失真。

SVG:

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。你可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas:

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 和 SVG的区别

Canvas

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序(比如谷歌地图)

复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)

不适合游戏应用

8.地理定位：Geolocation用于定位用户信息

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

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

使用 getCurrentPosition() 方法来获得用户的位置。

function getLocation(){

if (navigator.geolocation){

navigator.geolocation.getCurrentPosition(showPosition);

}else{

alert("浏览器不支持地理定位");

}

}

function showPosition(pos){

var lat = pos.coords.latitude; //纬度

var lon = pos.coords.longitude; //经度

var time = pos.timestamp; //定位时间

var alti = pos.coords.altitude; //海拔

var speed = pos.coords.speed; //速度

}

f

9.webStorage:

是本地存储，存储在客户端，包括localStorage和sessionStorage。

localstorage:没有时间限制的数据存储(持久化的本地存储)。

sessionstorage:针对一个 session 的数据存储。

cookie

主要用途是在保存用户信息，比如登录网站记住密码。

cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

cookie、localstorage、sessionstorage的区别

特性

cookie

localstorage

sessionstorage

生命周期

只在设置cookie过期时间之前有效

除非被清除，否则永久有效

仅在当前浏览器窗口有效，关闭浏览器或窗口失效

存放数据大小

不超过4k

一般为5MB

一般为5MB

与服务器端通信

始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递

仅在客户端保存，不参与和服务器的通信

仅在客户端保存，不参与和服务器的通信

易用性

需要自己封装，源生的cookie接口并不友好

.webStorage的API接口使用更方便，如setItem、getItem等

webStorage的API接口使用更方便，如setItem、getItem等

作用域

在所有同源窗口中共享

在所有同源窗口中共享

不在不同的浏览器窗口共享，即使是同一个页面

保存数据：

localStorage.setItem(key,value);

读取数据：

localStorage.getItem(key);

删除单个数据：

localStorage.removeItem(key);

删除所有数据：

localStorage.clear();

得到某个索引的key：

localStorage.key(index);

10.websocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

结语:

简单的介绍一些HTML5新特性，在未来的学习中会继续补充做进一步的理解。

本文如果存在错误的地方，欢迎指出批评~