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.闭包 视频一般都是二进 ...
随机推荐
- 表设置了自增后往里面插入不自增的id时的处理方法
SET IDENTITY_INSERT 表名 ON 中间写insert语句,但是这里必须把列名更上 SET IDENTITY_INSERT 表名 OFF
- jquery 事件委托
什么事件委托? DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒 ...
- C#高级编程笔记 Day 7, 2016年9月 19日 (泛型)
1.协变和抗变 泛型接口的协变 如果泛型类型用 out 关键字标注,泛型接口就是协变的.这也意味着返回类型只能是 T. 接口IIndex 与类型T 是协变的,并从一个制度索引器中返回这个类型. pu ...
- 基于分类的Vad效果
提取出频谱特征,然后使用gmm.svm.dnn模型进行训练和分类,实时话语检测. 原始文件 VAD处理,剔除静音后的效果:
- Factorization Machine因子分解机
隐因子分解机Factorization Machine[http://www. w2bc. com/article/113916] https://my.oschina.net/keyven/blog ...
- js框架设计1.4类型判断
这篇司徒大神介绍了很多js的 不靠谱类型判断.篇幅也是第一篇中最常的 ,经阅读后,以后一定要用框架的自带的类型判断,万万不可随便乱用js原生判断.
- jstl 简单实践
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- Entity Framework 与ORACLE ODP.Net 在vs2010下的稀奇古怪的问题
不说废话 1.在vs2010数据源中看不到oracle odp.net 数据源,vs2008下可以看到,通过oraprocfg配置多次,重启多次,还是看不到,machine.config里面配置也正常 ...
- unlink和close关系
今天看到nginx用文件锁实现互斥的实现方案时,发现,unlink文件后还可需用fd,很是纳闷!于是搜索到此文,并自测了下,涨姿势了~分享给大家~ 原理: 每一个文件,都可以通过一个struct st ...
- ubuntu 创建用户
http://www.jb51.net/article/45848.htm 创建用户