HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签
HTML5指的是html的第五次重大修改的版本。
新特性
- 语义特性，语义化标签，赋予网页更好的意义和结构。
- 本地存储特性，Indexed DB是一个基于 JavaScript 的面向对象的数据库，使用索引对数据的高性能搜索，可以储存大量数据。HTML5 Application Cache ，应用程序缓存，可以使网页联网速度更快，启动时间更短，以及离线浏览。
- 设备兼容特性，提供很多接口，使外部应用可以直接与浏览器内部的数据连接。
- 连接特性，更高效的连接工作效率，服务器推送技术，Server-Sent Event和WebSockets。
- 网页多媒体特性，支持网页端的 Audio ，Video 等多媒体功能。
- 性能与集成特性，HTML5通过XMLHttpRequest2 等技术，解决跨域等问题。
- CSS3 特性，可以实现更多效果，animation，transform等新的属性
新标签
- canvas ，定义图形，通过 JavaScript 绘图
- audio ，定义音频，<audio src=" "></audio>
- video ，定义视频，<vidio src=" "></video>
- source ， 定义多媒体资源，<source src=" " type=" " media=" ">,media属性目前还未支持
- embed ，定义嵌入插件，<embed src=" " height=" " width=" " type=" " >
- track ，给audio之类的媒介规定外部文本轨道，如给视频添加字幕文件，
<video src="xxx.mp4" >
<track src="xxx.srt" >
</video> - datalist ，与 input 组合使用，用于定义 input 可能的值
- keygen ，表单提交时生成一个秘钥存在本地
- output ，定义不同类型的输出
- article ，语义化标签，类比<div class="article"></div>
- aside ，语义化标签，和article配合使用
- bdi ， 双向隔离元素，会隔离可能以不同方向进行格式化的外部文本
- wbr ，如果文字需要换行，这个标签定义在何处换行
还有很多语义化标签：command 定义按钮；dialog 定义对话框；header ；footer ；nav ；time ；
如何让低版本的 IE 支持 HTML5新标签
- 方法一，在head标签里面写JS，创建这些标签就好了，如，document.createElement('nav')
- 方法二，使用html5shiv
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
因为自定义新标签浏览器会默认设为 inline ，所以还要根据需求，设置这些标签的display 。
input 有哪些新增类型？
- email ，url ，number ，对输入的内容进行检测，需要是相应的格式输入才能提交
- range ，生成一个滑动条
- 日历组件，date，一个完整的日历组件，mouse，选择年月；week，选择显示年和周数；time ，选择时间；datetime，选择UTC时间；datetime-local ，选择本地时间
浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。
cookie ，web 服务器发送到客户端并储存的一些特定的小量信息，会记录访问者的特定信息，如上次访问的位置，账号密码，停留时间等信息，访问者下次再访问该站时，客户端会连同 URL 和 cookie 一起发送到服务器，服务器会读取 cookie 中的特定信息，在返回的页面中显示出来。
localStorage ，是 HTML5 在客户端储存数据的新方法，相比于 cookie ，可以储存更多的信息，并且可以储存很长时间。每个网页的localStorage储存在不同位置，不能互相访问。
使用 JavaScript 直接操作 localStorage 。
例： http://js.jirengu.com/cojuf/1/edit?html,js,console,output
写一些 CSS3效果的简单事例
圆角，圆形
div {
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 10px; /* 圆角为10px */
}
div {
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50%; /* 圆形 */
}
阴影
div {
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 3px 4px 1px black; /* 对应数值 x ，y ，模糊距离，颜色 */
}
2D 转换：放大、缩小、偏移、旋转
div {
width: 100px;
height: 100px;
background: red;
/* transform: scale(?); 整体等比缩放？倍 */
/* transform: scaleX(?); X轴缩放？倍 */
/* transform: scaleY(?); Y轴缩放？倍 */
/* 这里的"?"为倍数，0<?<1 为缩小，?>1 为放大*/
/* transform: translate(x?,y?); 可以同时设置X,Y的平移 */
/* transform: translateX(?); 沿X轴平移 */
/* transform: translateY(?); 沿Y轴平移 */
/* 这里的"?"为带单位的数值，如：100px*/
/* transform: ratate(30deg) 默认以中心为基点，顺时针旋转30度 */
}
3D 转换：移动、旋转
div {
width: 100px;
height: 100px;
background: red;
transform: perspective(500px) rotateY(60deg) translateZ(100px);
/* perspective 定义3D元素的透视效果, ratateX ，rotateY ，rotateZ 表示绕对应轴旋转*/
/* 和2D位移操作一样，只是多了一个Z轴 */
/* 位移和旋转配合，可以做出如旋转木马类似场景的东西 */
}
背景色渐变
div {
width: 100px;
height: 100px;
/* background: linear-gradient(to top,red,blue,yellow); linear表示线性；to top 表示渐变方向，还可以设置to left，to top right ；
后面的颜色第一个为起始色，最后一个为结束色，中间可以随意添加颜色 */
/* background: radial-gradient(circle,red,blue,yellow); radial表示圆周； 第一个参数有很多设置，shape：circle 和 ellipse ；size：closest-side，closest-corner，farthest-side，farthest-corner；例："sircle at 30px" "sircle farthest-side" */
}
过渡效果
div {
width: 50px;
height: 50px;
background: red;
transition: 1s height, 1s 2s width ease
}
/* "1s" 表示变化时间；这里的 "2s" 是可选参数，表示延时；’ease表示状态变化速度 */
div:hover {
width: 100px;
height: 100px;
}
动画
/*定义动画过程*/
@keyframes animate {
50% {
width: 200px;
background: blue;
}
100% {
width: 100px;
background: red;
}
} /* 设置几个中间状态，写入需要改变的属性 */
div {
width: 100px;
height: 100px;
background: red;
}
div:hover {
animation: 3s animate infinite; /* 调用animate，名字为开始定义的名字；infinite 设置动画无限循环，也可以换成数值表示循环次数*/
}
