HTML5_CSS3

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

HTML5是超文本标记语言的第五次重大修改，2014年10月29日标准规范制定完成。
新特性：

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

新增标签
HTML5新增标签
废弃的元素和属性

让低版本的 IE 支持
html5shiv.js
通过JavaScript 来创建HTML5元素(如 main, header, footer等)。在某种程度上通过JavaScript 创建的元素是 styleable(可样式)的。
在 中引入

html5shiv

2： input 有哪些新增类型？

1. email  输入的邮箱要满足邮箱地址的规范 @
2. url 输入的连接要满足连接的规范 http://...
3. number 输入的是数字才有效，输入其他无效
email、url、number相当于对输入的数值进行正则验证，不符合要求则出现提示框
4. range(拖动选择数值，变成一个百分比条)
5. date (直接生成了一个日历)
    - Date
    - month
    - week
    - time
    - datatime

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 的作用就发挥出来了。

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

4： 写出如下 CSS3效果的简单事例

1. 圆角， 圆形
2. div 阴影
3. 2D 转换：放大、缩小、偏移、旋转
4. 3D 转换：移动、旋转
5. 背景色渐变
6. 过渡效果
7. 动画

圆角 阴影 2D 转换 背景色渐变 过渡效果 动画
3D 转换

5： 为全屏图加过渡色的效果

全屏图加过渡色

6：写出如下 loading 动画效果 DEMO1& DEMO2

loading效果