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.闭包 视频一般都是二进 ...
随机推荐
- C和指针 第十三章 习题
1,1标准输入读入字符,统计各类字符所占百分比 #include <stdio.h> #include <ctype.h> //不可打印字符 int isunprint(int ...
- JVM参数OmitStackTraceInFastThrow：不打印NullPointerException异常堆栈
查看线上日志,遇到一个诡异的问题,就是系统大量空指针的异常,但是没有打印堆栈,导致不方便定位问题. 经过一番代码调试,确定并非程序代码问题.没有线索之后,从Google找到了答案:是因为在server ...
- Mac键盘图标与对应快捷按键标志汇总
Mac键盘图标与对应快捷按键 ⌘--Command () win键 ⌃ --Control ctrl键 ⌥--Option (alt) ⇧--Shift ⇪--Caps Lock fn--功能键就是 ...
- Find All Numbers Disappeared in an Array
Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and ot ...
- PHP获取当前位置
如果想动态的获取当前栏目所处的位置,就要关联到数据库,下面是例子: 栏目表(category): 涉及到二级目录. (1)首先在你的首页导航栏,还有首页所出现的链接后面,为栏目加上catid,就像这样 ...
- windows批处理语法
写批处理文件,除了了解基本语法外,你还需要熟悉常用的windows命令,那就先看看这篇文章:windows常用命令 #重要说明 文件及目录路径:要使用反斜杠'\',不要使用正斜杠'/' 如:del d ...
- IBatis.Net使用总结（三）-- IBatis实现分页返回数据和总数
IBatis 分页,这里没有使用其他插件,只使用最原始的方法. 输入参数: int currentPage 当前页 int pageSize 每页大小 Hashtable findCondition ...
- Listview的使用
最近一个多月忙着使用新的技术来做项目,现在项目上线了,嗯,发现android有些生疏了,所以今天特地写了这一篇博客来相信的讲解一些基础知识,同事呢,也可以让我温故知新一下.进入正题. 什么是listv ...
- Linux服务器init 5启动图形界面，报错Retrigger failed udev events的解决方法
1.开启linux系统的桌面环境,使用startx未成功,报如下错误: 提示:Retrigger failed udev events [root@ /]# startx xauth: creatin ...
- Educational Round 15
A题Maximum Increase 大水题.最长连续递增子序列有多长. #include <cstdio> #include <algorithm> using namesp ...