HTML5_CSS3

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

是什么
HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。
新特性
1.语义特性：HTML5增加了许多新标签，可以赋予网页更好的意义和价值。使文档语义化。
2.本地存储特性：基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。
3.设备兼容特性：HTML5提供了更多的数据和应用接口，使外部应用可以直接与浏览器内部的数据直接相连。例如视频影音可直接与摄像头相联。
4.连接特性： HTML5有更有效的连接工作效率，使得基于页面的实时聊天技术、更快速的网页游戏体验，更优化的在线交流得到实现。
5.网页多媒体特性：HTML5支持了网页端的Audio、Video等多媒体功能。同时也提供了基于SVG,Cancas,WebGL及CSS3的3D功能。
6.性能与集成特性：HTML5通过XMLHttpRequest2等技术，更好的解决了跨域等问题。
7.CSS3特性：CSS3提供了更多的风格和更强的效果。
新增标签
header, hgroup, nav, section, article, details, figure, figcaption, aside, time, mark, audio, video, source, track, bdi, canvas, command, datalist, summary, embed, keygen, meter, output, progress, rp, rt, ruby
如何让低版本的 IE 支持 HTML5新标签

    
//如果版本小于IE9就引入html5shiv.js，IE9以前的浏览器就能使用h5标签，
并使用定义好的样式了。这个标签必须放在head标签内，因为浏览器要在解析之前知道这个元素。

//也可以直接声明

2： input 有哪些新增类型？

1.email类型（不是一个有效的email地址，不允许提交该表单）

2.url类型（输入正确的url）

3.date输入类型（弹出一个日历小挂件）

4.time输入类型（允许输入一个24小时格式的时间并验证）

5.datetime类型

6.month输入类型（允许输入和验证一个月份）

7.week输入类型（允许输入和验证一个周数）

8.number输入类型

9.range输入类型（显示一个滑块条）

10.search输入类型

11.tel输入类型（定义输入电话号码字段）

12.color输入类型(允许用户通过选取器输入一个颜色值）

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

Cookie
Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
localStorage
localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储。localStorage是windows的一个对象。
异同
共同点：都是保存在浏览器端，且同源的
不同点：
1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
localStorage不会自动把数据发给服务器，仅在本地保存。虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据，除非主动删除数据，否则数据是永远不会过期的。；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
3.Cookie有个数限制（各浏览器不同）；LocalStorage总体数量无限制
清除数据分为一次性清除和个别清除。
一次性清除：使用localStorage.clear()，使用clear()方法会所有保存数据都清除掉，因此此操作是危险性的，除非你真想这么做。
个别清除：使用storage.removeItem(keyName),如何个别清除？这个要看你如何去遍历数据、设定条件，然后执行此操作。

4：CSS3效果的简单事例

效果

5：全屏图加过渡色的效果

demo

6：loading 动画效果

demo1
demo2