1 HTML5新特性

1.1 概述

HTML5 的新增特性主要是針對(duì)于以前的不足，增加了一些新的標(biāo)簽、新的表單和新的表單屬性等。

這些新特性都有兼容性問題，基本是 IE9+ 以上版本的瀏覽器才支持，如果不考慮兼容性問題，可以大量使用這些新特性。

1.2 語義化標(biāo)簽 （★★）

以前布局，我們基本用 div 來做。div 對(duì)于搜索引擎來說，是沒有語義的。

<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

發(fā)展到了HTML5后，新增了一些語義化標(biāo)簽，這樣的話更加有利于瀏覽器的搜索引擎搜索，也方便了網(wǎng)站的seo（Search Engine Optimization，搜索引擎優(yōu)化），下面就是新增的一些語義化標(biāo)簽

• <header> 頭部標(biāo)簽
• <nav> 導(dǎo)航標(biāo)簽
• <article> 內(nèi)容標(biāo)簽
• <section> 定義文檔某個(gè)區(qū)域
• <aside> 側(cè)邊欄標(biāo)簽
• <footer> 尾部標(biāo)簽

注意：

• 這種語義化標(biāo)準(zhǔn)主要是針對(duì)搜索引擎的
• 這些新標(biāo)簽頁面中可以使用多次
• 在 IE9 中，需要把這些元素轉(zhuǎn)換為塊級(jí)元素
• 其實(shí)，我們移動(dòng)端更喜歡使用這些標(biāo)簽

1.3 多媒體標(biāo)簽

多媒體標(biāo)簽分為 音頻 audio 和視頻 video 兩個(gè)標(biāo)簽 使用它們，我們可以很方便的在頁面中嵌入音頻和視頻，而不再去使用落后的flash和其他瀏覽器插件了。

因?yàn)槎嗝襟w標(biāo)簽的 屬性、方法、事件比較多，因此我們需要什么功能的時(shí)候，就需要去查找相關(guān)的文檔進(jìn)行學(xué)習(xí)使用。

1.3.1 視頻標(biāo)簽- video（★★★）

1.3.1.1 基本使用

當(dāng)前 <video> 元素支持三種視頻格式： 盡量使用 mp4格式

使用語法：

 <video src="media/mi.mp4"></video>

1.3.1.2 兼容寫法

由于各個(gè)瀏覽器的支持情況不同，所以我們會(huì)有一種兼容性的寫法，這種寫法了解一下即可

<video  controls="controls"  width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的瀏覽器暫不支持 <video> 標(biāo)簽播放視頻
</ video >

上面這種寫法，瀏覽器會(huì)匹配video標(biāo)簽中的source，如果支持就播放，如果不支持往下匹配，直到?jīng)]有匹配的格式，就提示文本

1.3.1.3 video 常用屬性

屬性很多，有一些屬性需要大家重點(diǎn)掌握：

• autoplay 自動(dòng)播放
  • 注意： 在google瀏覽器上面，默認(rèn)禁止了自動(dòng)播放，如果想要自動(dòng)播放的效果，需要設(shè)置 muted屬性
• width 寬度
• height 高度
• loop 循環(huán)播放
• src 播放源
• muted 靜音播放

示例代碼：

<video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>

1.3.2 音頻標(biāo)簽- audio

1.3.2.1 基本使用

當(dāng)前 元素支持三種視頻格式： 盡量使用 mp3格式

使用語法：

<audio src="media/music.mp3"></audio>

1.3.2.2 兼容寫法

由于各個(gè)瀏覽器的支持情況不同，所以我們會(huì)有一種兼容性的寫法，這種寫法了解一下即可

< audio controls="controls"  >
    <source src="happy.mp3" type="audio/mpeg" >
    <source src="happy.ogg" type="audio/ogg" >
    您的瀏覽器暫不支持 <audio> 標(biāo)簽。
</ audio>

上面這種寫法，瀏覽器會(huì)匹配audio標(biāo)簽中的source，如果支持就播放，如果不支持往下匹配，直到?jīng)]有匹配的格式，就提示文本

1.3.2.3 audio 常用屬性

示例代碼：

<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

1.4 小結(jié)

• 音頻標(biāo)簽和視頻標(biāo)簽使用方式基本一致
• 瀏覽器支持情況不同
• 谷歌瀏覽器把音頻和視頻自動(dòng)播放禁止了
• 我們可以給視頻標(biāo)簽添加 muted 屬性來靜音播放視頻，音頻不可以（可以通過JavaScript解決）
• 視頻標(biāo)簽是重點(diǎn)，我們經(jīng)常設(shè)置自動(dòng)播放，不使用 controls 控件，循環(huán)和設(shè)置大小屬性

1.5 新增的表單元素 （★★）

在H5中，幫我們新增加了很多類型的表單，這樣方便了程序員的開發(fā)

課堂案例：在這個(gè)案例中，熟練了新增表單的用法

案例代碼：

<!-- 我們驗(yàn)證的時(shí)候必須添加form表單域 -->
<form action="">
    <ul>
        <li>郵箱: <input type="email" /></li>
        <li>網(wǎng)址: <input type="url" /></li>
        <li>日期: <input type="date" /></li>
        <li>時(shí)間: <input type="time" /></li>
        <li>數(shù)量: <input type="number" /></li>
        <li>手機(jī)號(hào)碼: <input type="tel" /></li>
        <li>搜索: <input type="search" /></li>
        <li>顏色: <input type="color" /></li>
        <!-- 當(dāng)我們點(diǎn)擊提交按鈕就可以驗(yàn)證表單了 -->
        <li> <input type="submit" value="提交"></li>
    </ul>
</form>

常見輸入類型

text password radio checkbox button file hidden submit reset image

新的輸入類型

類型很多，我們現(xiàn)階段重點(diǎn)記憶三個(gè)： number tel search

可以通過以下設(shè)置方式修改placeholder里面的字體顏色：

input::placeholder {
    color: pink;
}

2 CSS3新特性

2.1 CSS3 的現(xiàn)狀

• 新增的CSS3特性有兼容性問題，ie9+才支持
• 移動(dòng)端支持優(yōu)于 PC 端
• 不斷改進(jìn)中
• 應(yīng)用相對(duì)廣泛
• 現(xiàn)階段主要學(xué)習(xí)：新增選擇器和盒子模型以及其他特性

2.2 CSS3 新增選擇器

CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標(biāo)元素。

• 屬性選擇器
• 結(jié)構(gòu)偽類選擇器
• 偽元素選擇器

2.2.1 屬性選擇器（★★）

屬性選擇器，按照字面意思，都是根據(jù)標(biāo)簽中的屬性來選擇元素

示例代碼：

 /* 只選擇 type =text 文本框的input 選取出來 */
input[type=text] {
    color: pink;
}
/* 選擇首先是div 然后 具有class屬性 并且屬性值 必須是 icon開頭的這些元素 */
div[class^=icon] {
    color: red;
}
/* 選擇首先是section 然后 具有class屬性 并且屬性值 必須是 data結(jié)尾的這些元素 */
section[class$=data] {
    color: blue;
}

• 屬性選擇器，按照字面意思，都是根據(jù)標(biāo)簽中的屬性來選擇元素
• 屬性選擇器可以根據(jù)元素特定屬性的來選擇元素。 這樣就可以不用借助于類或者id選擇器
• 屬性選擇器也可以選擇出來自定義的屬性
• 注意：類選擇器、屬性選擇器、偽類選擇器，權(quán)重為 10。

2.2.2 結(jié)構(gòu)偽類選擇器

結(jié)構(gòu)偽類選擇器主要根據(jù)文檔結(jié)構(gòu)來選擇器元素， 常用于根據(jù)父級(jí)選擇器里面的子元素

2.2.2.1 E:first-child

匹配父元素的第一個(gè)子元素E

 <style>
    ul li:first-child{
      background-color: red;
    }
  </style>

  <ul>
    <li>列表項(xiàng)一</li>
    <li>列表項(xiàng)二</li>
    <li>列表項(xiàng)三</li>
    <li>列表項(xiàng)四</li>
  </ul>

E:last-child 則是選擇到了最后一個(gè)li標(biāo)簽

2.2.2.2 E:nth-child(n)（★★★）

匹配到父元素的第n個(gè)元素

• 匹配到父元素的第2個(gè)子元素

  ul li:nth-child(2){}

• 匹配到父元素的序號(hào)為奇數(shù)的子元素

  ul li:nth-child(odd){} odd 是關(guān)鍵字 奇數(shù)的意思（3個(gè)字母 ）

• 匹配到父元素的序號(hào)為偶數(shù)的子元素

  ul li:nth-child(even){} even（4個(gè)字母 ）

• 匹配到父元素的前3個(gè)子元素

  ul li:nth-child(-n+3){}

  選擇器中的 n 是怎么變化的呢？

  因?yàn)?n是從 0 ，1，2，3.. 一直遞增

  所以 -n+3 就變成了

  • n=0 時(shí) -0+3=3
  • n=1時(shí) -1+3=2
  • n=2時(shí) -2+3=1
  • n=3時(shí) -3+3=0
  • ...

一些常用的公式： 公式不是死的，在這里列舉出來讓大家能夠找尋到這個(gè)模式，能夠理解代碼，這樣才能寫出滿足自己功能需求的代碼

常用的結(jié)構(gòu)偽類選擇器是： nth-child(n) {...}

2.2.2.3 E:nth-child 與 E:nth-of-type 的區(qū)別

這里只講明 E:nth-child(n) 和 E:nth-of-type(n) 的區(qū)別 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推導(dǎo)即可

<style>
    ul li:nth-child(2){
      /* 字體變成紅色 */
        color: red;
    }

    ul li:nth-of-type(2){
      /* 背景變成綠色 */
      background-color: green;
    }
  </style>


  <ul>
    <li>列表項(xiàng)一</li>
    <p>亂來的p標(biāo)簽</p>
    <li>列表項(xiàng)二</li>
    <li>列表項(xiàng)三</li>
    <li>列表項(xiàng)四</li>
  </ul>

也就是說：

• E:nth-child(n) 匹配父元素的第n個(gè)子元素E，也就是說，nth-child 對(duì)父元素里面所有孩子排序選擇（序號(hào)是固定的） 先找到第n個(gè)孩子，然后看看是否和E匹配
• E:nth-of-type(n) 匹配同類型中的第n個(gè)同級(jí)兄弟元素E，也就是說，對(duì)父元素里面指定子元素進(jìn)行排序選擇。 先去匹配E ，然后再根據(jù)E 找第n個(gè)孩子

2.2.2.4 小結(jié)

• 結(jié)構(gòu)偽類選擇器一般用于選擇父級(jí)里面的第幾個(gè)孩子
• nth-child 對(duì)父元素里面所有孩子排序選擇（序號(hào)是固定的） 先找到第n個(gè)孩子，然后看看是否和E匹配
• nth-of-type 對(duì)父元素里面指定子元素進(jìn)行排序選擇。 先去匹配E ，然后再根據(jù)E 找第n個(gè)孩子
• 關(guān)于 nth-child（n） 我們要知道 n 是從 0 開始計(jì)算的，要記住常用的公式
• 如果是無序列表，我們肯定用 nth-child 更多
• 類選擇器、屬性選擇器、偽類選擇器，權(quán)重為 10

2.2.3 偽元素選擇器（★★★）(重點(diǎn))

偽元素選擇器可以幫助我們利用CSS創(chuàng)建新標(biāo)簽元素，而不需要HTML標(biāo)簽，從而簡化HTML結(jié)構(gòu)

示例demo

<style>
 div {
     width: 200px;
     height: 200px;
     background-color: pink;
 }
 /* div::before 權(quán)重是2 */
 div::before {
     /* 這個(gè)content是必須要寫的 */
     content: '我';
 }
 div::after {
     content: '小豬佩奇';
 }
</style>
<body>
 <div>
     是
 </div>
</body>

注意：

• before 和 after 創(chuàng)建一個(gè)元素，但是屬于行內(nèi)元素
• 新創(chuàng)建的這個(gè)元素在文檔樹中是找不到的，所以我們稱為偽元素
• 語法： element::before {}
• before 和 after 必須有 content 屬性
• before 在父元素內(nèi)容的前面創(chuàng)建元素，after 在父元素內(nèi)容的后面插入元素
• 偽元素選擇器和標(biāo)簽選擇器一樣，權(quán)重為 1

2.2.3.1 應(yīng)用場景一： 字體圖標(biāo)

在實(shí)際工作中，字體圖標(biāo)基本上都是用偽元素來實(shí)現(xiàn)的，好處在于我們不需要在結(jié)構(gòu)中額外去定義字體圖標(biāo)的標(biāo)簽，通過content屬性來設(shè)置字體圖標(biāo)的 編碼

步驟：

• 結(jié)構(gòu)中定義div盒子
• 在style中先申明字體 @font-face
• 在style中定義after偽元素 div::after
• 在after偽元素中 設(shè)置content屬性，屬性的值就是字體編碼
• 在after偽元素中 設(shè)置font-family的屬性
• 利用定位的方式，讓偽元素定位到相應(yīng)的位置；記住定位口訣：子絕父相

<head>
 ...
 <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>

2.2.3.2 應(yīng)用場景二： 仿土豆效果

把之前的代碼進(jìn)行了改善

步驟：

• 找到之前寫過的仿土豆的結(jié)構(gòu)和樣式，拷貝到自己的頁面中
• 刪除之前的mask遮罩
• 在style中，給大的div盒子（類名叫tudou的），設(shè)置 before偽元素
• 這個(gè)偽元素充當(dāng)?shù)氖钦谡值慕巧?，所以我們不用設(shè)置內(nèi)容，但是需要設(shè)置content屬性，屬性的值為空字符串
• 給這個(gè)遮罩設(shè)置寬高，背景顏色，默認(rèn)是隱藏的
• 當(dāng)鼠標(biāo)移入到 div盒子時(shí)候，讓遮罩顯示，利用 hover 來實(shí)現(xiàn)

<head>
 ...
 <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;
     }

     /* 當(dāng)我們鼠標(biāo)經(jīng)過了 土豆這個(gè)盒子，就讓里面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>

2.2.3.3 應(yīng)用場景三： 清除浮動(dòng)

回憶一下清除浮動(dòng)的方式：

• 額外標(biāo)簽法也稱為隔墻法，是 W3C 推薦的做法。
• 父級(jí)添加 overflow 屬性
• 父級(jí)添加after偽元素
• 父級(jí)添加雙偽元素

額外標(biāo)簽法也稱為隔墻法，是 W3C 推薦的做法

注意： 要求這個(gè)新的空標(biāo)簽必須是塊級(jí)元素

后面兩種偽元素清除浮動(dòng)算是第一種額外標(biāo)簽法的一個(gè)升級(jí)和優(yōu)化。

2.3 盒子模型（★★★）

CSS3 中可以通過 box-sizing 來指定盒模型，有2個(gè)值：即可指定為 content-box、border-box，這樣我們計(jì)算盒子大小的方式就發(fā)生了改變。

可以分成兩種情況：

• box-sizing: content-box 盒子大小為 width + padding + border （以前默認(rèn)的）
• box-sizing: border-box 盒子大小為 width

如果盒子模型我們改為了box-sizing: border-box ， 那padding和border就不會(huì)撐大盒子了（前提padding和border不會(huì)超過width寬度）

2.4 其他特性（★）

2.4.1 圖標(biāo)變模糊 -- CSS3濾鏡filter

filter CSS屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。

語法：

filter:   函數(shù)(); -->  例如： filter: blur(5px);  -->  blur模糊處理  數(shù)值越大越模糊

2.4.2 計(jì)算盒子寬度 -- calc 函數(shù)

calc() 此CSS函數(shù)讓你在聲明CSS屬性值時(shí)執(zhí)行一些計(jì)算。

語法：

width: calc(100% - 80px);

括號(hào)里面可以使用 + - * / 來進(jìn)行計(jì)算

2.5 CSS3 過渡（★★★）

過渡（transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動(dòng)畫或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。

過渡動(dòng)畫： 是從一個(gè)狀態(tài) 漸漸的過渡到另外一個(gè)狀態(tài)

可以讓我們頁面更好看，更動(dòng)感十足，雖然 低版本瀏覽器不支持（ie9以下版本） 但是不會(huì)影響頁面布局。

我們現(xiàn)在經(jīng)常和 :hover 一起 搭配使用。

語法：

transition: 要過渡的屬性  花費(fèi)時(shí)間  運(yùn)動(dòng)曲線  何時(shí)開始;

• 屬性 ： 想要變化的 css 屬性， 寬度高度 背景顏色 內(nèi)外邊距都可以 。如果想要所有的屬性都變化過渡， 寫一個(gè)all 就可以。
• 花費(fèi)時(shí)間： 單位是 秒（必須寫單位） 比如 0.5s
• 運(yùn)動(dòng)曲線： 默認(rèn)是 ease （可以省略）
• 何時(shí)開始：單位是 秒（必須寫單位）可以設(shè)置延遲觸發(fā)時(shí)間 默認(rèn)是 0s （可以省 略）
• 后面兩個(gè)屬性可以省略
• 記住過渡的使用口訣： 誰做過渡給誰加

2.5.1 過渡練習(xí)

步驟：

• 創(chuàng)建兩個(gè)div的盒子，屬于的嵌套關(guān)系，外層類名叫 bar，里層類名叫 bar_in
• 給外層的bar 這個(gè)盒子設(shè)置邊框，寬高，圓角邊框
• 給里層的bar_in 設(shè)置 初試的寬度，背景顏色，過渡效果
• 給外層的 bar 添加 hover事件，當(dāng)觸發(fā)了hover事件 讓里層的bar_in 來進(jìn)行寬度的變化

代碼：

<head>
 ...
 <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>
</head>
<body>
 <div class="bar">
     <div class="bar_in"></div>
 </div>
</body>

3 廣義H5說法 了解

3.1 狹隘H5

3.2 廣義H5

• 廣義的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
• 這個(gè)集合有時(shí)稱為 HTML5 和朋友，通?？s寫為 HTML5 。
• 雖然 HTML5 的一些特性仍然不被某些瀏覽器支持，但是它是一種發(fā)展趨勢。
• HTML5 MDN 介紹：
  https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

  1. 服務(wù)器就是一臺(tái)電腦。因?yàn)槲覀冎饕亲鼍W(wǎng)站，所以我們主要使用wb服務(wù)器。
  2. 服務(wù)器可以分為本地服務(wù)器和遠(yuǎn)程服務(wù)器。
  3. 遠(yuǎn)程服務(wù)器是別的公司為我們提供了一臺(tái)計(jì)算機(jī)。
  4. 我們可以把網(wǎng)站上傳到遠(yuǎn)程服務(wù)器里面，別人就可以通過域名訪問我們的網(wǎng)站了。

  1. 去免費(fèi)空間網(wǎng)站注冊(cè)賬號(hào)。
  2. 記錄下主機(jī)名、用戶名、密碼、域名。
  3. 利用 cutftp 軟件 上傳網(wǎng)站到遠(yuǎn)程服務(wù)器。
  4. 在瀏覽器中輸入域名，即可訪問我們的網(wǎng)站。