html5學習路線及需要學習的內容總結分享
很多小夥伴學習html5都是東拼西湊，在網上有的html5資料就下載看，到最後發現學習了很久還是沒效果，今天在這就總結了一下html5的學習順序和要學習的內容，希望對看到的小夥伴有所幫助。
1、css3新增選擇器
結構選擇器:
:nth-child(n) 父元素下的第n個子元素
:nth-child(odd)奇數子元素(同nth-child(2n-1))
:nth-child(even)偶數子元素(同nth-child(2n))
:nth-child(an+b)公式
:nth-last-child(n) 倒數第n個子元素
:nth-of-type(n) 父元素下的第n個指定型別的子元素
:nth-last-of-type 父元素下的數第n個指定型別的子元素
:first-child 選擇父元素下的第一個子元素
:last-child 選擇父元素下的最後一個子元素
:only-child 選擇父元素下唯一的子元素
:only-of-type選擇父元素下指定型別的唯一子元素
:root 選擇文件的根目錄，返回html
屬性選擇器:
:E[attr] 屬性名，不確定具體屬性值
:E[attr="value"] 指定屬性名，並指定其對應屬性值
:E[attr ~="value"] 指定屬性名，其具有多個屬性值空格隔開，幷包含value值
:E[attr ^= "value"] 指定屬性名，屬性值以value開頭
:E[attr $="value"] 指定屬性名，屬性值以value結束
:E[attr *="value"] 指定了屬性名，屬性值中包含了value
:E[attr |= "value"] 指定屬性名，屬性值以value-開頭
UI偽類選擇器：
:enabled 選擇啟用狀態元素
:disabled 選擇禁用狀態元素
:checked 選擇被選中的input元素（單選按鈕或複選框）
:default 選擇預設元素
:valid、invalid 根據輸入驗證選擇有效或無效的input元素
:in-range、out-of-range 選擇指定範圍之內或者之外受限的元素
:required、optional 根據是否允許
:required屬性選擇input元素
動態偽類選擇器：
:link 選擇連結元素
:visited 選擇使用者以訪問的元素
:hover 滑鼠懸停其上的元素
:active 滑鼠點選時觸發的事件
:focus 當前獲取焦點的元素
其他偽類選擇器：
:not(<選擇器>) 對括號內選擇器的選擇取反
:lang(<目標語言>) 基於lang全域性屬性的元素
:target url片段識別符號指向的元素
:empty選擇內容為空的元素
:selection 滑鼠游標選擇元素內容
2、背景
background-size:背景尺寸
background:url() 0 0,url() 0 100%;多背景
background-origin 背景區域定位
background-clip 背景繪製區域顏色漸變
background-image：linear-gradient()線性漸變
background-image：radial-gradient()徑向性漸變
3、文字屬性
color:rgba();
text-overflow:是否使用一個省略標記（...）標示物件內文字的溢位(單行文字溢位、多行文字溢位)
text-align:文字的對齊方式
text-transform:文字的大小寫
text-decoration:文字的裝飾線，複合屬性
text-shadow:文字陰影
text-fill-color:文字填充顏色
text-stroke:複合屬性。設定文字的描邊
tab-size:製表符的長度
word-wrap:當前行超過指定容器的邊界時是否斷開轉行
word-break:規定自動換行的處理方法
4、彈性盒模型
box佈局設定給父元素屬性:
display:box/display:inline-box;
box-orient 定義盒模型的佈局方向
box-direction 元素排列順序
box-pack 對盒子富裕的空間進行管理
box-align 在垂直方向上對元素的位置進行管理
設定給子元素
box-ordinal-group 設定元素的具體位置
box-flex 定義盒子的彈性空間
flex佈局設定給父元素屬性:
flex-direction屬性決定顯示的方向（即專案的排列方向）
flex-wrapflex-wrap屬性定義，如果一行排不下，如何換行。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
justify-content屬性定義了專案在水平方向的對齊方式。
align-items屬性定義專案在豎直方向上如何對齊。
align-content屬性定義了多行的對齊方式。如果專案只在一行，該屬性不起作用。
設定給子元素：
order 屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。可為負值
flex-grow 屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
flex-shrink 屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
flex-basis 屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
5、怪異盒模型(box-sizing)
box-sizing 盒模型解析模式
content-box 標準盒模型(和css2一樣的計算) width/height=border+padding+content
border-box 怪異盒模型 width/height與設定的值一樣 ，content減小3、2D變換、3D變換
6、盒子陰影、倒影
box-shadow 陰影 box-reflect 倒影
7、2D+3D變換
2D變換
ransform:rotate() 旋轉函式 (deg) deg 度數
skew(X,Y) 傾斜函式 (deg)
skewX()
skewY()
scale(X,Y) 縮放函式 (正數、負數和小數)
scaleX()
scaleY()
translate(X,Y) 位移函式(px)
translateX()
translateY()
matrix(a,b,c,d,e,f) 矩陣函式
3D變換
transform-style（preserve-3d） 建立3D空間
perspective 視鏡
perspective- origin 視鏡基點
x:left/center/right/length/%
y:top/center/bottom/length/%
transform 新增函式
rotateZ()
translateZ()
scaleZ()translate3d(x,y,z)
backface-visibility: hidden;
8、動畫過渡
transition:property duration timing-function delay;
transition-property:過渡屬性的名稱
transition-duration:過渡屬性花費的時間
transition-timing-function:過渡效果速度曲線（貝塞爾曲線詳解）
transition-delay:過渡效果延遲時間
過渡完成事件:transitionend
9、自定義動畫
animation-name: 動畫名稱
animation-duration: 動畫執行時間
animation-timing-function: 動畫速度曲線（貝塞爾曲線詳解）
animation-delay:動畫效果延遲時間
animation-iteration-count: 動畫執行次數
animation-direction:動畫執行方向
animation-play-state:動畫執行狀態
animation-fill-mode:動畫執行過程效果是否可見
@keyframes:規定動畫關鍵幀
from{} to{}
0%{} 100%{}
動畫事件:animationstart/animationiteration/animationend
10、佈局
分欄佈局
column-width欄目寬度
column-count欄目列數
column-gap欄目距離
column-rule欄目間隔線
響應式佈局:媒體型別
*all 所有媒體
braille 盲文觸覺裝置
embossed 盲文印表機
*print 手持裝置
projection 列印預覽
*screen 彩屏裝置
speech '聽覺'類似的媒體型別
tty 不適用畫素的裝置
tv 電視
關鍵字：
and
not關鍵字是用來排除某種制定的媒體型別
only用來定某種特定的媒體型別
樣式引入 @media screen----些處內容重點太多，暫保密
11、智慧表單及表單驗證反饋
input表單type屬性值：
type = "email" 限制使用者輸入必須為Email型別
type="url"限制使用者輸入必須為URL型別
type="date" 限制使用者輸入必須為日期型別
type="datetime" 顯示完整日期 含時區
type="datetime-local" 顯示完整日期 不含時區
type="time" 限制使用者輸入必須為時間型別
type="month" 限制使用者輸入必須為月型別
type="week" 限制使用者輸入必須為周型別
type="number" 限制使用者輸入必須為數字型別
type="range" 生成一個滑動條
type="search" 具有搜尋意義的表單results="n"屬性
type="color" 生成一個顏色選擇表單
type="tel" 顯示電話號碼
新增屬性:
equired: required 內容不能為空
placeholder: 表單提示資訊
autofocus:自動聚焦
pattern: 正則表示式 輸入的內容必須匹配到指定正則範圍
autocomplete:是否儲存使用者輸入值預設為on，關閉提示選擇 off
formaction: 在submit裡定義提交地址
datalist: 輸入框選擇列表配合list使用 list值為datalist的id值
表單驗證反饋:
Invalid事件 validity物件(valid檢視驗證是否通過)
input.addEventListener('invalid',fn,false)
阻止預設驗證：ev.preventDefault()
formnovalidate屬性 : 關閉驗證
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing : 輸入值為空時
typeMismatch : 控制元件值與預期型別不匹配
patternMismatch : 輸入值不滿足pattern正則
customError 不符合自定義驗證
setCustomValidity();
自定義驗證
tooLong : 超過maxLength最大限制
rangeUnderflow : 驗證的range最小值
rangeOverflow：驗證的range最大值
stepMismatch: 驗證range 的當前值 是否符合min、max及step的規則
output: 計算或指令碼輸出
最後推薦下web前端學習交流，“550389714”都是一群愛好web前端的小夥伴，新加入的小夥伴可以獲得小白到進階的精品資料一份，還有前端工程師每天直播分享經驗哦。