HTML5、CSS3

​

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

• HTML5是超文本标记语言的第五次重新修订，2014年10月29日标准规范制定完成。HTML5的设计目的是为了在移动设备上支持多媒体。

• HTML5的新特性：

• 用于绘画：canvas元素

• 用于媒体回访：video和audio元素

• 对本地离线存储的更好支持：localstorage

• 新的语义化标签：article、footer、header、nav、section、figure

• 新的表单控件：calendar、date、time、email、url、search

• 低版本的 IE 支持 HTML5新标签

   //  第一种方法使用html5shiv库
   <!--[if IE]>   <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
   <![endif]--> //  在页面中调用时必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用.
  
   //  第二种方法通过js动态创建元素
    <!--[if IE]>   <script>
       (function(){       var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */]       for(var i = 0; i < a.length; i++){         document.createElement(a[i]);
         }
       })()   </script>
   <![endif]--> //  css属性设置
   section,article,nav,header,footer{display:block;}

2.input有哪些新增类型

• email

• url

• number

• range

• color

• Date Picker

• Date

• month

• week

• time

• datatime

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

• cookie：

• cookie 是服务器保存在浏览器的一小段文本信息

• cookie的组成：

• cookie的名称

• cookie的值

• cookie的过期时间

• cookie所属的域名（默认为当前域名）

• cookie生效的路径（默认为当前网址）

• cookie累计长度限制为4KB，超过的将被忽略IE7和之后的版本最后可以有50个cookie，Firefox最多50个cookie，chrome和Safari没有做硬性限制，IE 和 Opera 会清理近期最少使用的 cookie ， Firefox 会随机清理 cookie 。要实现读取写入移除检测等功能操作cookie，要自己实现。

• 同源策略：

• cookie 还需要指定作用域，不可以跨域调用，只有域命相同和端口相同的网址才可共享cookie设置http-only可禁止javascript读取cookie，用来防止cookie被窃取

• localStorage：

• localStorage是Web Storage的一种，让网页在浏览器端保存数据,存储容量比cookie更大localStorage长期保存数据，下一次访问该网站的时候，可以读取到之前保存的数据。不同浏览器对每个域名的存储上限不同，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的存储空间由一级域名决定，而其他浏览器没有这个限制。也就是说，在Firefox中，a.example.com和b.example.com共享5MB的存储空间。

• 同源策略

• 只有同域的网页才能读取localStorage自带的API存入数据

• 用localStorage.setItem("key", "value")  设置数据

• 用localStorage.getItem("key")  获取某个键名的数据

• 用localStorage.removeItem("key")  删除所保存的数据

• 用localStorage.clear()  清空所有数据

• 但是 cookie 也是不可以或缺的： cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 localStorage 仅仅是为了在本地“存储”数据而生
  详说 Cookie, LocalStorage 与 SessionStorage

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

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

演示

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

演示

6.写出如下 loading 动画效果

演示一
演示二

​