1、 HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签
-
HTML5是什么？
1、HTML5 是对 HTML 标准的第五次修订，2014年10月29日标准规范制定完成。
2、HTML5的设计目的是为了在移动设备上支持多媒体。
3、HTML5赋予网页更好的意义和结构。 -
有哪些新特性？
1、语义：能够让你更恰当地描述你的内容是什么。
2、连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
3、离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
4、多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
5、2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
6、性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
7、设备访问 Device Access：能够处理各种输入和输出设备。
8、样式设计: 让作者们来创作更加复杂的主题吧！ - 新增标签？
| 元素 | 描述 |
|---|---|
| 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新标签
1、简单的办法是创建元素，然后添加css属性。
(function() {
// 页面头部
var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */];
for (var i = 0, j = a.length; i < j; i++) {
document.createElement(a[i]);
}
})();
//或者用数组：
function createHtml5Mark(){
// arguments 序列化，成为真下的数组
var args = Array.prototype.slice.call(arguments,0);
argLen = args.length,
doc = document;
// 循环数据创建元素
for(var i=0;i<argLen;i++){
doc.createElement(args[i]);
}
}
createHtml5Mark('article','aside','details','figcaption','figure','footer','header','hgroup','nav','section');
同时，需要在css添加属性：
section,article,nav,header,footer{display:block;}
2、我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:
将以下代码放在<head>中
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
2、input 有哪些新增类型？
| 类型 | 含义 |
|---|---|
| color | 用于指定颜色的控件。 |
| date | 用于输入日期的控件（年，月，日，不包括时间）。 |
| datetime | 基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。 |
| datetime-local | 用于输入日期时间控件，不包含时区。 |
| 用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。 | |
| month | 用于输入年月的控件，不带时区。 |
| number | 用于输入浮点数的控件。 |
| range | 用于输入不精确值控件。 |
| search | 用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。 |
| tel | 用于输入电话号码的控件；换行会被自动从输入的值中移除A,，but no other syntax is enforced。可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候，可以应用 :valid 和 :invalid CSS 伪类。 |
| time | 用于输入不含时区的时间控件。 |
| url | 用于编辑URL的字段。 The user may enter a blank or invalid address. 换行会被自动从输入值中移队。可以使用如：pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。 |
| week | 用于输入一个由星期-年组成的日期，日期不包括时区。 |
3、 浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。
- cookie是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
- 而localStorage不会自动把数据发给服务器，仅在本地保存。localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
- 数据生命周期不同，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 。
- localStorage Storage接口的实现，它没有到期时间，可以通过JavaScript来清除，或者通过清除浏览器缓存（Browser Cache ）/本地存储数据（Locally Stored Data）来清除。
4、写出如下 CSS3效果的简单事例
- 圆角， 圆形 2. div 阴影 3. 2D 转换：放大、缩小、偏移、旋转 4. 3D 转换：移动、旋转 5. 背景色渐变 6. 过渡效果 7. 动画
预览
（注意：1、当rotate旋转时，坐标系也跟着转的。2、transform多值时，translateZ要写在rotate后面的，注意transform多值的时候的顺序问题）
5、实现如下全屏图加过渡色的效果（具体效果随意）DEMO188
6、写出如下 loading 动画效果 DEMO1197 DEMO2183
(mission 7)
