1. 程式人生 > >H5、C3、ES6的新特性

H5、C3、ES6的新特性

坐標 屬性選擇器 text 支持 動畫 translate con tor lin

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. 函數擴展,箭頭函數

H5、C3、ES6的新特性