【html】html5新特性有哪些

一、html5新特性——canvas元素

canvas元素用于在网页上绘制图形，有多重绘制路径、矩形、圆形、字符以及添加图像的方法

svg元素用于描述二维是矢量图形的一种图形格式。

（1）把svg直接当成图片放在网页上

（2）实现动画

（3）svg图片的交互和滤镜效果

不同点：canvas是通过js来绘制2d图形，逐像素进行渲染的，假若在图片完成后进行修改，整个场景就会重新绘制

svg元素是使用XML描述2d图形的语言，svg dom中的每一个元素都是可用的，可以为其添加js处理器。每一个被绘制的图形均被视为对象，如果发生变化，浏览器就会自动重新绘制图形

二、html5新特性——表单元素

新增的表单元素

<datalist>：元素规定输入域的选项列表，使用<input>元素的list元素与<datalist>元素的id绑定

<keygen>：提供一种检验用户的可靠方法，标签规定用于表单的密钥对生成器字段

<output>：用于不用类型的输出，比如计算或脚本输出

新增的表单属性

placehoder属性：简短的提示在用户输入值前会显示在输入域上，既默认框提示

required属性：是一个boolean属性，要求填写的输入域不为空

pattern属性：描述了一个正则表达式用于验证<input>元素的值

max / min属性：最大最小值

step属性：为输入域规定合法的数字间隔

height / width属性：用于image类型的<input>标签的图像高度和宽度

autofocus属性：是一个boolean属性，在页面加载时自动获得焦点

multiple属性：是一个boolean属性，规定<input>元素中选择多个值

三、html5新特性——媒体元素

播放音频文件的元素<audio>————<audio controls>

（1）control属性提供播放暂停和音量控件

（2）<audio>和<audio/>之间插入浏览器不支持的<audio>元素的提示文本

（3）允许使用多个<source>元素用来链接不同的音频文件，浏览器使用第一个支持的音频文件

（4）支持三种音频格式文件：mp3、wax、ogg

播放视屏文件的元素<video>

（1）control属性提供播放暂停和音量控件，也可以使用dom操作：play()和pause()

（2）video元素提供了width和height控制视频的尺寸。如果设置了就会在页面加载时保留，没设置就不保留，页面根据原始视频改变

四、html5新特性——地理定位

HTML5 Geolocation（地理定位）用于定位用户的位置

五、html5新特性——html5拖放

六、html5新特性——web存储

（1）localStrorage——没有时间限制的数据存储，存在本地

（2）sessionStrorage——有时间限制的数据存储，针对一个session，本次会话结束（关闭浏览器）数据删除

七、html5新特性——应用程序缓存（Application Cache）

引入应用程序缓存，意味着web应用可进行缓存，并可以在没有网络是访问

优势：

（1）离线浏览——用户可在应用离线时使用

（2）速度——已缓存的加载更快

（3）减少服务器负载——浏览器将只从服务器下载更新过或更改过的资源

八、html5新特性——html5 Web Workers

当HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。但是web workers是运行在后台的js，不会影响页面的性能，可以一直在后台运行

九、html5新特性——html5服务器发送事件

允许网页获得来自服务器的更新，现在可以做到自动更新

十、html5新特性——html5 WebSocket