这一篇博文不会告诉你怎么去使用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 规定默认值

Date也有很多 比如

  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间(小时和分钟)
  • datetime - 选取时间、日、月、年(UTC 时间)
  • datetime-local - 选取时间、日、月、年(本地时间)

11、还有就是一些表单的新属性  表单的新标签    有兴趣的研究一下 (反正其他的我没遇到)

html5新特性的更多相关文章

  1. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  2. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  3. HTML5新特性:FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

  4. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  5. HTML5新特性:范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

  6. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  7. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

  8. HTML5新特性之文件和二进制数据的操作 Blob对象

    HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象

  9. 第二季第八天 HTML5新特性

    在函数内部window.a =  a  在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...

随机推荐

  1. Linux date命令详解

    1.显示时间 date命令可以按照指定格式显示日期,只键入date则以默认格式显示当前时间.如下: 如果需要以指定的格式显示日期,可以使用“+”开头的字符串指定其格式,详细格式如下: %n : 下一行 ...

  2. Asp.Net Core--基于角色的授权

    翻译如下: 当创建身份时,它可以属于一个或多个角色,例如Tracy可以属于管理员和用户角色,而Scott可以仅属于用户角色. 如何创建和管理这些角色取决于授权过程的后备存储. 角色通过ClaimsPr ...

  3. 整理iOS9适配中出现的坑(图文)

    原文: http://www.cnblogs.com/dsxniubility/p/4821184.html 整理iOS9适配中出现的坑(图文)   本文主要是说一些iOS9适配中出现的坑,如果只是要 ...

  4. (备忘)自定义viewgroup与点击分发事件

    public class ScoreButton extends ViewGroup 在类中重写onTouchEvent方法 @Override public boolean onTouchEvent ...

  5. asp.net中membership使用oracle数据库(二)

    需要安装的东西都准备好了,继续生成后台表.过程.函数.触发器等.ps/sql中 @@E:\oracle\product\11.2.0\client_1\ASP.NET\SQL\InstallAllOr ...

  6. C#的XML序列化及反序列化

    webservice在工作中用到的很多,基本都是以XML格式问通讯内容,其中最关键的就是XML串的序列化及反序列化. XML的运用中有两种信息传递,一种为XML的请求信息,另一种为返回信息,要运用XM ...

  7. kettle系列-1.kettle源码获取与运行

    第一次写博客,心里有点小激动,肯定有很多需要改进的地方,望海涵. kettle算是我相对较为深入研究过的开源软件了,也是我最喜欢的开源软件之一,它可以完成工作中很多体力劳动,在ETL数据抽取方面得到了 ...

  8. rename

    重命名文件名: # rename hosts.conf.正式配值文件 hosts.conf.正式配置文件 hosts.conf.正式配值文件 [root@monitor- vhost]# ls hos ...

  9. Delphi:与VCL同步(Synchronize()、用消息来同步)

    看本文时,可以同时参考:Delphi中线程类 TThread实现多线程编程(事件.临界区.Synchronize.WaitFor……) 先说一下RTL和VCL RTL(Run-Time library ...

  10. 【Java EE 学习 15】【自定义数据库连接池之动态代理的使用】

    一.动态代理的作用 使用动态代理可以拦截一个对象某个方法的执行,并执行自定义的方法,其本质是反射 优点:灵活 缺点:由于其本质是反射,所以执行速度相对要慢一些 二.数据库连接池设计思想 1.为什么要使 ...