一.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 （可以省略）