HTML5_CSS3

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

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

新特性

增加了对多媒体的支持
标签更加语义化
增加了本地存储功能
新增与设备相关的功能，如：定位，调用摄像头
新增了更有效的服务器推送技术（Server-Sent Event和Websockets）
提高性能（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无效

<!--[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]-->

<!--[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 有哪些新增类型？

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

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

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

cookie的名称
cookie的值
cookie的过期时间
cookie所属的域名（默认为当前域名）
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天后过期，可以这样实现：代码如下:
<script language="JavaScript" type="text/javascript"> </script>

删除cookie

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

<script language="JavaScript" type="text/javascript"> 
<!-- 
//获取当前时间 
var date=new Date(); 
//将date设置为过去的时间 
date.setTime(date.getTime()-10000); 
//将userId这个cookie删除 
document.cookie="userId=828; expires="+date.toGMTString(); 
//--> 
</script>

指定可访问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效果的简单事例

圆角，圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background: red;
    }
    .circle {
        border-radius: 50%;
    }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box circle"></div>
</body>
</html>

div 阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background: red;
        box-shadow: 12px 10px blue inset;
    }
    
    </style>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        text-align: center;
    }
    .box {
        display: inline-block;
        margin-top: 200px;
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background: red;
        transition: all 0.5s;
    }
    .box:hover {
        /*transform: scale(2); 放大*/ 
        /*transform: scale(0.5);缩小*/
        /*transform: translate(300px);偏移*/
        /*transform: rotate(45deg);旋转*/
        transform: rotate(45deg);
    }
    
    </style>
</head>
<body>
    <div class="box">我是文字</div>
    
</body>
</html>

3D 转换：移动、旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        text-align: center;
    }
    .box {
        position: relative;
        display: inline-block;
        margin-top: 200px;
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background: red;
        perspective: 100px;
        perspective-origin: 0 0;
        transform-origin: 0 0;
        animation: 2s rotate linear infinite;
    }
    
    @keyframes move {
        0% {
           transform: translateY(0px);
        }
        50% {
            transform: translateY(100px);
        }
        100% {
            transform: translateY(0px);
        }
    }
    @keyframes rotate {
        0% {
           transform: rotate(0);
           
        }
        50% {
            transform: rotate(180deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
    </style>
</head>
<body>
    <div class="box">我是文字</div>
    
</body>
</html>

动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        text-align: center;
    }
    .box {
        position: relative;
        display: inline-block;
        margin-top: 200px;
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background: red;
        perspective: 100px;
        perspective-origin: 0 0;
        transform-origin: 0 0;
        animation: 3s change linear infinite;
    }
    
    @keyframes change {
        0% {
           background: red;
        }
        50% {
            background: purple;
        }
        75% {
            background: blue;
        }
        100% {
            background: red;
        }
    }
    
    
    </style>
</head>
<body>
    <div class="box">我是文字</div>
    
</body>
</html>

渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        text-align: center;
    }
    .box {
        position: relative;
        display: inline-block;
        margin-top: 200px;
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background: red;
        perspective: 100px;
        perspective-origin: 0 0;
        transform-origin: 0 0;
        background: linear-gradient(red,blue,purple);
        /*background: radial-gradient(50px 50px at 25px 25px, red, blue);*/
    }
    
    
    
    </style>
</head>
<body>
    <div class="box">我是文字</div>
    
</body>
</html>

过度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        text-align: center;
    }
    .box {
        position: relative;
        display: inline-block;
        margin-top: 200px;
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background: red;
        transition: all 2s;
        
    }
    .box:hover{
        background: purple;
    }
    
    
    
    </style>
</head>
<body>
    <div class="box">我是文字</div>
    
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url(http://book.jirengu.com/jirengu-inc/js-works/css3/bg.jpg) center center no-repeat;
            background-size: cover;
        }
        
        .box:before {
            content: '';
            display: block;
            width: 50%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            background: linear-gradient(to bottom right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
        }
        
        .box:after {
            content: '';
            display: block;
            width: 50%;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom left, rgba(255, 0, 0, 0), rgb(187, 61, 187));
        }
    </style>
</head>

<body>
    <div class="box"></div>

</body>

</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box,
        .box:before,
        .box:after {
            width: 5px;
            height: 30px;
            background: purple;
            animation: 1s load infinite ease-in-out;
        }
        
        .box:before,
        .box:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
        }
        
        .box {
            margin: 50px;
            position: relative;
        }
        
        .box:before {
            left: 10px;
            animation-delay: 0.16s;
        }
        
        .box:after {
            left: 20px;
            animation-delay: 0.32s;
        }
        
        @keyframes load {
            from {
                box-shadow: 0 0 purple;
                height: 30px;
            }
            15% {
                box-shadow: 0 -10px purple;
                height: 40px;
            }
            to {
                box-shadow: 0 0 purple;
                height: 30px;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        background: red;
    }
        .box {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 5px solid purple;
            /*background: purple;*/
            border-bottom: 5px solid #fff;
            margin: 50px;
            position: relative;
            animation: 1s load infinite linear;
        }
        
        @keyframes load {
            from {
                transform: rotate(0);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

最后编辑于：2017.12.07 05:22:37

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,029评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,395评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,570评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,535评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,650评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,850评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,006评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,747评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,207评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,536评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,683评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,342评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,964评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,772评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,004评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,401评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,566评论 2赞 349