HTML5和CSS3提升

一.HTML5的新特性

HTML5 的新增特性主要是針對於之前的不足，增長了一些新的標籤、新的表單和新的表單屬性等。

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

些新特性。

 

1.HTML5 新增的語義化標籤

之前佈局，咱們基本用 div 來作。div 對於搜索引擎來講，是沒有語義的。

<div class=「header」> </div>
<div class=「nav」> </div>
<div class=「content」> </div>
<div class=「footer」> </div>

<header>：頭部標籤

<nav>：導航標籤

<article>：內容標籤

<section>：定義文檔某個區域

<aside>：側邊欄標籤

<footer>：尾部標籤

注意：

這種語義化標準主要是針對搜索引擎的

這些新標籤頁面中可使用屢次

在 IE9 中，須要把這些元素轉換爲塊級元素

其實，咱們移動端更喜歡使用這些標籤

 

2.HTML5 新增的多媒體標籤

新增的多媒體標籤主要包含兩個：

音頻：<audio>

視頻：<video>

使用它們能夠很方便的在頁面中嵌入音頻和視頻，而再也不去使用 flash 和其餘瀏覽器插件。

 

HTML5 在不使用插件的狀況下，也能夠原生的支持視頻格式文件的播放，固然，支持的格式是有限的。

 

視頻<video>：

當前 <video> 元素支持三種視頻格式： 儘可能使用 mp4格式

 <video src="文件地址" controls="controls"></video>

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

視頻<video>——常見屬性：

 

音頻<audio>：

當前 <audio> 元素支持三種音頻格式：

<audio src="文件地址" controls="controls"></audio>

< audio controls="controls" >
 <source src="happy.mp3" type="audio/mpeg" >
 <source src="happy.ogg" type="audio/ogg" >
 您的瀏覽器暫不支持 <audio> 標籤。
 </ audio>

常見屬性：

 

 

3.HTML5新增的input類型

 

 

4.HTML5新增的表單屬性

 

 

二.CSS3的新特性

新增選擇器：

1.屬性選擇器

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

 

2.結構僞類選擇器

結構僞類選擇器主要根據文檔結構來選擇器元素， 經常使用於根據父級選擇器裏面的子元素

 

3.結構僞類選擇器

nth-child（n） 選擇某個父元素的一個或多個特定的子元素（重點）

n 能夠是數字，關鍵字和公式

n 若是是數字，就是選擇第 n 個子元素， 裏面數字從1開始…

n 能夠是關鍵字：even 偶數，odd 奇數

n 能夠是公式：常見的公式以下 ( 若是n是公式，則從0開始計算，可是第 0 個元素或者超出了元素的個數會被忽略 )

結構僞類選擇器主要根據文檔結構來選擇器元素， 經常使用於根據父級選擇器裏面的子元素

區別：

nth-child 對父元素裏面全部孩子排序選擇（序號是固定的） 先找到第n個孩子，而後看看是否和E匹配

nth-of-type 對父元素裏面指定子元素進行排序選擇。 先去匹配E ，而後再根據E 找第n個孩子

 

4.僞元素選擇器（重點）

僞元素選擇器能夠幫助咱們利用CSS建立新標籤元素，而不須要HTML標籤，從而簡化HTML結構。

注意：

before 和 after 建立一個元素，可是屬於行內元素

新建立的這個元素在文檔樹中是找不到的，因此咱們稱爲僞元素

語法： element::before {}

before 和 after 必須有 content 屬性

before 在父元素內容的前面建立元素，after 在父元素內容的後面插入元素

僞元素選擇器和標籤選擇器同樣，權重爲 1

 

5.CSS3 盒子模型

CSS3 中能夠經過 box-sizing 來指定盒模型，有2個值：便可指定爲 content-box、border-box，這樣咱們

計算盒子大小的方式就發生了改變。

能夠分紅兩種狀況：

box-sizing: content-box 盒子大小爲 width + padding + border （之前默認的）

box-sizing: border-box 盒子大小爲 width

若是盒子模型咱們改成了box-sizing: border-box ， 那padding和border就不會撐大盒子了（前提padding

和border不會超過width寬度）

 

6.CSS3 其餘特性（瞭解）

圖片變模糊：

filter CSS屬性將模糊或顏色偏移等圖形效果應用於元素。

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

 

計算盒子寬度 width: calc 函數：

calc() 此CSS函數讓你在聲明CSS屬性值時執行一些計算。

width: calc(100% - 80px);

 

7.CSS3 過渡（重點）

過渡（transition)是CSS3中具備顛覆性的特徵之一，咱們能夠在不使用 Flash 動畫或

JavaScript 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。

過渡動畫： 是從一個狀態 漸漸的過渡到另一個狀態

可讓咱們頁面更好看，更動感十足，雖然 低版本瀏覽器不支持（ie9如下版本） 可是不會影響

頁面佈局。

咱們如今常常和 :hover 一塊兒 搭配使用。

transition: 要過渡的屬性 花費時間 運動曲線 什麼時候開始;

屬性 ： 想要變化的 css 屬性， 寬度高度 背景顏色 內外邊距均可以 。若是想要全部的屬性都

變化過渡， 寫一個all 就能夠。

花費時間： 單位是 秒（必須寫單位） 好比 0.5s

運動曲線： 默認是 ease （能夠省略）

什麼時候開始 ：單位是 秒（必須寫單位）能夠設置延遲觸發時間 默認是 0s （能夠省略）