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=‘一下这些玩意’>
- 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 | 规定默认值 |
Date也有很多 比如
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间（小时和分钟）
- datetime - 选取时间、日、月、年（UTC 时间）
- datetime-local - 选取时间、日、月、年（本地时间）
11、还有就是一些表单的新属性 表单的新标签 有兴趣的研究一下 （反正其他的我没遇到）
html5新特性的更多相关文章
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- HTML5新特性：FileReader 和 FormData
连接在这里: HTML5新特性:FileReader 和 FormData
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- HTML5新特性：范围样式
原文出处:http://blog.csdn.net/hfahe/article/details/7381141 Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
- HTML5新特性之文件和二进制数据的操作 Blob对象
HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象
- 第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
随机推荐
- 如何挂载阿里云Linux服务器的“数据盘”（新购买）
详细操作参考: http://jingyan.baidu.com/article/90808022d2e9a3fd91c80fe9.html 用到的命令行汇总: 1.查看磁盘: fdisk -l 2. ...
- php函数parse_url
1.需求 了解parse_url的使用方法 2.实例 $uri = parse_url('http://dummy'.$_SERVER['REQUEST_URI']); var_dump($uri); ...
- 利用Mongoose来结构化模式与验证
Mongoose是一个文档对象模型(ODM)库,为MongoDB Node.js原生驱动程序提供更多的功能. 把结构化的模式应用到一个MongoDB集合,提供了验证和类型转换的好处 Mongoose通 ...
- windows系统和ubuntu虚拟机之间文件共享——samba
参考:http://www.cnblogs.com/phinecos/archive/2009/06/06/1497717.html 一. samba的安装: sudo apt-get insall ...
- espcms会员二次开发文件说明——会员，时间格式
[espcms会员图片字段] 添加字段加入图片类型/webadm/include/inc_formtypelist.php 会员修改页面模型/webadm/templates/member/membe ...
- web应用 http 响应 url uri
动态web 应用结构 WEB-INF --classes --lib web.xml 响应: url uri
- C Primer Plus_第8章_字符输入输出和输入确认_编程练习
1.题略 #include <stdio.h> int main(void) { ; printf("Please enter text here(end with Ctrl + ...
- wow经典台词
永恒岛,磐皂在玄牛上场时喊:你能否独立山巅,任由风霜侵袭,直至沧海变为桑田,高山沉入海底?风刀霜剑,四面受敌.不动如山,亘古不移. 巫妖王:当一切结束,你会跪求我的宽恕...而我,会拒绝你! 伊利丹: ...
- SQL入门语句之INSERT、UPDATE和DELETE
一.SQL入门语句之INSERT insert语句的功能是向数据库的某个表中插入一个新的数据行 1.根据对应的字段插入相对应的值 insert into table_name(字段A, 字段B, 字段 ...
- hdu 1502 Regular Words
链接:http://acm.hdu.edu.cn/showproblem.php?pid=1502 思路:给定一个n,分别由n个a,b,c组成的字符串的所有前缀中a的个数大于等于b的个数大于等于c的个 ...