HTML5_CSS3

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

HTML5是HTML的第五次重大修改版本

新特性

1. 增加了对多媒体的支持
2. 标签更加语义化
3. 增加了本地存储功能
4. 新增与设备相关的功能，如：定位，调用摄像头
5. 新增了更有效的服务器推送技术（Server-Sent Event和Websockets）
6. 提高性能（XMLHttpRequest2）

新增标签

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

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

方法一：

引入html5.js

方法二:

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

2

题目2： input 有哪些新增类型？

email 邮箱地址
url 网址
number 数字
range 表示范围的滑动条
Date 时间
month
week
time
datatime

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

cookie

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

1. cookie的名称
2. cookie的值
3. cookie的过期时间
4. cookie所属的域名（默认为当前域名）
5. cookie生效的路径（默认为当前网址）

cookie累计长度限制为4KB，超过的将被忽略
IE7和之后的版本最后可以有50个cookie
Firefox最多50个cookie
chrome和Safari没有做硬性限制
IE 和 Opera 会清理近期最少使用的 cookie ， Firefox 会随机清理 cookie 。

设置cookie

每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie。
例如：document.cookie="userId=828";
如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开，例如：
document.cookie="userId=828; userName=hulk";。
在cookie 的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的名中做到这点很容易，但要保存的值是不确定的。如何来存储这些值呢？方 法是用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于cookie值中，而且使用此 种方案还可以避免中文乱码的出现。例如： document.cookie="str="+escape("I love ajax"); 相当于document.cookie="str=I%20love%20ajax";。
当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。 尽管document.cookie看上去就像一个属性，可以赋不同的值。但它和一般的属性不一样，改变它的赋值并不意味着丢失原来的值，例如连续执行下面两条语句：如下:
document.cookie="userId=828"; document.cookie="userName=hulk";
这时浏览器将维护两个cookie，分别是userId和userName，因此给document.cookie赋值更像执行类似这样的语句： 代码如下:document.addCookie("userId=828"); document.addCookie("userName=hulk");
事实上，浏览器就是按照这样的方式来设置cookie的，如果要改变一个cookie的值，只需重新赋值，例如：document.cookie="userId=929";这样就将名为userId的cookie值设置为了929。

简单读取cookie

// 读取当前网页的所有cookie(每个cookie以分号分隔)
//数组
var cookies = document.cookie.split(';');

for (var i = 0; i < cookies.length; i++) {
// cookies[i] name=value形式的单个cookie
}

给cookie设置终止日期

所有的cookie都是单会话cookie，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘文件。 在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现： document.cookie="userId=828; expiress=GMT_String"; 其中GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。例如：如果要将cookie设置为10天后过期，可以这样实现： 代码如下:

删除cookie

为了删除一个cookie，可以将其过期时间设定为一个过去的时间

指定可访问cookie的路径

默认情况下，如果在某个页面创建了一个cookie，那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录，则在子目录中也可以访问。
为了控制cookie可以访问的目录，需要使用path参数设置cookie，语法如下： document.cookie="userId=320; path=/shop";就表示当前cookie仅能在shop目录下使用。
如果要使cookie在整个网站下可用，可以将cookie_dir指定为根目录，例如： document.cookie="userId=320; path=/";

指定可访问cookie的主机名

和路径类似，主机名是指同一个域下的不同主机，例如：www.google.com和gmail.google.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制，其语法格式为： document.cookie="name=value; domain=cookieDomain";
以google为例，要实现跨主机访问，可以写为：
document.cookie="name=value;domain=.google.com";
这样，所有google.com下的主机都可以访问该cookie。

同源策略：

cookie 还需要指定作用域，不可以跨域调用，只有域命相同和端口相同的网址才可共享cookie

#######设置http-only可禁止javascript读取cookie，用来防止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

//存入数据用setItem
localStorage.setItem("key", "value")
//读取数据用getItem
localStorage.getItem("key")
//清除某个键名的数据用removeItem
localStorage.removeItem("key")
//清除所保存的数据用clear
localStorage.clear()

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

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

1. 圆角， 圆形

2. div 阴影

3. 2D 转换：放大、缩小、偏移、旋转

    
    
    


    
我是文字
    

4. 3D 转换：移动、旋转

    
    
    


    
我是文字
    

5. 动画

    
    
    


    
我是文字
    

6. 渐变

    
    
    


    
我是文字
    

7. 过度

    
    
    


    
我是文字
    

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

题目6：写出如下 loading 动画效果 DEMO163 DEMO259