HTML5、CSS3

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

HTML5：
是对 HTML 标准的第五次修订，目前仍未完工。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。

新特性:

• 语义化：它能让你更恰当的描述你的内容是什么。
• 连通性：能够让你和服务器之间通过创新的新技术进行通信。
• 离线&储存：能够让网页在客户端本地储存数据以及更高的离线运行。
• 多媒体：使video和audio成为了在所有web中的一等公民。
• 2D/3D绘图&效果：提供了一个更加分化范围的呈现选择。
• 性能&集成：提供了非常显著的性能优化和更有效率的计算机硬件使用。
• 设备访问：能够处理各种输入和输出设备。
• 样式设计：能让作者创造更复杂的主题

新增标签:
<header>、<main>,<footer>,<figure>,<nav>,<aside>,<svg>,<section>,<article>,<canvas>。都是块级元素，主要体现了标签的语义化。

让低版本的 IE 支持
方法一：
引入html5.js

<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->

方法二:
自己添加一段js代码
缺点：部分css无效

1. 
<!--[if lt IE 9]>
        <script>
            (function(){
                var html5 = ["header", "footer", "nav", "section", "article", "aside", "canvas", "audio", "video", "source", "embed", "track", "datalist", "keygen", "output", "bdi", "command", "details", "dialog", "summary", "figure", "figcaption", "mark", "meter", "progress", "ruby", "rt", "rp", "time", "wbr"];
                for(var i = 0; i < html5.length; i++){
                    document.createElement(html5[i]);
                }
            })()
        </script>
<![endif]-->

2. 
<!--[if lt IE 9]>
        <script>
            createHtml5("header", "footer", "nav", "section", "article", "aside", "canvas", "audio", "video", "source", "embed", "track", "datalist", "keygen", "output", "bdi", "command", "details", "dialog", "summary", "figure", "figcaption", "mark", "meter", "progress", "ruby", "rt", "rp", "time", "wbr");
            function createHtml5(){
                var args = Array.prototype.slice.call(arguments, 0);
                for(var i = 0; i < args.length; i++){
                    document.createElement(args[i]);   
                }
            };
        </script>
<![endif]-->

2.input 有哪些新增类型？

1.email
2.url
3.number
4.range
5.Date Picker

• Date
• month
• week
• time
• datatime

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

cookie是网站为了表示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
cookie数据大小不能超过4k。
localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大(跟浏览器相关)。

有效时间：
cookie 设置的cookie在过期时间之前一直有效，即使窗口或浏览器关闭。
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。

浏览器支持：
浏览器都支持cookie
IE9以上才支持localStorage

localStorage 如何存储删除数据：
存储：localStorage.setItem("key", "value")
删除：localStorage.removeItem("key")
读取：localStorage.getItem("key")
清除：localStorage.clear()

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

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

代码链接1

代码链接2

代码链接3