首先推薦一個網址給小白們，http://www.w3school.com.cn
本人也是小白羣裏的一員，覺得對於入門來說，去上述推薦學習點還是蠻有用的。畢竟是剛剛開始學習，所以就來點最基礎的吧。
一、主體結構
| header | 頁面頭部，不同與<head></head> |
| aside | 邊欄 |
| nav | 外部鏈接集合 |
| section | 章節或段落 |
| article | 類似文章、摘要或留言POST等形式的記錄（一般搭配內嵌頭部、尾部、底部結構使用） |
| hggroup | 類似子標題，標題信息、可選標題、TAG標籤這樣的數據，還是英文更好理解一些，heading of a section |
| address | 聯繫信息，一般用在article或body錨元素周圍 |
| footer | 頁腳 |
二、HTML 5元素標記彙總表
| 文檔類型宣告 | <!DOCTYPE html> |
| 根元素元素 | html |
| META元素 | head、 title、base、link、meta、style |
| 部件元素 | body、section、nav、article、aside、h1、 h2、 h3、h4、 h5、 h6、hgroup、header、footer、address |
| 分組內容元素 | p、hr、br、pre、blockquote、ol、ul、li、dl、dt、dd、figure、figcaption、div |
| 文本層次語義元素 | a、em、strong、small、cite、q、dfn、abbr、time、code、var、samp、kbd、sub、sups、i、b、mark、ruby、rt、rp、bdo、span |
| 編輯元素 | ins、del |
| 嵌入內容元素 | img、iframe、embed、object、param、video、audio、source、canvas、map、area |
| 表格元素 | table、caption、colgroup、col、tbody、thread、tfoot、tr、td、th |
| 表單元素 | form、fieldset、legend、label、button、select、datalist、optgroup、option、textarea、keygen、output、progress、meter |
| 互動元素 | details、summary、command、menu |
| 腳本元素 | script、noscript |
三、HTML 5元素通用屬性和事件句柄
| HTML5元素通用屬性表 | accesskey、class、contenteditable、contextmenu、dir、 draggable、hidden、id、lang、spellcheck、style、tabindex、title |
| HTML5元素事件句柄屬性 | onabort、onblur*、oncanplay、oncanplaythrough、onchange、 onclick、 oncontextmenu、ondblclick、ondrag、ondragend、ondragenter、ondragleave、 ondragover、ondragstart、ondrop、ondurationchange、onemptied、onended、 onerror*、onfocus*、onformchange、onforminput、oninput、oninvalid、onkeydown、 onkeypress、onkeyup、onload*、onloadeddata、onloadedmetadata、onloadstart、 onmousedown、onmousemove、onmouseout、onmouseover、onmouseup、onmousewheel、 onpause、onplay、onplaying、onprogress、onratechange、onreadystatechange、 onscroll、onseeked、onseeking、onselect、onshow、onstalled、onsubmit、 onsuspend、ontimeupdate、onvolumechange、onwaiting。 |
四、HTML5元素標記釋義
| 標記 | 類型 | 意義 | 介紹 |
| 文件標記 | |||
| <html> | ● | 根文件標記 | 讓瀏覽器知道這是HTML 文件 |
| META標記 | |||
| <head> | ● | 開頭 | 提供文件整體信息 |
| <title> | ● | 標題 | 定義文件標題，顯示於瀏覽器頂端 |
| <base> | o | 基準標記 | 可將相對URL轉絕對及指定鏈接 |
| <link> | o | 外部資源連接 | 必須帶rel屬性描述 |
| <meta> | o | 其它META數據 | 不能被title, base, link, style, 和script元素描述的META數據 |
| <style> | ● | 嵌入文檔風格信息 | |
| 部件標記 | |||
| <body> | ● | 文檔主體開始 | 文檔內容容器 |
| <section> | ● | 代表通用文檔或應用部件 | |
| <nav> | ● | 導航鏈接 | 外部鏈接或文檔內部鏈接 |
| <article> | ● | 頁面模塊 | 類似文章、摘要或留言POST等形式的記錄 |
| <aside> | ● | 孤立模塊 | 一般作爲邊欄廣告、說明、引用、導航等，aside圍堵部分一般與正文耦合較小 |
| <h1> | ● | 標題標記 | 此外還有h2, h3, h4, h5, h6 |
| <hgroup> | ● | 羣組標題 | 用在一組h1-h6這樣的元素集合時使用，用來區分主副標題？？ |
| <header> | ● | 組說明或組導航 | 也可叫頁頭標題 |
| <footer> | ● | 頁腳標題 | 作用範圍跟最近部件元素有關 |
| <address> | ● | 地址或聯繫信息 | |
| 分組內容標記 | |||
| <p> | ● | 段落標記 | |
| <hr> | o | 水平分割線 | |
| <br> | o | 換行 | |
| <pre> | ● | 預格式化分本塊 | |
| <blockquote> | ● | 塊引用 | |
| <ol> | ● | 編號列表 | |
| <ul> | ● | 項目列表 | |
| <li> | ● | 列表項 | |
| <dl> | ● | 定義列表 | |
| <dt> | ● | 定義名稱 | |
| <dd> | ● | 定義說明 | |
| <figure> | ● | 流內容區塊說明 | 多結合figcaption使用 |
| <figcaption> | ● | figure內容屬性 | |
| <div> | ● | 定位標記 | 無實際意義 |
| 文本層次語義標記 | |||
| <a> | ● | 鏈接標記 | |
| <em> | ● | 強調標記 | |
| <strong> | ● | 加重標記 | |
| <small> | ● | 字體縮小 | |
| <cite> | ● | 斜體標記 | |
| <q> | ● | 引用標記內容 | 原文是phrasing content，暫不清楚如何翻譯 |
| <dfn> | ● | 術語定義 | |
| <abbr> | ● | 縮略語 | |
| <time> | ● | 日期時間 | |
| <code> | ● | 程序代碼 | |
| <var> | ● | 變量 | |
| <samp> | ● | 範例 | |
| <kbd> | ● | 鍵盤字 | |
| <sub><sups> | ● | 上標字/下標字 | |
| <i> | ● | 斜體標記 | |
| <b> | ● | 粗體標記 | |
| <mark> | ● | 標記或高亮 | |
| <ruby> | ● | 註解標記 | |
| <rt> | ● | ruby子元素 | 結合ruby使用，比如:<ruby>天<rt>Tian</rt>緣<rt>Yuan</rt></ruby> |
| <rp> | ● | ruby子元素 | 一般做rt元素註釋使用 |
| <bdo> | ● | ||
| <span> | ● | 自定義標記 | |
| 編輯標記 | |||
| <ins> | ● | ||
| <del> | ● | ||
| 嵌入內容標記 | |||
| <img> | ● | 圖片標記 | |
| <iframe> | ● | 框架標記 | |
| <embed> | ● | 嵌入標記 | |
| <object> | ● | 對象標記 | |
| <param> | ● | 參數標記 | |
| <video> | ● | 視頻標記 | |
| <audio> | ● | 音頻標記 | |
| <source> | ● | 來源標記 | |
| <canvas> | ● | 製圖標記 | |
| <map> | ● | 地圖標記 | |
| <area> | ● | 區域標記 | |
| 表格標記 | |||
| <table> | ● | 表格標記 | 設定該表格的各項參數 |
| <caption> | ● | 表格標題 | 做成一打通列以填入表格標題 |
| <colgroup> | ● | ||
| <col> | ● | ||
| <tbody> | ● | ||
| <thread> | ● | ||
| <tfoot> | ● | ||
| <tr> | ● | 表格列 | 設定該表格的列 |
| <td> | ● | 表格欄 | 設定該表格的欄 |
| <th> | ● | 表格標頭 | 相等於<TD>，但其內文字字體會變粗 |
| 表單標記 | |||
| <form> | ● | 表單標記 | 決定該表單的運作模式 |
| <fieldset> | ● | ||
| <legend> | ● | ||
| <input> | ● | 輸入標記 | |
| <label> | ● | ||
| <button> | ● | 按鈕 | |
| <select> | ● | 選擇標記 | |
| <datalist> | ● | ||
| <optgroup> | ● | ||
| <option> | ● | 選項 | |
| <textarea> | ● | ||
| <keygen> | ● | ||
| <output> | ● | ||
| <progress> | ● | ||
| <meter> | ● | ||
|
互動元素 |
|||
| <details> | ● | ||
| <summary> | ● | ||
| <command> | ● | ||
| <menu> | ● | ||
| 其他標記 | |||
| <script> | ● | ||
| <noscript> | ● | ||
備註：
1、● 表示該標記屬於圍堵標記，需要結束標記</標記>。
2、o 表示該標記屬空標記，不需要結束標記。
本人覺得呢，H5爲什麼火就是對於視頻音頻更好的去展現以及一些比較炫的動畫效果，就如android，APP其實功能都大同小異，只是表現形式不同而已，這裏自然比較炫酷的界面更加可以吸引用戶。所以要抓住重點去學習，先去學習他的閃光點吧。一起加油！！！