前端開發一起交流QQ羣：740034288。
互聯網創業團隊興趣QQ羣：792710437。
新建《團隊合夥人》貼吧：https://tieba.baidu.com/f?kw=%E5%9B%A2%E9%98%9F%E5%90%88%E4%BC%99%E4%BA%BA&fr=index。
第一章：HTML5新增語法，元素，屬性，事件
1.html5語法：
1.1 html是不區分大小寫，也不區分大雙引號。
1.2 對於具有boolean值得屬性，如disabled和readonly等，當值寫屬性不寫值，將屬性值設置爲屬性名或設置爲空字符串時，表示爲true，如<input disabled /> ，<input disabled='' />，<input disabled="disabled" />。當不寫該屬性時，表示未faske，如<input />。
1.3 html5簡化的模板：
<!DOCTYPE html>
<meta charset="UTF-8">
<title>標題</title>
2. html5元素：參考http://www.w3school.com.cn/。
2.1 語義化結構元素：只有語義，沒有實際功能。
| 元素名稱 | 解釋 |
| header | 頁面的標題 |
| footer | 頁面的頁腳 |
| section | 頁面的內容區塊 |
| article | 頁面的文章文字內容部分 |
| aside | 頁面左右板塊 |
| nav | 頁面導航板塊 |
| main | 頁面主題內容板塊，與header，footer構成完整頁面 |
2.2 功能元素：具有實際功能的元素標籤。
| 元素名稱 | 說明 |
| hgroup | 相當於div |
| video | 視頻 |
| audio | 音頻 |
| embed | 用於插入多媒體，格式包括midi，wav，aiff，au，mp3 |
| mark | 黃色高亮背景，相當於帶黃色背景的span標籤。如<mark>你好</mark> ,顯示爲  |
| dialog | 對話框或窗口，<dialog open>對話黃</dialog>顯示爲 |
| datalist | 下拉列表
|
| canvas | 繪圖 |
| progress | 進度條 <progress value="0.7"></progress> value 範圍0~1， ，<progress ></progress> 不寫value表示藍色部分來回擺動動態的進度條。 |
| meter | 刻度尺，用於標識一個值所處範圍,不可接受(紅色),可以接受(黃色),非常優秀(綠色); |
2.3 表單元素：即input的type類型：email;url;number;tel;search;range;color;date;month;week.....
3. HTML5屬性：
3.1 表單屬性：
1).placeholder：佔位符 <input type="text"placeholder="請輸入用戶名" />
2).autofocus：自動獲取焦點 type="text"<input autofocus>;
3).multiple：允許輸入框中出現多個輸入(用逗號分隔); <input type="email" multiple />
4).form：用於把輸入域放在FORM外部;
<form id="f4"></form>
<input type="" form="f4" />
5).required：必填項,內容不能爲空 <input required>;
6).maxlength：字符中最大長度;
7).minlength：字符串最小長度;
8).max：輸入框允許輸入的數字最大值;
9).min：輸入框允許輸入的數字最小值;
10).pattern：指定必需符合正則表達式;
11).autocomplete="on/off"：表示開啓或關閉，用戶輸入後自動保存下次在輸入時呈現歷史輸入記錄。
3.2 其他屬性：
1).script的async屬性：定義腳本是否異步執行。
4. HTML全局屬性：即可以用戶任意的html元素標籤的屬性。
| 全局屬性 | 說明 |
| contentEditable | 該標籤下所有文本內容是否可在線編輯，所有瀏覽器都支持。
|
| contextmenu |
鼠標右鍵時，列表顯示菜單。目前只有firefox支持。
|
| data-* | 自定義屬性名/值，所有瀏覽器都支持 。<div data-index="1"></div> |
| hidden | 除了IE外，都支持，標籤是否隱藏 < div hidden></div> |
5. HTML5事件：
5.1 window事件： 即應用到body標籤上的事件。
| 事件名稱 | 說明 |
| onafterprint | body文檔被打印之後觸發 |
| onbeforerprint | body文檔被打印之前觸發 |
| onbeforeunload | body文檔被卸載之前觸發 |
| onoffline | 文檔離線運行時觸發 |
| ononkue | 文檔上線運行時觸發 |
| onpagehide | 窗口隱藏時觸發 |
| onpageshow | 窗口顯示時觸發 |
| onresize | 窗口大小改變時觸發 |
| onstorage | web storage區域更新後觸發 |
| onundo | 文檔運行undo時觸發 |
| onerror | 文檔運行錯誤時觸發 |
| onhaschange | 文檔改變時觸發 |
| onmessage | 在消息被觸發時觸發 |
| onpopstate | 窗口歷史記錄改變時觸發 |
5.2 form事件： 即應用到form標籤上的事件。
| 事件名稱 | 說明 |
| oncontextmenu | 當上下文菜單被觸發時觸發，即右鍵菜單顯示時觸發 |
| onformchange | 表單改變時觸發 |
| onforminput | 表單獲得用戶輸入時觸發 |
| oninput | input元素獲得用戶輸入時觸發 |
| oninvalid | 元素無效時觸發 |
5.3 mouse事件： 即鼠標事件。
| 事件名稱 | 說明 |
| ondrag | 元素被拖動事件 |
| ondragend | 元素被拖動結束時事件 |
| onmousewheel | 鼠標滾輪滾動時事件 |
| onscroll | 元素滾動條滾動時事件 |
| ondragenter | 元素拖動進入有效區域時觸發 |
| ondragleave | 元素拖動離開有效區域時觸發 |
| ondragover | 元素在有效區域上拖動時觸發 |
| ondragstart | 元素開始拖動時觸發 |
| ondrop | 元素拖動鬆開時觸發 |
5.4 media事件： 即audio,video,img,embed,object標籤觸發的事件。
第二章：HTML5的表單元素及屬性
1.html5的input的type類型：
| input的類型 | 代碼 | 說明 | |||||||||||||||||||||
| 文本框 | <input type="text"> | 可輸入數字，字母等。 | |||||||||||||||||||||
| 單選框 | <input type="radio">男 | 若干種選其一 | |||||||||||||||||||||
| 複選框 | <input type="checkbox">男 | 可多選 | |||||||||||||||||||||
| 下拉列表 | <select><option>選項</option></select> | 下拉選中 | |||||||||||||||||||||
| 密碼框 | <input type="password"> | ***** | |||||||||||||||||||||
| 提交按鈕 | <input type="submit" > | 提交按鈕 | |||||||||||||||||||||
| 點擊按鈕 | <input type="button" value="按鈕"> | 點擊按鈕 | |||||||||||||||||||||
| 圖片按鈕 | <input type="image"> |  |
|||||||||||||||||||||
| 隱藏域 | <input type="hidden"> | 隱藏 | |||||||||||||||||||||
| 重複按鈕 | <input type="reset"> | 清空表單所有數據 | |||||||||||||||||||||
| 文件夾 | <input type="file"> | 上傳文件 | |||||||||||||||||||||
| email類型 | <input type="email"> |
驗證輸入框是否包括@
|
|||||||||||||||||||||
| url類型 | <input type="url"> | 驗證是否是有效網址 | |||||||||||||||||||||
| number類型 | <input type="number"> | 驗證是否是數字，常與max,min,value,step連用 | |||||||||||||||||||||
| range類型 | <input type="range" max="20" min="10" value="15"/> | 滑塊， 常與max,min,value,step連用 |
|||||||||||||||||||||
| sea類型eix | <input type="search" /> | firefox不支持，搜索，自動可清空的x， |
|||||||||||||||||||||
| tel類型 | <input type="tel" /> | ||||||||||||||||||||||
| color類型 | <input type="color" /> |  |
|||||||||||||||||||||
| 日期時間類型 |
|
||||||||||||||||||||||
2.html5的input的屬性：
| 屬性 | 代碼 | 數碼 |
| autocomplete | <input type="text" autocomplete="on"> | 下次輸入相同內容，瀏覽器是否自動完成輸入內容 |
| autofocus | <input type="text" autofocus="autofocus"> | 是否自動獲得焦點 |
第三章：HTML5繪圖