第一單元
主體結(jié)構(gòu)元素
? (1)：article? ? ? ? ? ? ? ? ? ? ? 獨(dú)立文章內(nèi)容
（2）：section? ? ? ? ? ? ? 定義文檔中的節(jié)（區(qū)間）
（3）：aside? ? ? ? ? ? ? ? ? 主題內(nèi)容說明（側(cè)邊欄）
（4）：nav? ? ? ? ? ? ? ? ? ? ? ? ? 導(dǎo)航鏈部分
（5）：time? ? ? ? ? ? ? ? ? ? ? ? 機(jī)器可讀日期時間
（6）：datetime? ? ? ? ? ? ? ? ? 可指定日期
非主體元素
（1）：header? ? ? ? ? ? ? ? ? ? ? 頁面頭部
（2）：footer? ? ? ? ? ? ? ? ? ? ? ? 頁腳
（3）：address? ? ? ? ? ? ? ? ? ? 文檔作者的聯(lián)系信息
（4）：main? ? ? ? ? ? ? ? ? ? ? ? 文檔的主要內(nèi)容
表單域增強(qiáng)元素
formaction? ? ? ? ? ? ? ? 覆蓋form中的action? ? ? 提交地址
formmethod? ? ? ? ? ? ? 覆蓋form中的method? 提交方式
submit? image? ? ? ? ? ? 必須通過具有submit 功能的控件
autofocus? ? ? ? ? ? ? ? ? 自動獲得焦點(diǎn)
required? ? ? ? ? ? ? ? ? ? 必填項
placeholder? ? ? ? ? ? ? ? 提示內(nèi)容
pattern? ? ? ? ? ? ? ? ? ? ? 正則
autocomplete? ? ? ? 自動保存用戶輸入? ? （off--關(guān)閉? ? ? on---開啟）
表單控件（新增）
search? ? ? ? ? ? ? ? ? ? ? 搜索關(guān)鍵字
email? ? ? ? ? ? ? ? ? ? ? ? 郵件（格式：內(nèi)容@內(nèi)容）
url? ? ? ? ? ? ? ? ? ? ? ? ? ? 輸入網(wǎng)址? （格式：http://.~~~）? ?
number? ? ? ? ? ? ? ? ? ? 數(shù)字輸入框
range? ? ? ? ? ? ? ? ? ? ? ? 滑塊類型
color? ? ? ? ? ? ? ? ? ? ? ? 顏色
date? ? ? ? ? ? ? ? ? ? ? ? 日期
time? ? ? ? ? ? ? ? ? ? ? ? 時間
week? ? ? ? ? ? ? ? ? ? ? ? ? 星期
month? ? ? ? ? ? ? ? ? ? ? 月
tel? ? ? ? ? ? ? ? 在移動端會彈出輸入數(shù)字鍵盤
新增表單驗證
checkValidity()? 驗證用戶輸入的內(nèi)容是否正確? 返回（true）（false）
取消表單驗證
novalidate（）? ? ? ? ? ? 加給form
formnovalidate（）? ? 加給submit
setCustomValidite（） 自定義錯誤信息
新增頁面元素
mark? ? ? ? ? ? ? ? ? ? ? ? 突出顯示
progress? ? ? ? ? ? ? ? ? ? 進(jìn)度條（ie9以下不支持）
figure? ? ? ? ? ? ? ? ? ? ? ? 獨(dú)立內(nèi)容
figcaption? ? ? ? ? ? ? ? ? 標(biāo)題（必須在figure內(nèi)部）
details? ? ? ? ? ? ? ? ? ? ? 詳細(xì)信息扒最，點(diǎn)擊詳細(xì)信息，進(jìn)行展開
summary
第二單元
音頻視頻標(biāo)簽
audio? ? ? ? 音頻
video? ? ? ? 視頻
source? ? ? 媒介元素
媒體元素屬性
：controls? ? ? ? 顯示/隱藏用戶控制界面
：autoplay? ? 媒體是否自動播放
：loop? ? ? ? ? 媒體是否自動循環(huán)播放
：.currentTime? ? 當(dāng)前播放時間
：.duration? ? ? ? 媒體總時間（未加載完返回NaN? 正常返回秒）
：.volume? ? ? ? ? 音量相對值（0.0——1.0）
：.muted? ? ? ? ? 是否靜音（靜音----true? 不靜音----false）
媒體元素
：.paused? ? ? ? ? 是否暫停
：.ended? ? ? ? ? ? 是否播放完畢
：.error? ? ? ? ? ? 媒體發(fā)生錯誤的時候 返回錯誤代碼
：.currentSrc? ? 義字符串的形式返回媒體地址
：.play （）? ? ? ? ? 播放
：.pause（）? ? ? 暫停
：.load （）? ? ? 重新加載
事件
：.onended? ? ? 播放結(jié)束
：.ontimeupdate? ? 播放位置改變時運(yùn)行的腳本
：.oncanplay? ? ? ? 能播放的時候
Video的特性
：poster? ? ? 視頻播放前的預(yù)覽圖片
：width / height? ? ? 設(shè)置視頻的尺寸
：videoWidth / videoHeight? ? 視頻的實際尺寸
第三單元?
畫布:? ? Canvas
用法:
(1):獲取canvas? (2):創(chuàng)建繪圖環(huán)境 用（.getContext()）調(diào)用2d
方法：
：.strokeRect（x,y,width,height）? ? 空心矩形
：.fillReck（x,y,width,height）? ? ? ? ? 實心矩形
：.clearReck（x,y,width,height）? ? ? 清空矩形內(nèi)的指定元素
：.moveTo（x,y）? ? ? ? ? ? ? ? ? 開始的坐標(biāo)（起點(diǎn)）
：.lineTo（x,y）? ? ? ? ? ? ? ? ? ? ? 結(jié)束的坐標(biāo)（終點(diǎn)）
：.stroke()? 連線（通過moveTo和lineTo的路徑）
：.fill（）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 填充
：.beginPath（）? ? ? ? ? ? ? ? ? ? ? ? 創(chuàng)建開始路徑
：.closePath（）? ? ? ? ? ? ? ? ? 關(guān)閉路徑
屬性：
：.strokeStyle? ? ? ? ? ? ? ? 設(shè)置空心矩形邊框的顏色
：.fillStyle? ? ? ? ? ? ? ? ? ? 設(shè)置實心矩形的背景顏色
：.lineWidth? ? ? ? ? ? ? ? ? ? ? ? ? 線條的寬度（像素）
圓：
.arc（x,y,r,起始角华嘹，結(jié)束角吧趣，（true=逆時針，false =順時針））
公式：角度90=度數(shù)*Math.PI/180
方法：
：.translate（x,y）? ? 位移
：.Scale（1,1）? 縮放 （1不放大不縮小耙厚， 小于1縮小强挫， 大于1放大）
：.rotate（）? ? 旋轉(zhuǎn) （30度） 30*Math.PI/180
：.Save（）? ? ? 保存
：.restore（）? 恢復(fù)
第四單元?
插入圖片（圖片加載完，在執(zhí)行canvas? （）.onload=function(){}）
定位語法（3種）
：drawImage（圖片,x,y）? ? 定位圖像
：drawImage（圖片,x,y薛躬，width,height）
定位圖像 并規(guī)定圖的高度和寬度
：drawImage（圖片,sx,sy俯渤，swidth,sheight,x,y,width,height）
：sx,sy=剪切的位置? ? swidth,sheight=剪切的寬高
? ? ? ? ? x,y=? 定位位置? ? width，height=顯示的大小
設(shè)置背景： 創(chuàng)建畫布名.
：.createpattern(圖型宝，平鋪方式) 指定的方向重復(fù)指定的元素
漸變：
：.createLinearGradient(x1,y1,x2,y2)? 創(chuàng)建線性漸變
x1,y1=起點(diǎn) x2,y2=終點(diǎn)
：.createRadialGradient(x1,y1,r1,x2,y2,r2)創(chuàng)建放射性漸變
（3）共同屬性：漸變名.
：.addColorStop(位置（0-1）八匠，顏色)
Canvas文本
：.strokeText（文字，x,y）? ? 空心文字
：.fillText（文字趴酣，x,y）? ? ? ? 實心文字
：.font? =（“40px? 宋體”）? ? 文字大小
：.textAlign=（left=start,right=end,center）水平對齊方式
：.textBaseline（top,middle,bottom）? ? 垂直對齊方式
陰影：
：shadowOffsetX / shadowOffsetY? （向x,y軸偏移）
：shadpwBlur =? 模糊
：shadowcolor? ? 顏色
第五單元
新選擇器：
：querySelsctor（）? ? 單個
：querySelsctorAll（）? 多個
拖拽事件：
：draggable： 設(shè)置true 可以實現(xiàn)拖拽
拖拽事件元素（拖拽事件元）：
：.ondragstart? ? 開始拖
：ondrag? ? ? ? ? 正在拖（連續(xù)觸發(fā)）
：ondragend? ? 拖動結(jié)束
目標(biāo)元素事件：
：.ondragenter? ? ? 進(jìn)入目標(biāo)
：.ondragover? ? ? ? 在目標(biāo)的上面
注意：（有ondrop事件必須在on大染缸o(hù)ndragover加阻止默認(rèn)事件? e.preventDefault（））
：.ondragleave? ? ? 離開目標(biāo)
：ondrop? ? ? ? ? ? ? 釋放目標(biāo)
拖放事件3? （可以拖拽除圖片外的其他標(biāo)簽）
格式：
：設(shè)置圖片event.dataTransfer.setData（“url”,this.src）
：設(shè)置內(nèi)容 event.dataTransfer.setData（“nr”,this.src）
事件：
：.dataTransfer? ? ? 對象
? ? ? ? ? ? setData（）? ? 設(shè)置數(shù)據(jù)
? ? ? ? ? ? getData（）? ? 獲取數(shù)據(jù)
：effectAllowed? ? ? ? ? ? 設(shè)置光標(biāo)樣式
第六單元? 本地存儲
對象：
：localStorage（）? 存儲的數(shù)據(jù)沒有時間的限制
：sessionStorage（） 有時間限制 用戶關(guān)閉瀏覽器會刪除
對象方法：
：setItem（key梨树，value）? 保存數(shù)據(jù)
：getItem（key）? ? 讀取數(shù)據(jù)
：removeItem（key）? 刪除單個
：clear（）? ? ? ? ? ? ? ? 刪除多個
：.key（index）? 索引的key
檢測獲取的內(nèi)容類型
Typeof
轉(zhuǎn)換對象的方法
：parse（）? 字符串轉(zhuǎn)換為對象
：stringify（）對象轉(zhuǎn)化為字符串
第七單元? css3選擇器
相鄰選擇器
：.a+.b? ? ? + 相鄰的下一個緊跟元素
：.a~.b? ? ? ~相鄰后面所有不緊跟元素
屬性選擇器
：[class]? ? ? 只選取屬性名
：[class = ”a”]? ? 只選中該屬性名的屬性值
：[class ~=”ab”]? 只選中該屬性名中具有該屬性值 ab=詞
：[class ^=? ”a”]? 只選中以.a值開頭的第一個元素
：[class? $= ”a”]? 只選中以.a值結(jié)尾的最后元一個元素
：[class? *= ”a”]? 包含a的都選中
：[class? |= ”a”]? 只選中以a/a- 開頭，以a開頭的時候岖寞，只
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 允許有一個值a
偽類選擇器? ? （愛恨原則? （love? hate））
：:link? 偽類 未訪問鏈接 的添加樣式
：:visited? 偽類 已訪問鏈接 的添加樣式
：:hover? 偽類鼠標(biāo)移到元素上的添加樣式
：:active? ? 偽類鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件
結(jié)構(gòu)性偽類
：:root? ? 文檔的根元素
：:not（.a）? 非指定的元素
：:empty? 沒有子元素的每一個父元素（空盒子）
：:target? 用于選取當(dāng)前活動的目標(biāo)元素（用于錨鏈接）
：:first-child? ? 父級下的第一個子元素抡四。
：:last-child? ? ? 父級下的最后一個子元素
：:only-child? ? ? 每個父級下唯一子元素。
? 2n=even=偶數(shù)? ? 2n+1= odd = 奇數(shù)
：E:nth-child(n)? 父級下的第n個子元素慎璧，且這個元素得是E
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 元素床嫌；
：E:nth-last-child(n)? 每個父級下的第n個子元素 ，且這個
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 素得是E元素胸私；從最后一個子元素開始計數(shù)厌处。
：:nth-of-type(n)? ? ? ? 每個父級下的第n個子元素
：:nth-last-of-type(n)? ? 每個父級下的第n個子元素 ，從最
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 一個元素開始計數(shù)岁疼。最后一個子元素
表單屬性
：:focus? ? ? ? ? ? 選取獲得焦點(diǎn)的元素
：:enabled? ? ? ? ? ? 元素處于可用狀態(tài)時的樣式
：:disabled? ? ? ? ? ? 元素處于不可用狀態(tài)時的樣式
：:read-only? ? ? ? ? 元素處于只讀狀態(tài)時的樣式
：:read-write? ? ? ? 可讀可寫的元素
：:checked? 單選框 / 復(fù)選框處于選中狀態(tài)時的樣式
：:default頁面打開時阔涉，默認(rèn)選中狀態(tài)的單選框/復(fù)選框的樣式
：:indeterminate當(dāng)頁面打開時，單選框中沒選中狀態(tài)時樣式
：::selection偽類選擇器指定當(dāng)元素處于選中狀態(tài)時的樣式
偽元素選擇器
（1）：:first-line? ? ? ? ? ? 選取指定選擇器的首行捷绒。
（2）：:first-letter:? ? ? 元素中的首字母或第一個字使用樣式瑰排；
（3）：:before: 某個元素之前插入內(nèi)容
（4）：:after: 某個元素之后插入內(nèi)容；
（5）：Content 屬性：需要與:before? :after 配合使用暖侨！
第八單元? 移動端頭部標(biāo)簽
http-equiv? 文件頭作用（正確和精確顯示網(wǎng)頁內(nèi)容）
http-equiv? 屬性?
：refresh? ? 文檔自動刷新時間間隔
：content-type? ? 文檔的字符編碼
：content-language? ? 顯示語言的設(shè)定
：X-UA-compatible? ? 文件兼容性
name :? HTML文檔的描述? 關(guān)鍵字? 作者
name屬性
：description? ? 頁面的描述
：keywords? ? 逗號的分隔的關(guān)鍵字詞列表
Viewport（重點(diǎn)）（用戶網(wǎng)頁的可視區(qū)域）
Viewport屬性
：width=device-width? ? ? 設(shè)備寬/高度
：initial-scale=1? 初始縮放比例
：maximum-scale=1? 最大縮放比例
：minimum-scale=1? 最小縮放比例
：user-scalable? （no? yes）用戶是否可以手動縮放
format-detection格式檢測
format-detection屬性
（1）：telephone（no=禁止把數(shù)字轉(zhuǎn)化為撥號鏈接）
? ? ? ? ? ? ? ? ? （yes=開啟數(shù)字轉(zhuǎn)化為撥號鏈接）
：email=（no禁止作為郵箱地址yes開啟文字默認(rèn)郵箱地址）
：adress=（no禁止跳轉(zhuǎn)至地圖yes開啟地址直接跳轉(zhuǎn)地圖）
：-webkit-user-select：禁止選中文本
? ? ? ? ? ? ? ? none=文本不選擇? ? ? ? ? text= 可以選擇文本
：-webkit-appearance:none;去掉表單樣式
-webkit-tap-highlight-color:rgba(0,0,0,0); 去掉a椭住、input
? ? ? ? ? ? ? ? ? ? ? button點(diǎn)擊時的藍(lán)色外邊框和灰色半透明背景
：-webkit-input-placeholder {color}修改? placeholder樣式
重點(diǎn)（em? rem）
：em? 相對父級元素來設(shè)置字體
：rem? 相對body,html根源來設(shè)置字體大小
第九單元? 盒模型
盒模型? （2種）
：標(biāo)準(zhǔn)模式? ? ? ? box-sizing: content-box;
? ? ? ? ? 標(biāo)準(zhǔn)盒寬高=width/height+padding+border+margin
：怪異模式? ? ? ? box-sizing: border-box;
怪異盒寬高=width/height+margin=padding+border+margin+內(nèi)容區(qū)寬高
彈性盒：是除css3的新的布局模式（由彈性容器和彈性元素組成）
彈性盒的基本屬性
：display（
屬性值：? flex=塊元素布局?
inline-flex =內(nèi)元素布局
：flex-direction? ? ? 主軸方向
屬性值：row=從左到右?
row-reverse=從右到左
column=從上到下
column-reverse=從下到 上
（3）：flex-wrap? ? ? 是否換行
? 屬性值：nowrap=不換行?
wrap=換行
wrap-reverse=倒序換行
（4）：flex-flow? 復(fù)合屬性? （方向? 換行）
? ? 屬性值：(row nowrap )? ? (column? nowrap)
（5）：justify-content? ? 水平對齊方式
屬性值：flex-start=左對齊? ?
flex-end=右對齊? ?
center=居中
? ? ? ? ? ? space-between=兩端對齊?
space-around= 分布元素周圍
：align-items? ? 垂直對齊方式
屬性值：flex-start=上對齊?
flex-end=下對齊? ?
center=居中
baseline=以第一行的文字位置為基準(zhǔn)
stretch=拉升? 子元素高度為0/auto
：align-content? 各個行的對齊方式
屬性值：flex-start=上對齊? ?
flex-end=下對齊?
center=居中
space-between=兩端對齊?
space-around= 分布元素周圍
stretch=拉升? 子元素高度為0/auto
：條目的順序：order（自定義子元素的顯示順序）
：條目尺寸的彈性（子元素）
屬性值：flex-grow? 擴(kuò)張比例
? ? ? ? ? ? flex-shrink? 收縮比例
：文字對齊方式：align-self
