题目1： HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签
HTML5简介
HTML的英文全称为Hyper Text Markup Language，即超文本标记语言。HTML5是HTML的一个新版本。
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。
HTML5新特性
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
HTML5 的改进
- 新元素
- 新属性
- 完全支持 CSS3
- Video 和 Audio
- 2D/3D 制图
- 本地存储
- 本地 SQL 数据
- Web 应用
HTML5 多媒体
HTML5 应用
- 使用 HTML5 你可以简单地开发应用-本地数据存储
- 访问本地文件
- 本地 SQL 数据
- 缓存引用
- Javascript 工作者
- XHTMLHttpRequest 2
HTML5 图形
- 使用 HTML5 你可以简单的绘制图形:
- 使用 <canvas> 元素。
- 使用内联 SVG。
- 使用 CSS3 2D 转换、CSS3 3D 转换。
HTML5 使用 CSS3
- 圆角， 圆形
- div 阴影
- 2D 转换：放大、缩小、偏移、旋转
- 3D 转换：移动、旋转
- 背景色渐变
- 过渡效果
- 动画
HTML5 添加了很多语义元素如下所示：
| 标签 | 描述 |
|---|---|
| <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> | 规定在文本中的何处适合添加换行符。 |
HTML5 浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：
<!--[if lt IE9]><script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->
载入后，初始化新标签的CSS：
/*html5*/article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
题目2： input 有哪些新增类型？
- email类型（不是一个有效的email地址，不允许提交该表单）
<input type=”email”/>
- url类型（输入正确的url）
<inputy type=”url”/>
- date输入类型（Opera上弹出一个日历小挂件）
<input type=”date”/>
- time输入类型（允许输入一个24小时格式的时间并验证）
<input type=”time”/>
- datetime类型
<input type=”datetime”/>
- month输入类型（允许输入和验证一个月份，Opera弹出小挂件）
<input type=”month”/>
- week输入类型（允许输入和验证一个周数，Opera弹出小挂件）
<input type=”week”/>
- number输入类型
<input type=”number”/>
- range输入类型（显示一个滑块条）
<input type=”range”/>
- search输入类型
<input type=”search”/>
- tel输入类型（没有特殊的验证）
<input type=”tel”/>
- color输入类型(允许用户通过选取器输入一个颜色值。目前，它只有BlackBerry上实现了。)
<input type=”color”/>
题目3： 浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。
Cookie
Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
localStorage
localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。
特性 |Chrome |Firefox (Gecko) |Internet Explorer |Opera |Safari (WebKit)
---|---|
localStorage |4 |3.5 |8 |10.50 |4
sessionStorage |5 |2 |8 |10.50 |4
sessionStorage
sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
三者的异同
localStorage和sessionStorage的方法
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
setItem存储value
用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
getItem获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem删除key
用途：删除指定key本地存储的值
用法：.removeItem(key)
代码示例：
sessionStorage.removeItem("key"); localStorage.removeItem("site");
clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()
代码示例：
sessionStorage.clear(); localStorage.clear();
题目4： 写出如下 CSS3效果的简单事例
1. 圆角， 圆形
2. div 阴影
3. 2D 转换：放大、缩小、偏移、旋转
4. 3D 转换：移动、旋转
5. 背景色渐变
6. 过渡效果
7. 动画
