我是HTML5和CSS3（只介紹開發常用的）

1.HTML5相較於HTML

HTML5的新增特性主要是針對以前的不足，增加了一些新的標籤，新的表單，和新的表單屬性等。這些新特性都有兼容性的問題，基本是IE9以上版本的瀏覽器才支持，如果不考慮兼容性問題，可以大量使用這些新特性。

1.1HTML5新增的語義化標籤

< header >:頭部標籤
< nav >:導航標籤
< article >:內容標籤
< section >:定義文檔某個區域
< aside >:側邊欄標籤
< footer >：尾部標籤

1.1.1語義化標籤總結

這種語義化標準主要是針對搜索引擎的
這些新標籤頁面中可以使用多次
在IE9中，我們需要把這些元素轉換成塊級元素
移動端使用這些標籤更多

1.2 HTML5新增的多媒體標籤

1.音頻：< audio >
2.視頻：< video >
使用他們可以很方便的在頁面中嵌入視頻和音頻而不再使用flash和其他瀏覽器

當前元素支持三種視屏格式，簡易儘量使用mp4格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
       <title>HTML5新增視頻標籤</title>
    <style>
        video {
           width: 100%;
        }
    </style>
</head>
<body>
    <video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"  controls></video>
</body>
</html>

動圖太大放不上來就這樣感受一下吧

幾個屬性分別介紹一下
1.src屬性和poster屬性

src屬性這個屬性用於指定視頻的地址，而poster屬性用於指定一張圖片，在當前視頻數據無效時顯示（預覽圖）。
而視頻數據無效可能是視頻正在加載，可能是視頻地址錯誤等。

2. preload屬性

此屬性用於定義視頻是否預加載。屬性有三個可選擇的值：none、metadata、auto。如果不使用此屬性，默認爲auto。

3.autoplay屬性

autoplay屬性用於設置視頻是否自動播放，是一個布爾屬性。當出現時，表示自動播放，去掉是表示不自動播放。

4.loop屬性
是否循環播放，布爾值。

5.controls屬性
用於向瀏覽器指明頁面製作者沒有使用腳本生成播放控制器，需要瀏覽器啓用本身的播放控制欄。
控制欄須包括播放暫停控制，播放進度控制，音量控制等等,如上圖。

音頻和視頻相似，也感受一下不解釋

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>HTML5新增音頻標籤</title>
</head>
<body>
    <audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
</body>
</html>

1.2.1多媒體標籤總結

音頻標籤和視頻標籤的使用方法基本一致
瀏覽器支持情況不同
谷歌瀏覽器把音頻和視頻自動播放禁止了
我們可以把視頻標籤添加muted屬性來靜音播放視頻，音頻不可以（通過js解決）
視屏標籤是重點，我們經常設置自動播放，不使用controls控件，循環和設置大小屬性

1.3 HTML5新增的input屬性

  <!-- 我們驗證的時候必須添加form表單域 -->
    <form action="">
        <ul>
            <li>郵箱: <input type="email" /></li>
            <li>網址: <input type="url" /></li>
            <li>日期: <input type="date" /></li>
            <li>時間: <input type="time" /></li>
            <li>數量: <input type="number" /></li>
            <li>手機號碼: <input type="tel" /></li>
            <li>搜索: <input type="search" /></li>
            <li>顏色: <input type="color" /></li>
            <!-- 當我們點擊提交按鈕就可以驗證表單了 -->
            <li> <input type="submit" value="提交"></li>
        </ul>
    </form>

1.4 HTML5新增表單屬性

<form action="">
            <input type="search" name="sear" id="" required="required" placeholder="請輸入內容" autofocus="autofocus" autocomplete="on">
            <input type="file" name="" id="" multiple="multiple">
            <input type="submit" value="提交">
    </form>

2.CSS3現狀

新增的css3特性有兼容問題，ie9+才支持
移動端支持優化pc端
應用廣泛，不斷改進中

2.1 CSS3 新增選擇器

css3 新增了選擇器可以更加便捷，更加自由的選擇目標元素

屬性選擇器
結構僞類選擇器
僞元素選擇器

2.1.1屬性選擇器

屬性選擇器可以根據元素特定屬性來選擇元素，這樣就不用藉助於類或者id選擇器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增屬性選擇器</title>
    <style>
        /* 必須是input 但是同時具有 value這個屬性 選擇這個元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只選擇 type =text 文本框的input 選取出來 */
        input[type=text] {
            color: pink;
        }
        /* 選擇首先是div 然後 具有class屬性 並且屬性值 必須是 icon開頭的這些元素 */
        div[class^=icon] {
            color: red;
        }
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* 類選擇器和屬性選擇器 僞類選擇器 權重都是 10 */
    </style>
</head>
<body>
    <!-- 1. 利用屬性選擇器就可以不用藉助於類或者id選擇器 -->
    <!-- <input type="text" value="請輸入用戶名">
    <input type="text"> -->
    <!-- 2. 屬性選擇器還可以選擇屬性=值的某些元素 重點務必掌握的 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 屬性選擇器可以選擇屬性值開頭的某些元素 -->
    <div class="icon1">小圖標1</div>
    <div class="icon2">小圖標2</div>
    <div class="icon3">小圖標3</div>
    <div class="icon4">小圖標4</div>
    <div>我是打醬油的</div>
    <!-- 4. 屬性選擇器可以選擇屬性值結尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是誰</section>

</body>
</html>

2.1.2 結構僞類選擇器

結構僞類選擇器主要根據文檔結構來選擇器元素，常用於根據父類選擇器的子元素。

n可以是數字，關鍵字和公式
n如果是數字，就是選擇第幾個元素，裏面數字從1開始，但是第0個元素或者超出了元素的個數會忽略
n可以是關鍵字，even偶數，odd是奇數

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增結構僞類選擇器-nth-child</title>
    <style>
        /* 1.把所有的偶數 even的孩子選出來 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2.把所有的奇數 odd的孩子選出來 */
        ul li:nth-child(odd) {
            background-color: gray;
        }
        /* 3.nth-child(n) 從0開始 每次加1 往後面計算  這裏面必須是n 不能是其他的字母 選擇了所有的孩子*/
        /* ol li:nth-child(n) {
            background-color: pink;
        } */
        /* 4.nth-child(2n)母選擇了所有的偶數孩子 等價於 even*/
        /* ol li:nth-child(2n) {
            background-color: pink;
        }
        ol li:nth-child(2n+1) {
            background-color: skyblue;
        } */
        /* ol li:nth-child(n+3) {
            background-color: pink;
        } */
        ol li:nth-child(-n+3) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1個孩子</li>
        <li>我是第2個孩子</li>
        <li>我是第3個孩子</li>
        <li>我是第4個孩子</li>
        <li>我是第5個孩子</li>
        <li>我是第6個孩子</li>
        <li>我是第7個孩子</li>
        <li>我是第8個孩子</li>
    </ul>
    <ol>
        <li>我是第1個孩子</li>
        <li>我是第2個孩子</li>
        <li>我是第3個孩子</li>
        <li>我是第4個孩子</li>
        <li>我是第5個孩子</li>
        <li>我是第6個孩子</li>
        <li>我是第7個孩子</li>
        <li>我是第8個孩子</li>
    </ol>
</body>

</html>`

結構僞類選擇器總結

結構僞類選擇器一般用於選擇父級裏面的第幾個孩子
nth-child對夫元素裏面所有孩子排序選擇（序號固定）先找到第幾個孩子，然後看是否和E匹配
nth-of-type對父元素裏面指定子元素進行排序選擇，先去匹配E，然後根據E照到第幾個孩子
關於nth-child（n）我們要知道n是從0開始計算的，要記住常用的公式
如果是無序列表，我們肯定用nth-child更多
類選擇器，屬性選擇器，僞類訊擇期權重都爲10

2.1.3僞元素選擇器（重點）

僞元素選擇器可以幫助我們利用css創建新標籤元素，而不需要html標籤，從而簡化html結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <title>僞元素選擇器before和after</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 權重是2 */
        div::before {
            /* 這個content是必須要寫的 */
            /* display: inline-block; */
            content: '我';
            /* width: 30px;
            height: 40px;
            background-color: purple; */
        }
        div::after {
            content: '小豬佩奇';
        }
    </style>
</head>
<body>
    <div>
        是
    </div>
</body>
</html>

僞元素總結

before和after創建一個與元素，屬於行內元素
新創建的元素在文檔樹種是找不到的，所以我們稱爲僞元素
語法：elemennt::before{}
before和 after必須有content屬性
before在父元素內容的前面創建元素，after在父元素內容的後面插入元素
僞元素選擇器和標籤選擇器一樣，權重爲1

2.1.4僞元素使用場景

a.僞元素字體圖標

圖標下載地址

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

<head>
    <meta charset="UTF-8">
    <title>僞元素選擇器使用場景-字體圖標</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?1lv3na');
            src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?1lv3na') format('truetype'),
                url('fonts/icomoon.woff?1lv3na') format('woff'),
                url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\e91e';
            color: red;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

b.顯示隱藏遮罩案例

主要實現效果是頁面正常加載的情況下遮罩層隱藏，當鼠標劃過我們就讓before遮罩層顯示出來

當鼠標劃過顯示遮罩層

tudou:hover::before {
display: block;
}

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

<head>
    <meta charset="UTF-8">
    <title>僞元素選擇器使用場景2-仿土豆網顯示隱藏遮罩案例</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            content: '';
            /* 隱藏遮罩層 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 當我們鼠標經過了 土豆這個盒子，就讓裏面before遮罩層顯示出來 */
        .tudou:hover::before {
            /* 而是顯示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

</html>

c.僞元素清除浮動

1.額外標籤法（隔牆法）
2.父級添加overflow屬性
3.父級添加after僞元素
4.父級添加雙僞元素

必須都是塊級元素

2.2 CSS3盒子模型

css3中可以通過box-sizing來指定盒模型，即可指定爲content-box，border-box，這樣我們計算盒子大小的方式就發生了改變

可以分爲兩種情況：
1.box-sizing:content-box 盒子大小爲width+padding+border（以前默認的）
2.box-sizing：border-box 盒子大小爲width

如果盒子模型我們改爲了box-sizing：border-box，那padding和border就不會撐大盒子了（前提是padding和border不會超過width的寬度）

2.3CSS3濾鏡fiter

將模糊或者顏色偏移等效果應用於元素
filter：函數（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片模糊處理filter</title>
    <style>
        img {
            /* blur是一個函數 小括號裏面數值越大，圖片越模糊 注意數值要加px單位 */
            filter: blur(15px);
        }
        img:hover {
            filter: blur(0);
        }
    </style>
</head>
<body>
   <img src="images/tudou.jpg" alt="">
</body>
</html>

2.4 CSS3過渡

CSS3 過渡是元素從一種樣式逐漸改變爲另一種的效果。
要實現這一點，必須規定兩項內容：指定要添加效果的CSS屬性；指定效果的持續時間。
我們經常使用過渡於：hover一起搭配使用
誰過渡給誰加過渡屬性

後面兩個值經常可以省略

<style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 變化的屬性 花費時間 運動曲線 何時開始; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* 如果想要寫多個屬性，利用逗號進行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多個屬性都變化，屬性寫all就可以了 */
            /* transition: height .5s ease 1s; */
            /* 誰做過渡，給誰加 */
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>

<body>
    <div></div>
</body>

2.4.1 過渡進度條製作

<style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 誰做過渡給誰加 */
            transition: all .7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>

整理的一些HTML5 CSS3面試題

查漏補缺，先試着回憶一下再看答案吧,希望對你有幫助

1.html5有哪些新特性，移除了哪些元素？如何處理html5新標籤的瀏覽器兼容問題？如何區分html和html5？

新特性：
1.拖拽釋放（drag and drop）API
2.語義化內容標籤（header，nav，footer，asider，article，section）
3.音頻，視頻（audion,video）API
4.畫布（canvas）API
5.地理（Geolocation）API
6.本地離線存儲localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
7.seeionStorage的數據在瀏覽器關閉後自動刪除
8.表單控件：calendar,data,time,email,url,search
9.新的技術 webworker,websocket,geolocation

移除的元素：

純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可⽤性產⽣負⾯影響的元素：frame，frameset，noframes；

⽀持HTML5新標籤：
IE8/IE7/IE6⽀持通過 document.createElement ⽅法產⽣的標籤，可以利⽤這⼀特性讓這些瀏覽器⽀持 HTML5 新標籤，瀏覽器⽀持新標籤後，還需要添加標籤默認的樣式（當然最好的⽅式是直接使⽤成熟的框架、
使⽤最多的是html5shim框架）：
< !--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-- >

如何區分：
DOCTYPE聲明新增的結構元素、功能元素

2.CSS3有哪些新特性？

CSS3實現圓⾓（border-radius），陰影（box-shadow）
對⽂字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器多背景 rgba
在CSS3中唯⼀引⼊的僞元素是 ::selection.
媒體查詢，多欄佈局
border-image

3. 本地存儲（Local Storage ）和cookies（儲存在用戶本地終端上的數據）之間的區別是什麼？

Cookies:服務器和客戶端都可以訪問；⼤⼩只有4KB左右；有有效期，過期後將會刪除；
本地存儲：只有本地瀏覽器端可訪問數據，服務器不能訪問本地存儲直到故意通過POST或者GET的通道發送到服務器；每個域5MB；沒有過期數據，它將保留直到⽤戶從瀏覽器清除或者使⽤Javascript代碼移除

4.如何實現瀏覽器之間多個標籤頁面之間的通信
調⽤ localstorge、cookies 等本地存儲⽅式

5.如何對你的網站文件和資源進行優化
文件合併，文件最小化或者文件壓縮，使用cdn託管，使用緩存

6.什麼是響應式設計
低成本實現一套代碼一個網頁在多終端設備下訪問達到一定用戶體驗的開發方式，起佈局會根據終端情況自適應調整達到一定水平的用戶體驗

7.新的html5文檔類型和字符集?
HTML5⽂檔類型：<!doctype html>
HTML5使⽤的編碼< meta charset=”UTF-8”>

8. HTML5 Canvas 元素有什麼⽤？
Canvas 元素⽤於在⽹頁上繪製圖形，該元素標籤強⼤之處在於可以直接在 HTML 上進⾏圖形操作。

9. 用H5+CSS3解決下導航欄最後⼀項掉下來的問題
box-sizing: border-box;
10. CSS3新增僞類有那些？
p :ﬁrst-of-type 選擇屬於其⽗元素的⾸個 < p > 元素的每個 < p > 元素。
p:last-of-type 選擇屬於其⽗元素的最後 < p> 元素的每個 < p> 元素。
p:only-of-type 選擇屬於其⽗元素唯⼀的 < p> 元素的每個 < p> 元素。
p:only-child 選擇屬於其⽗元素的唯⼀⼦元素的每個 < p > 元素。
p:nth-child(2) 選擇屬於其⽗元素的第⼆個⼦元素的每個 < p> 元素。
:enabled、:disabled 控制表單控件的禁⽤狀態。
:checked，單選框或複選框被選中。

10.請⽤CSS實現：一個矩形內容，有投影，有圓角，hover狀態慢慢變透明

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS實現：一個矩形內容，有投影，有圓角，hover狀態慢慢變透明</title>
    <style>
        body{margin:0;padding:0;}
        .m-test{width: 200px;height: 100px;border-radius: 10px;box-shadow: 10px 10px 5px #888888; background-color: pink;transition: 1s; }
        .m-test:hover {opacity: 0;}  
    </style>
</head>
<body>
<div class="m-test">
</div>
 
</body>
</html>

11. 你怎麼來實現⻚面設計圖，你認爲前端應該如何⾼質量完成⼯作? ⼀一個滿屏品字佈局如何設計?
⾸先將頁面劃分爲頭部，body…
實現效果圖是最基本的⼯作，精確到2px；
與設計師，產品經理的溝通和項⽬的參與
做好的頁⾯結構，頁⾯重構和⽤戶體驗
處理hack，兼容、寫出優美的代碼格式優化服務器

12. 知道css有個content屬性嗎？有什麼作用？有什麼應用？
css的content屬性專門應⽤在 before/after 僞元素上，⽤來插⼊⽣成內容。最常見的應⽤是利⽤僞類清除浮動。

 //⼀種常見利⽤僞類清除浮動的代碼
.clearﬁx:after {
    content:"."; //這⾥利⽤到了content屬性
    display:block;   
    height:0;    
    visibility:hidden;     
    clear:both; } 
    .clearﬁx {     
    *zoom:1; }

after僞元素通過 content 在元素的後⾯⽣成了內容爲⼀個點的塊級元素，再利⽤clear:both清除浮動。
　　
知道css計數器（序列數字字符⾃動遞增）嗎？如何通過 css content屬性實現css計數器？
css計數器是通過設置counter-reset 、counter-increment 兩個屬性、及 counter()/ counters()⼀個⽅法配合after / before 僞類實現。

13. 如何在 HTML5 ⻚面中嵌⼊音頻?
HTML 5 包含嵌⼊⾳頻⽂件的標準⽅式，⽀持的格式包括 MP3、Wav 和 Ogg：
< audio controls> < source src="jamshed.mp3" type="audio/mpeg"> Your browser does'nt support audio embedding feature. < /audio>

14. 如何在 HTML5 ⻚面中嵌⼊入視頻？
和⾳頻⼀樣，HTML5 定義了嵌⼊視頻的標準⽅法，⽀持的格式包括：MP4、WebM 和 Ogg：
<video width="450" height="340" controls> <source src="jamshed.mp4" type="video/mp4"> Your browser does'nt support video embedding feature. </video>

15. HTML5 引⼊什麼新的表單屬性？
Datalist datetime output keygen date month week time number range emailurl

16描述一段語義的html代碼吧。
（HTML5中新增加的很多標籤（如：< article>、< nav>、< header>和< footer>等）就是基於語義化設計原則）
< div id=“header”>
< h1>標題< /h1>
< h2>專注Web前端技術< /h2>
< /div>

語義 HTML 具有以下特性：
⽂字包裹在元素中，⽤以反映內容。
例如：
段落包含在 < p> 元素中。
順序表包含在< ol>元素中。
從其他來源引⽤的⼤型⽂字塊包含在 < blockquote >元素中。

HTML 元素不能⽤作語義⽤途以外的其他⽬的。
例如：
< h1>包含標題，但並⾮⽤於放⼤⽂本。
< blockquote>包含⼤段引述，但並⾮⽤於⽂本縮進。
空⽩段落元素 ( < p>< /p> ) 並⾮⽤於跳⾏。

⽂本並不直接包含任何樣式信息。
例如：不使⽤ < font> 或 < center> 等格式標記。
類或 ID 中不引⽤顏⾊或位置。

15.你對標籤語義化的理解
⽹頁使⽤什麼HTML標籤要看這個元素是什麼元素，⽽不是看這個元素像什麼元素。
例如我們⽤h2標籤，是因爲這個元素是⼆級標題，⽽不是因爲它看起來⽐較字體⽐較粗⽐較⼤。

16.HTML5離線存儲方式
localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 數據在瀏覽器關閉後⾃動刪除。

sessionStorage和localStorage的存儲空間更⼤；
sessionStorage和localStorage有更多豐富易⽤的接口；
sessionStorage和localStorage各⾃獨⽴的存儲空間；