大家都知道HTML5是新一代的HTML标准,那么HTML5到底包含哪一些东西了，这里我直接参考了MDN上的资料来简写一下
1、HTML5概述
MDN
上面主要分了8个部分来描述HTML的新特性
1、新的语义化
- HTML 5 加了很多新的标签，使 HTML 更富有语义，如HTML5中的新的提纲和节段元素：<section>、<article>、<nav>、<header>、<footer>、<aside>等等。
- 升级了 iframe 标签，使其更安全。
- 新增 MathML，允许直接嵌入数学公式
2、通信
- Web Sockets ： 允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。
- Server-sent events：允许服务器向主动客户端推送事件
- WebRTC ： 其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议
3、离线 & 储存
- 新增 AppCache
- online 与 offline 事件
- localStorage 和 sessionStorage
- IndexedDB
- File API
4、多媒体
- Web 原生支持音视频播放
- Camera API 可控制摄像头
5、2D/3D绘图 & 效果
- Canvas 可绘制图像和文本
- WebGL 可渲染 3D 影像
- SVG ：一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。
6 、性能 & 集成
- Web Workers 能够把 JavaScript 计算委托给后台线程
- XMLHttpRequest 升级
- History API 允许对浏览器历史记录进行操作
- 新增 conentEditable 属性
- 拖放 API、全屏 API、指针锁定 API
- 可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。
- requestAnimationFrame 允许控制动画渲染以获得更优性能。
2、HTML5表单
上面讲HTML5中常见的东西描述了下，更多细节可参考MND，下面重点写一下HTML5表单新增的一些特性（实际中应用频繁）。
表单相关
- autofocus
- placeholder
- form
- required
- formaction, formenctype, formmethod, formtarget, - formnovalidate
- novalidate
input新增type
- url
- number
- range
- Date Picker(Date\month\week\time\datatime)
其实具体在开发中需要，不断的熟悉是比较好的方式去记住和理解，这里只是简单的罗列一下常用的新增标签和属性
3、HTML5存储 localStorage
这里我们比较下cookie、LocalStorage 、SessionStorage 三者吧
- cookie这个大家应该比较熟悉吧，就是当浏览器访问服务器后，服务器传给浏览器的一段数据；此后每次浏览器访问该服务器，都必须带上这段数据。
那么这里的cookie有什么作用了？
1、识别用户身份
用户A和B访问同一个域名的网站，服务器分别会传给两个不同的cookie，同时会做记录；这样当A\B下次访问的时候，就可以依据cookie值中带的内容来判断是A\B
2、记录历史
假设 a.com是一个购物网站，当 A 在上面将商品 A1 、A2 加入购物车时，JS 可以改写 Cookie，改为「 cart=A1,A2」，表示购物车里有 A1 和 A2 两样商品了。
这样一来，当用户关闭网页，过三天再打开网页的时候，依然可以看到 A1、A2 躺在购物车里，因为浏览器并不会无缘无故地删除这个 Cookie,但是Cookie一般会设置一个到期时间。
- localStorage:存储在 localStorage 里面的数据没有过期时间（expiration time）本地存储不会被发送到服务器上；空间约5M
使用方式
localStorage.getItem('xxx') //可以从存储中获取一个名为‘xxx’的数据项
localStorage.getItem('xxx',value)//创建新数据项和更新已存在的值。该方法接受两个参数
localStorage.removeItem() //接受一个参数,你想要移除的数据项的键
Storage.clear() //不接受参数，只是简单地清空域名对应的整个存储对象
sessionStorage : 与localStorage的区别在于存储在 sessionStorage 里面的数据会在浏览器会话（browsing session）结束时被清除，即浏览器关闭时。
网友评论