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