HTML5和CSS3新特性汇总

1：HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签

HTML5是超文本标记语言的第五次重大修改,目的是为了在移动设备上支持多媒体。

HTML 5的新特性有：

• 新的解析规则增强了灵活性
• 新属性
• 淘汰过时的或冗余的属性
• 一个HTML5文档到另一个文档间的拖放功能
• 离线编辑
• 信息传递的增强
• 详细的解析规则
• 多用途互联网邮件扩展（MIME）和协议处理程序注册
• 在SQL数据库中存储数据的通用标准（Web SQL）

新增标签:

2：input 有哪些新增类型？

新增的input类型：

3：浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。

localStorage的使用

清空localStorage

localStorage.clear()  // undefined   
 localStorage      //Storage {length: 0} 存储数据

存储数据

localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令 
localStorage // Storage{name: "caibin", length: 1} 读取数据

读取数据

localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i<localStorage.length;i++){
  console.log('localStorage里存储的第'+i+'条数据的名字为：'+localStorage.key(i)+',值为：'+localStorage.getItem(localStorage.key(i)));
}

删除某个变量

localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了

检查localStorage里是否保存某个变量

// 这些数据都是测试的，是在我当下环境里的，只是demo哦～
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex') // false

将数组转为本地字符串

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"

将JSON存储到localStorage里

var students = {
  xiaomin: {
    name: "xiaoming",
    grade: 1
  },
  teemo: {
    name: "teemo",
    grade: 3
  }
}
 
students = JSON.stringify(students); //将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里
 
var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象

4：写出如下 CSS3效果的简单事例

    1\. 圆角， 圆形
    2\. div 阴影
    3\. 2D 转换：放大、缩小、偏移、旋转
    4\. 3D 转换：移动、旋转
    5\. 背景色渐变
    6\. 过渡效果
    7\. 动画

demo

5：实现如下全屏图加过渡色的效果（具体效果随意）

DEMO230

Demo

6：写出如下 loading 动画效果

DEMO1236

Demo

DEMO2223

Demo