H5的新特性

1.語義化標簽

1. 有利於SEO，有助於爬蟲抓取更多的有效信息，爬蟲是依賴於標簽來確定上下文和各個關鍵字的權重。
2. 語義化的HTML在沒有CSS的情況下也能呈現較好的內容結構與代碼結構
3. 方便其他設備的解析
4. 便於團隊開發和維護

2.表單新特性

3.多媒體視頻(video)和音頻(audio)

4.web存儲

1. sessionstorage:關閉瀏覽器清空數據，儲存大小約5M。
2. localstorage：永久生效，存儲大小20M，多窗口下都可以使用
3. 都只能儲存字符串

 

C3的新特性

1.選擇器：屬性選擇器E[attr]，偽類選擇器E:nth-child(n)，空偽類E:empty ，排除偽類E:not(selector)

2.顏色：新增了RGBA、HSLA模式

3.文本：為文本設置陰影增強文本的表現能力，通過 text-shadow，可分別設置偏移量、模糊度、顏色（可設透明度）。

4.盒模型：box-sizing: border-box;

5.邊框：圓角border-radius，陰影box-shadow

6.背景：

1. 通過 background-size 設置背景圖片的尺寸。
2. 通過 background-origin 可以設置背景圖片定位(background-position)的參照原點。
3. 通過background-clip，可以設置對背景區域進行裁切，即改變背景區域的大小。

7.漸變：線性漸變 linear-gradient，徑向漸變radial-gradient

8.字體圖標

9.伸縮盒子：調整主軸對齊justify-content，調整側軸對齊align-items，伸縮分配flex，正序方式排序order

10.2D轉換：

1. translate 設置元素的位置（x/y坐標）
2. scale 設置元素的縮放比例（x/y兩個方向）
3. rotate 設置元素旋轉（正值為順時針，負值為逆時針）
4. transform-origin 設置轉換元素的原點

11.3D轉換：

1. 透視（perspective）值為1000px~1200px
2. 將2D元素轉換為3D立體（給父元素設置）transform-style: perserve-3d;
3. 設置元素背面是否可見 backface-visibility: hidden;

12.動畫：

1. 定義關鍵幀 @keyframes
2. 通過百分編寫幀
3. 在各幀中分別定義各屬性
4. 通過animation將動畫應用於相應元素

 

ES6新特性

1. 變量聲明：let作用:聲明變量，塊級作用域，必須先聲明后使用，在同一個塊內不允許重復命名，沒有變量提升。const作用:聲明常量，聲明的同時必須賦值，不能被重新賦值
2. 解構賦值
3. 模板字符串，支持換行
4. 函數擴展，箭頭函數

本人網站：www.lovemysoul.vip