1.语意特性,添加<header><header/><nav><nav>等标签
2.多媒体, 用于媒介回放的 video 和 audio 元素
3.图像效果,用于绘画的 canvas 元素,svg元素等
4.离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等
5.设备兼容特性 ,HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,
6.连接特性,更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能
7.性能与集成特性,HTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作
新增标签
1.多媒体:<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
2.新表单元素:<datalist> ,<output> , <keygen>
3.新文档节段和纲要:<header>页面头部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部
使用html5shiv可以解决ie低版本不兼容的问题,只需要在head中加上,当版本低于IE9时,浏览器会加载html5.js脚本,使得支持html5的新功能,也可以将脚本文件下载到本地
浏览器本地存储中
cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据
共同点:
sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
区别
1.cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,localStorage不会自动把数据发给服务器,仅在本地保存
2.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下,存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。localStorage不会自动把数据发给服务器
3.cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据
4.localStorage支持事件通知机制,可以将数据更新的通知发送给监听者。 api 接口使用更方便。而cookie的原生接口不友好,需要程序员自己封装
*******
HTML5中提供了localStorage对象可以将数据长期保存在客户端,除非人为清除,localStorage提供了几个方法:
1.存储:localStorage.setItem(key,value)如果key存在时,更新value
2.获取 localStorage.getItem(key)如果key不存在返回null
3.删除 localStorage.removeItem(key)一旦删除,key对应的数据将会全部删除
4.全部清除 localStorage.clear() 使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
注意:localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M。
富有语义化的新结构元素
标签:
section元素 可以认为div是section元素,一个普通的分块元素,可用来定义网站中的特定的可区别的区域
header元素包括标题,logo,导航和其他页眉的内容,可以在网站上加多个header,就像给内容加多个标题
hgroup元素 即将标题进行分组的元素
footer元素版权声明和作者信息,包涵一些链接
nav元素主要用于主导航菜单
article元素独立成文且以其他格式重用的内容应该置于一个article元素中
aside元素用途包涵内容周围的相关内容
新增的内联元素
figure元素一个典型用途是包含图像,代码和其他内容对主要内容进行说明,删除不会影响主内容
figcaption元素主要用于figure的标题
mark元素突出显示以表示引用的内容,或者突出显示与用户当前活动相关的内容,他不同于en或strong元素
time元素,当需要在内容中显示时间或者日期时,则建议使用time元素
time元素可以包涵两个属性,一个datetime表示在元素中指定的确切日期和世家,pubdate表示文章或者整个文档发布时time元素所指定的日期和时间
支持动态页面
菜单<menu>
**********************************
全新的表单设计
HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
HTML5 的新的表单元素:
datalist
keygen
output
新的 form 属性:
autocomplete
novalidate
新的 input 属性:
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
强大的绘图功能和多媒体功能
1)canvas 可以动态地绘制各种效果精美的图形,结合js就能让网页图形动起来
2)SVG 绘制可伸缩的矢量图形
3)audio和 video 可以不依赖任何插件播放音频和视频
****************************
打造桌面应用的一系列新功能
离线缓存 Web Storage(为HTML5开发移动应用提供了基础)
传统的web应用程序中,数据处理都由服务器处理,html只负责展示数据,cookie只能存储少量的数据,跨域通信只能通过web服务器。
HTML5扩充了文件存储的能力,多达5MB,支持WebSQL等轻量级数据库,可以开发支持离线web应用程序。
HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少网络流量。
同时,这个功能算得上是另一个方向的后台“操作记录”,而不占用任何后台资源,减轻设备硬件压力,增加运行流畅性。
*******
获取地理位置信息
新增Geolocation API,可以通过浏览器获取用户的地理位置,不再需要借助第三方地址数据库或专业的开发包,提供很大的方便。
*******
支持多线程
新增Web Worker对象,可以在后台运行js脚本,也就是支持多线程,从而提高了页面加载效率。