HTML5_CSS3

1： HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持?

HTML5 是 HTML 的第五次重大修改，设计目的是为了在移动设备上支持多媒体。
新特性：

语义特性：HTML5增加了许多新标签，可以赋予网页更好的意义和价值。使文档语义化。
本地存储特性：基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。
HTML5 提供了两种在客户端存储数据的新方法：
1. localStorage - 没有时间限制的数据存储
2. sessionStorage - 针对一个 session 的数据存储
设备兼容特性：HTML5提供了更多的数据和应用接口，使外部应用可以直接与浏览器内部的数据直接相连。例如视频影音可直接与摄像头相联。
连接特性： HTML5有更有效的连接工作效率，使得基于页面的实时聊天技术、更快速的网页游戏体验，更优化的在线交流得到实现。
网页多媒体特性：HTML5支持了网页端的Audio、Video等多媒体功能。同时也提供了基于SVG,Cancas,WebGL及CSS3的3D功能。
性能与集成特性：HTML5通过XMLHttpRequest2等技术，更好的解决了跨域等问题。

新增标签
1. 章节
- 定义一个文章区域
- 定义一个文档头部部分
- 定义一个文档底部
- 定义了文档的某个区域
- 定义其所处内容之外的内容。（侧边栏）
- 定义了用户可见的或者隐藏的需求的补充细节。
- 定义一个对话框或者窗口
- 定义一个可见的标题。当用户点击标题时会显示出详细信息。
  2.多媒体
- 定义多媒体资源
- 定义嵌入的内容，比如插件
- 为诸如
- 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
- 规定用于表单的密钥对生成器字段。
- 定义不同类型的输出，比如脚本的输出。
让低版本的 IE 支持 HTML5新标签
方法1：

上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。

方法2.在hmtl 加入（推荐）
除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外，你也可以以下面这种方式把代码直接添加到网页中

2.input 有哪些新增类型？

新增类型	含义
	可以调出浏览器的调色板选择喜欢的颜色
	出现一个日期选择器选择一个日期
	datetime 类型允许你选择一个日期（UTC 时间）
	datetime-local 类型允许你选择一个日期和时间 (无时区)
	提交的时候会自动验证email输入正不正确，相当于自动帮我们做了个正则
	month 类型允许你选择一个月份
	提供一个列表选择数字，可以设定对所接受的数字的限定
	range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
	search 类型用于搜索域，比如站点搜索或 Google 搜索
	定义输入电话号码字段
	定义可输入时间控制器（无时区）
	url类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
	week 类型允许你选择周和年。

3. 浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。

Cookie

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。

sessionStorage

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。 sessionStorage 可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

三者异同：

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	5MB	5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景

Cookie 应用场景: 判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录。
localStorage 接替了 Cookie 保存用户在电商网站的购物车信息，同时也用于保存HTML5游戏产生的一些本地数据。
如果遇到一些内容特别多的表单，为了优化用户体验，将把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。
```
localStorage.setItem('name', 'nick');//存储
localStorage.getItem("name"); //获取
localStorage.removeItem("name");//删除
localStorage.clear() 删除 localStorage 存储的数据
```

参考资料
what is the difference between localStorage, sessionStorage, session and cookie?
HTML5 localStorage security
维基百科 - CookieWeb Storage API
浏览器本地数据（sessionStorage、localStorage、cookie）与server端数据
HTMl5的sessionStorage和localStorage
HTML5 LocalStorage 本地存储

4.写出 CSS3效果的简单事例。

展示

5. 实现全屏图加过渡色的效果。

展示

6.写出 loading 动画效果。

展示1
展示2