HTML5简介

HTML5 是超文本标记语言的第五次重大修改，2014年制定完成的
设计目的是为了在移动设备上支持多媒体
增加了更多语义化的标签，赋予网页更好的意义和结构

HTML5新特性

语义特性:引入了更多语义化的标签
本地存储特性:基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度
设备兼容特性:外部设备可以直接与内部数据相连，比如视频影音可以直接和 microphones 和摄像头相连
连接特性:提高了连接效率，实现了在线视频聊天，优化了页游
网页多媒体特性:支持网页端的Audio、Video等多媒体功能,三维、图形及特效特性,基于SVG、Canvas、WebGL及CSS3的3D功能
性能与集成特性:HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题
CSS3 特性:CSS3 提供了更多酷炫了样式，比如阴影、动画、3D效果

新增元素

元素	描述
canvas	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
audio	定义音频内容
video	定义视频（video 或者 movie）
source	定义多媒体资源 video 和audio
embed	定义嵌入的内容，比如插件
track	为诸如 video 和 audio 元素之类的媒介规定外部文本轨道
datalist	定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值
keygen	规定用于表单的密钥对生成器字段
output	定义不同类型的输出，比如脚本的输出
article	定义页面正文内容
aside	定义页面内容之外的内容
bdi	设置一段文本，使其脱离其父元素的文本方向设置
command	定义命令按钮，比如单选按钮、复选框或按钮
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含 details 元素的标题
figure	规定独立的流内容（图像、图表、照片、代码等等）
figcaption	定义 figure 元素的标题
footer	定义 section 或 document 的页脚
header	定义了文档的头部区域
mark	定义带有记号的文本
meter	定义度量衡。仅用于已知最大和最小值的度量
nav	导航
progress	定义任何类型的任务的进度
ruby	定义 ruby 注释（中文注音或字符）
rt	定义字符（中文注音或字符）的解释或发音
rp	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容
section	定义文档中的节（section、区段）
time	定义日期或时间
wbr	规定在文本中的何处适合添加换行符

低版本IE支持HTML5

使用 html5shiv ，把 HTML5 的新标签转化成低版本IE认识的内容。方法是在 head 中加入代码

1
2
3

<!--if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

必须把这段代码加载head头部，因为要在解析 HTML 之前就识别新标签，才能起作用

另外，要在CSS中加上以下代码，不然可能会出现莫名其妙的问题

1
2
3

header,nav,article,section,aside,footer {
  display: block;
}

例子未完待续……

input新增类型

email:用于应该包含 e-mail 地址的输入域
url:用于应该包含 URL 地址的输入域
number:用于应该包含数值的输入域
range:用于应该包含一定范围内数字值的输入域(显示为滑动条)
Date pickers:拥有多个可供选取日期和时间的新输入类型
- date:选取日、月、年
- month:选取月、年
- week:选取周和年
- time:选取时间（小时和分钟）
- datetime:选取时间、日、月、年（UTC 时间）
- datetime-local:选取时间、日、月、年（本地时间）
search:用于搜索域，比如站点搜索或 Google 搜索
color:用在input字段主要用于选取颜色

例子未完待续……

在客户端存储数据
HTML5数据不是由每个服务器请求传递的，而是只有在请求时使用数据

Cookie 的翻译是“小甜饼”，可想而知，Cookie 是一个非常小的数据（4K左右），主要用来保存用户的登陆信息，这样用户在同一域名下的页面不用再重复登陆了。“记住密码”功能就是保存在了Cookie中

localStorage

localStorage 是 HTML5 标准新加的技术，用来本地存储数据，它比Cookie大的多（5M左右），除非主动去清除，否则永久保存。当然，如果保存的东西满了，就会报错。localStorage 接替了部分 Cookie 的工作，比如管理购物车

sessionStorage

sessionStorage 与 localStorage 接口类似，但是数据的生命周期不同。session 的翻译是“会话”，意味着数据只在当前会话中保存着，刷新页面数据依旧存在，但是关闭页面数据就会被清空。应用是：内容特别多的表单，为了用户体验，拆分成多个子页面，每个页面的信息就可以临时保存在 sessionStorage 中了

区别

特性	Cookie	localStorage	sessionStorage
数据生命周期	一般由服务器生成，可设置失效时间，如果在浏览器中生成，默认是关闭浏览器后失效	除非主动清空，否则永久保存	仅当前会话下有效，关闭页面或浏览器就会删除
存放数据大小	4K左右	5M左右	5M左右
与服务器端的通信	每次都会携带在 http 头中，所以 Cookie 过多，会带来性能问题	仅在客户端（浏览器）中保存，不参与服务器的通信	仅在客户端（浏览器）中保存，不参与服务器的通信
应用	记住密码	管理购物车	临时保存表单信息

安全性

数据保存在 Cookie、localStorage、sessionStorage 都要注意 XSS 漏洞的风险。（XSS 漏洞是渲染的文本内有

HTML5简介

HTML5新特性

新增元素

低版本IE支持HTML5

input新增类型

Cookie、localStorage、sessionStorage

Cookie

localStorage

sessionStorage

区别

安全性