H5 和 CSS3 新特性

博客地址：https://ainyi.com/52

H5 新特性

1. 語義化標簽：header、footer、section、nav、aside、article
2. 增強型表單：input 的多個 type
3. 新增表單元素：datalist、keygen、output
4. 新增表單屬性：placehoder、required、min 和 max
5. 音頻視頻：audio、video
6. canvas
7. 地理定位
8. 拖拽
9. 本地存儲：localStorage - 沒有時間限制的數據存儲；sessionStorage - 針對一個 session 的數據存儲，當用戶關閉瀏覽器窗口后，數據會被刪除
10. 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
11. WebSocket：單個 TCP 連接上進行全雙工通訊的協議

語義化標簽

標簽	描述
header	定義了文檔的頭部區域
footer	定義了文檔的尾部區域
nav	定義文檔的導航
section	定義文檔中的節（section、區段）
article	定義頁面獨立的內容區域
aside	定義頁面的側邊欄內容
detailes	用於描述文檔或文檔某個部分的細節
summary	標簽包含 details 元素的標題
dialog	定義對話框，比如提示框

增強型表單

HTML5 擁有多個新的表單 Input 輸入類型。這些新特性提供了更好的輸入控制和驗證

input 的 type	描述
color	主要用於選取顏色
date	從一個日期選擇器選擇一個日期
datetime	選擇一個日期（UTC 時間）
email	包含 e-mail 地址的輸入域
month	選擇一個月份
number	數值的輸入域
range	一定范圍內數字值的輸入域
search	用於搜索域
tel	定義輸入電話號碼字段
time	選擇一個時間
url	URL 地址的輸入域
week	選擇周和年

html5 也新增以下表單元素

表單元素	描述
datalist	元素規定輸入域的選項列表，使用 input 元素的 list 屬性與 datalist 元素的 id 綁定
keygen	提供一種驗證用戶的可靠方法，標簽規定用於表單的密鑰對生成器字段
output	用於不同類型的輸出，比如計算或腳本輸出

html5 新增的表單屬性

表單屬性	描述
placehoder	簡短的提示在用戶輸入值前會顯示在輸入域上。即我們常見的輸入框默認提示，在用戶輸入后消失
required	是一個 boolean 屬性。要求填寫的輸入域不能為空
pattern	描述了一個正則表達式用於驗證 input 元素的值
min 和 max	設置元素最小值與最大值
step	為輸入域規定合法的數字間隔
height 和 width	用於 image 類型的 input 標簽的圖像高度和寬度
autofocus	是一個 boolean 屬性。規定在頁面加載時，域自動地獲得焦點
multiple	是一個 boolean 屬性。規定 input 元素中可選擇多個值

html5 新事件

事件	描述
onresize	當調整窗口大小時運行腳本
ondrag	當拖動元素時運行腳本
onscroll	當滾動元素滾動元素的滾動條時運行腳本
onmousewheel	當轉動鼠標滾輪時運行腳本
onerror	當錯誤發生時運行腳本
onplay	當媒介數據將要開始播放時運行腳本
onpause	當媒介數據暫停時運行腳本

• 塊級元素
  div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5 新增的 header、section、aside、footer 等

• 行內元素
  pan、img、a、lable、input、abbr（縮寫）、em（強調）、big、cite（引用）、i（斜體）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划線）、button

CSS3 新特性

1. 選擇器
2. 背景和邊框
3. 文本效果
4. 2D/3D 轉換
5. 動畫、過渡
6. 多列布局
7. 用戶界面

選擇器

:last-child /* 選擇元素最后一個孩子 */
:first-child /* 選擇元素第一個孩子 */
:nth-child(1) /* 按照第幾個孩子給它設置樣式 */
:nth-child(even) /* 按照偶數 */
:nth-child(odd)  /* 按照奇數 */
:disabled /* 選擇每個禁用的E元素 */
:checked /* 選擇每個被選中的E元素 */
:not(selector) /* 選擇非 selector 元素的每個元素 */
::selection /* 選擇被用戶選取的元素部分 */




偽類和偽元素：

根本區別在於它們是否創造了新的元素（抽象）

• 偽類：用於向某些選擇器添加特殊的效果（沒有創建新元素）

:last-child /* 選擇元素最后一個孩子 */
:first-child /* 選擇元素第一個孩子 */
:nth-child(1) /* 按照第幾個孩子給它設置樣式 */
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */




• 偽元素：創建了 html 中不存在的元素，用於將特殊的效果添加到某些選擇器

::before {} /* 選擇器在被選元素的前面插入內容和定義css，使用 content 屬性來指定要插入的內容。 */
::after {} /* 選擇器在被選元素的后面插入內容和定義css，使用 content 屬性來指定要插入的內容。 */
:first-letter /* 選擇該元素內容的首字母 */
:first-line /* 選擇該元素內容的首行 */
::selection /* 選擇被用戶選取的元素部分 */




背景和邊框

• 背景：
  background-size：規定背景圖片的尺寸（cover：填充；100% 100%：拉伸）
  background-origin：規定背景圖片的定位區域
  對於 background-origin 屬性，有如下屬性
  背景圖片可以放置於 content-box、padding-box 或 border-box 區域

• 邊框：
  border-radius：圓角
  box-shadow / text-shadow：陰影
  border-image：邊框圖片

文本效果

屬性	描述
text-shadow	向文本添加陰影
text-justify	規定當 text-align 設置為 “justify” 時所使用的對齊方法
text-emphasis	向元素的文本應用重點標記以及重點標記的前景色
text-outline	規定文本的輪廓
text-overflow	規定當文本溢出包含元素時發生的事情
text-wrap	規定文本的換行規則
word-break	規定非中日韓文本的換行規則
word-wrap	允許對長的不可分割的單詞進行分割並換行到下一行
text-decoration	文本修飾符：overline、line-through、underline 分別是上划線、中划線、下划線

• @font-face 自定義字體
• 漸變，CSS3新增了漸變效果，包括 linear-gradient(線性漸變)和 radial-gradient(徑向漸變)
  詳看：https://www.ainyi.com/krry_project

2D/3D 轉換

• 2D 轉換（transform）

1. translate()：元素從其當前位置移動，根據給定的 left（x 坐標） 和 top（y 坐標） 位置參數。 transform: translate(50px, 100px);
2. rotate()：元素順時針旋轉給定的角度。若為負值，元素將逆時針旋轉。transform: rotate(30deg);
3. scale()：元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數，也可以一個值（寬高）。transform: scale(2,4);
4. skew()：元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數。transform: skew(30deg, 20deg);
5. matrix()： 把所有 2D 轉換方法組合在一起，需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

 

• 3D 轉換

1. rotateX()：元素圍繞其 X 軸以給定的度數進行旋轉。transform: rotateX(120deg);
2. rotateY()：元素圍繞其 Y 軸以給定的度數進行旋轉。transform: rotateY(130deg);
3. perspective：規定 3D 元素的透視效果

動畫、過渡

• 過渡效果（transition），使頁面變化更平滑，以下參數可直接寫在 transition 后面

1. transition-property ：執行動畫對應的屬性，例如 color，background 等，可以使用 all 來指定所有的屬性。
2. transition-duration：過渡動畫的一個持續時間。
3. transition-timing-function：在延續時間段，動畫變化的速率，常見的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
4. transition-delay：延遲多久后開始動畫

 

• 動畫（animation）
  先定義 @keyframes 規則（0%，100% | from，to）
  然后定義 animation，以下參數可直接寫在 animation 后面

1. animation-name: 定義動畫名稱
2. animation-duration: 指定元素播放動畫所持續的時間長
3. animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根據時間的推進來改變屬性值的變換速率，即動畫的播放方式
4. animation-delay: 指定元素動畫開始時間
5. animation-iteration-count: infinite | number：指定元素播放動畫的循環次數
6. animation-direction: normal | alternate： 指定元素動畫播放的方向，其只有兩個值，默認值為normal，如果設置為 normal 時，動畫的每次循環都是向前播放；另一個值是 alternate，規定動畫在下一周期逆向地播放（來去播放）
7. animation-play-state: running | paused ：控制元素動畫的播放狀態

多列布局

通過CSS3，能夠創建多個列來對文本進行布局

1. column-count: 規定元素應該被分隔的列數
2. column-gap: 規定列之間的間隔
3. column-rule: 設置列之間的寬度、樣式和顏色規則

用戶界面

CSS3中，新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等

1. resize
2. box-sizing
3. outline-offset

resize 屬性規定是否可由用戶調整元素尺寸。如果希望此屬性生效，需要設置元素的 overflow 屬性，值可以是 auto、hidden 或 scroll

div {
  resize: both; /* none|both|horizontal|vertical; */
  overflow: auto;
}




box-sizing 屬性可設置的值有 content-box、border-box 和 inherit
content-box 是W3C的標准盒模型，元素寬度 = 內容寬度 + padding + border：意思是 padding 和 border 會增加元素的寬度，以至於實際上的 width 大於原始設定的 width
border-box 是ie的怪異盒模型，元素寬度 = 設定的寬度，已經將 padding 和 border 包括進去了，比如有時候在元素基礎上添加內距 padding 或 border 會將布局撐破，但是使用 border-box 就可以輕松完成
inherit：規定應從父元素繼承 box-sizing 屬性的值

outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪制輪廓

CSS 兼容內核

-moz-：代表FireFox瀏覽器私有屬性
-ms-：代表IE瀏覽器私有屬性
-webkit-：代表safari、chrome瀏覽器私有屬性
-o-：代表opera瀏覽器私有屬性

 

博客地址：https://ainyi.com/52