HTML5和CSS3相关

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 ，定义音频，
video ，定义视频，
source ，定义多媒体资源，,media属性目前还未支持
embed ，定义嵌入插件，
track ，给audio之类的媒介规定外部文本轨道，如给视频添加字幕文件，
datalist ，与 input 组合使用，用于定义 input 可能的值
keygen ，表单提交时生成一个秘钥存在本地
output ，定义不同类型的输出
article ，语义化标签，类比
aside ，语义化标签，和article配合使用
bdi ，双向隔离元素，会隔离可能以不同方向进行格式化的外部文本
wbr ，如果文字需要换行，这个标签定义在何处换行
还有很多语义化标签：command 定义按钮；dialog 定义对话框；header ；footer ；nav ；time ；

如何让低版本的 IE 支持 HTML5新标签

方法一，在head标签里面写JS，创建这些标签就好了，如，document.createElement('nav')
方法二，使用html5shiv

因为自定义新标签浏览器会默认设为 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轴缩放？倍 */
  /* 这里的"?"为倍数，01 为放大*/

  /* 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 设置动画无限循环，也可以换成数值表示循环次数*/
}