HTML5新特性概览-优快云博客

这一篇博文不会告诉你怎么去使用html5的新特性，只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录

对于初接触的人来说是一个导向

对于已经接触过的人来说是一个检测你掌握程度的检测

html5新特性综述：

1、用于绘画的canvas和SVG，

　　　　canvas和SVG都允许在浏览器中创建图片，但是他们的实现原理是不同的。

　　　　SVG通过xml完成2d图形的绘制；----------反正我不用

　　　　canvas是通过JavaScript完成2d图形；---------我也不常手写他最多也就写 柱状图饼状图折线图 会了这些也就差不多了。

　　　　我在工作中主要使用canvas做数据的展示。我认为百度的echarts（这是链接）是一个很好用的插件，如果你不做专业性研究的话echarts够用了。如果你想做canvas游戏，算法的干活！

2、拖放效果

　　　　鼠标按住左键不松手移动到另一个位置，功能是不是吊炸天。详解...(有想学习的可以给我留言我再做详细的讲解，暂时没做)

3、 Geolocation 可以获取用户当前的位置信息

　　　　关于这个API 官网上是这么说的：鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。也就是说暂时没有卵用、

4、web存储：localstorage 和 sessionStorage这是两个客户端存储方法，用于解决cookie的存储空间小、浪费带宽问题的

　　　　localStorage:没有时间限制的数据存储

　　　　sessionStorage：针对一个session的数据存储

<script type="text/javascript">
　　localStorage.newString="Smith";     //存
　　document.write(localStorage.newString);　　　//取
　　delete localStorage.newString   //删除
　　document.write(localStorage.newString);　　　//然后就取不到啦   
// 就把localStorage和sessionStorage当做对象来操作就好了

</script>

注：对于不同的网站会存储到不同的区域，所以不用担心其他网站会访问到这个网站存储的数据

5、video和audio视频API和音频

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<audio> 标签的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

HTML5 <video> - 方法、属性以及事件

方法	属性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

6、web worker 是运行在后台的 JavaScript 如果你只学前端用处不大这个东西支持创建新的线程，但是不能操作DOM

7、应用程序缓存

　　　　在文档的 <html> 标签中添加 manifest 属性即可

<html manifest="demo.appcache">   <body>可以离线缓存这部分内容</body>   </html>

8、一大帮html5的标签

　　　　我只说几个我常用的

header	页面头部，不同与<head></head>
aside	页面内容之外的内容
nav	外部链接集合导航么
section	定义section
article	文章、摘要或留言等形式的记录（一般搭配内嵌头部、尾部、底部结构使用）
hggroup	子标题，标题信息、可选标题、TAG标签这样的数据，还是英文更好理解一些，heading of a section
address	联系信息
footer	页脚

其他的很多感觉这些不够用的查官方文档

9、webscorket 实现与服务器双向推送相当于及时聊天不用像以前那样使用定时器setInterval定时发送ajax请求了，棒棒哒，不过只兼容IE10+

10、表单

输入表单的新属性<input type=‘一下这些玩意’>

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

不用说了吧但是IE貌似还没有支持的移动设备几乎都支持嘻嘻这些输入表单的新属性都有默认的验证和提醒方式，

新属性用来规定对数字类型的限定：

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	number	规定默认值