1.HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签？
a.HTML5是什么?
HTML的第五次重大修改，于14年10月发布
b.有哪些新特性？
参考文献
1.MDN-HTML5
语义
更加丰富的标签赋予网页更好的意义和结构，如新增的<section>,<nav>,<footer>,<header>,<mark>等标签，允许网页嵌入和操作多媒体内容,如<audio>,<video>标签。通信
HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。离线&存储
Indexed DB（html5本地存储最重要的技术之一）和离线资源规范
-
多媒体
-
<audio>和<video>元素 - WebRTC即时通信技术
- Camera API允许操作摄像头
-
-
图像&视觉
- Canvas
- WebGL
- SVG矢量图
-
性能&集成
- XMLHttpRequest Level2
- 全屏API
……
c.有哪些新增标签？
| 标签 | 描述 |
|---|---|
| canvas | 用于图形的绘制，通过脚本 (通常是JavaScript)来完成 |
| audio | 音频 |
| video | 视频 |
| 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 | 规定在文本中的何处适合添加换行符 |
d.如何让低版本的 IE 支持 HTML5新标签？
使用html5shiv.js。html头部引入它，
<!--[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
< ![endif]-->
再在css中设置下块状元素
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
2.input 有哪些新增类型？
- color
- number
- range
- search
- url
- tel
- 日期(FF,IE不支持)
- date 定义日期字段（带有 calendar 控件）
- datetime-local 定义日期字段（带有 calendar 和 time 控件）
- month 定义日期字段的月（带有 calendar 控件）
- week 定义日期字段的周（带有 calendar 控件）
- time 定义日期字段的时、分、秒（带有 time 控件）
3.浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。
参考文献
1.cookie、sessionStorage、localStorage 详解及应用场景
2.详说 Cookie, LocalStorage 与 SessionStorage
3.MDN-HTTP cookies
a.浏览器本地存储中 cookie 和 localStorage 有什么区别？
cookie: 是服务器发送到用户浏览器并保存在浏览器上的一块数据，它会在浏览器下一次发起请求时被携带并发送到服务器上。
- 生命周期：Session Cookie在浏览器关闭后失效，Permanent Cookie可设置失效时间；
- 数据大小：4k左右
- 与服务器通信：每次发送请求都会携带在http头部
- 应用场景：记录用户登录状态，自定义设置等
localStorage:用于持久化的本地存储
- 生命周期：一直存在，除非被清除
- 数据大小：5M左右
- 与服务器通信：仅在客户端中保存，不参与和服务器的通信
- 应用场景：存储一些很少变化的数据，提高用户体验
b.localStorage 如何存储删除数据。
参考文献
1.使用 Web Storage API
//存储数据
LocalStorage.setItem(keyName, keyValue);
//删除数据
LocalStorage.removeItem(keyName);
4.写出如下 CSS3效果的简单事例
- 圆角， 圆形
- div 阴影
- 2D 转换：放大、缩小、偏移、旋转
- 3D 转换：移动、旋转
- 背景色渐变
- 过渡效果
- 动画
链接
5.实现全屏图加过渡色的效果
Paste_Image.png
6.loading动画
