css3和html5 新特性,HTML5和CSS3新特性汇总

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

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

HTML 5的新特性有：

新的解析规则增强了灵活性

新属性

淘汰过时的或冗余的属性

一个HTML5文档到另一个文档间的拖放功能

离线编辑

信息传递的增强

详细的解析规则

多用途互联网邮件扩展(MIME)和协议处理程序注册

在SQL数据库中存储数据的通用标准(Web SQL)

新增标签:

标签

定义

canvas

标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

audio

定义音频内容

video

定义视频(video 或者 movie)

source

定义多媒体资源 和

embed

定义嵌入的内容，比如插件

track

为诸如 和 元素之类的媒介规定外部文本轨道

datalist

定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值

keygen

规定用于表单的密钥对生成器字段

output

定义不同类型的输出，比如脚本的输出

article

定义页面正文内容

aside

定义页面内容之外的内容

bdi

设置一段文本，使其脱离其父元素的文本方向设置

command

定义命令按钮，比如单选按钮、复选框或按钮

details

用于描述文档或文档某个部分的细节

dialog

定义对话框，比如提示框

summary

标签包含 details 元素的标题

figure

规定独立的流内容(图像、图表、照片、代码等等)

figcaption

定义

元素的标题

footer

定义 section 或 document 的页脚

header

定义了文档的头部区域

mark

定义带有记号的文本

meter

定义度量衡。仅用于已知最大和最小值的度量

nav

导航

progress

定义任何类型的任务的进度

ruby

定义 ruby 注释(中文注音或字符)

rt

定义字符(中文注音或字符)的解释或发音

rp

在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容

section

定义文档中的节(section、区段)

time

定义日期或时间

wbr

规定在文本中的何处适合添加换行符

2：input 有哪些新增类型？

新增的input类型：

type

定义

email

用于编辑 e-mail 的字段;在提交表单时。

url

用于编辑URL的字段。

number

用于输入浮点数的控件。

range

用于输入不精确值控件。

search

用于输入搜索字符串的单行文本字段。

color

用于指定颜色的控件。

tel

用于输入电话号码的控件.

time

用于输入不含时区的时间控件。

datetime

基于 UTC 时区的日期时间输入控件(时，分，秒及几分之一秒)。

datetime-local

用于输入日期时间控件，不包含时区。

date

用于输入日期的控件(年，月，日，不包括时间)。

week

用于输入一个由星期-年组成的日期，日期不包括时区。

month

用于输入年月的控件，不带时区。

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

特性

Cookie

localStorage

sessionStorage

数据的生命期

可设置失效时间，默认是关闭浏览器后失效

除非被清除，否则永久保存

仅在当前会话下有效，关闭页面或浏览器后被清除

存放数据大小

4K左右

一般为5MB

一般为5MB

与服务器端通信

每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

仅在客户端(即浏览器)中保存，不参与和服务器的通信

仅在客户端(即浏览器)中保存，不参与和服务器的通信

易用性

需要程序员自己封装，源生的Cookie接口不友好

源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

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

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\. 动画

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

6：写出如下 loading 动画效果