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無效

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

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天后過期，可以這樣實現： 代碼如下:
<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效果的簡單事例

  1. 圓角， 圓形
<!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>
  1. 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>
  1. 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>
  1. 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>
  1. 動畫
<!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>
  1. 漸變
<!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>
  1. 過度
<!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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.HTML5是什么？有哪些新特性？有哪些新增標簽？如何讓低版本的 IE 支持 HTML5新標簽 HTML5是超文...
    饑人谷_米彌輪閱讀 446評論 0贊 1
  • HTML5是什么？有哪些新特性？有哪些新增標簽？如何讓低版本的 IE 支持 HTML5新標簽 HTML5是最新的H...
    小囧兔閱讀 313評論 0贊 0
  • 1. HTML5是什么？有哪些新特性？有哪些新增標簽？如何讓低版本的 IE 支持 HTML5新標簽 HTML5是超...
    _李祺閱讀 436評論 0贊 0
  • 1. 不管是招聘還是聊天經常能聽到 h5開發，它指的是什么？和 HTML5有什么關系? h5指的是一系列技術做的移...
    進擊的前端_風笑影閱讀 319評論 0贊 0
  • HTML5是什么？有哪些新特性？有哪些新增標簽？如何讓低版本的 IE 支持 HTML5新標簽？ HTML5是HTM...
    LeeoZz閱讀 409評論 0贊 0