概覽
文件章節
<body><header><nav>導航<aside>表示和主要內容不相關的區域<article>表示一個獨立的、可重複的結構<section>表示一組內容，相鄰的section之間的內容是有相關性的，相鄰的article標籤之間是獨立的<footer><hx>
標題
- h1
- h2
- h3
- h4
- h5
- h6
文字
-
<a></a>標籤- 建立指向另一個文件的連結；
- 建立指向另一個文件內部的錨點；
- 連結到email地址；
<!--href 屬性，連結地址--> <!--target 跳轉方式--> <!--_self:當前視窗顯示；--> <!--_blank:新開一個視窗顯示；--> <!--也可是一個名稱name，在名為name的iframe中開啟連結--> <a href="mailto:zhangweihang_amy@qq.com">給阿航發郵件</a> <a href="tel:10010">給聯通打電話</a> <!--?cc抄送--> <!--subject 主題--> 複製程式碼 -
更多不是特別常用的標籤
<em></em> <!--表示強調--> <strong></strong> <!--粗體強調--> <br> <!--換行，在內容中換行 --> <cite></cite> <!--斜體，用在文章標題處；--> <q></q> <!--表示引用，會加引號“”；--> <code></code> <!--放程式碼--> <b></b> <!--粗體，關鍵詞--> <i></i> <!--斜體，關鍵字--> 複製程式碼
組合內容
-
分割槽 div：本身沒有任何的語義，主要用來作為分割槽,h5之前沒有header這種語義化的標籤，
-
段落 p：段落
-
列表，列表是可以巢狀的
- ul：無序列表（導航 ，節目列表，使用者列表等都可以用無序列表來表示）
/*預設的li的樣式會有小圓點，可以用css來控制*/ .class{ list-style:none } 複製程式碼- ol：有序列表 （排行榜）
//適合做排行榜等有順序的列表，預設樣式會有序號123 //序號可以用type屬性改變，start屬性用來改變起始序號； 複製程式碼- dl：自定義列表
//dt定義了列表項，dd定義了對列表項的描述， //每一項的dt只能有一個，對應的dd可以有多個， //dd會有一定縮排 複製程式碼 -
pre: 把code標籤的內容放到pre標籤中，可以保留code內容中的換行
-
blockquote: 大塊的引用
嵌入資源
-
<img>圖片- 頁面中嵌入圖片，自閉和標籤
- src: 圖片路徑
- alt: 描述圖片的含義(如果網速慢等情況，導致圖片沒有載入出來，或者地址寫錯了導致無法載入圖片，alt的內容就會替代圖片，顯示出來;一般都會要求寫上alt，改善使用者體驗)
-
<iframe></iframe>嵌入頁面- 當前頁面的上下文（css，js）和嵌入頁面中的內容是隔離的，
- 在嵌入頁面中的操做並不影響當前頁面
- 比如頁面中的播放器，可以放在iframe中，這樣頁面的操作就不會影響播放器的操作
-
<object></object>嵌入外部資源（可能是pdf等外掛）- 在type屬性中指定外掛型別，外掛的引數可以放在param標籤中
- 播放器的地址也可以寫在object的data屬性上面，ie8以下不相容data屬性
<object data="" type="application/x-shockwaveflash"> <param name="movie" value="http://pdfReader.swf"> <param name="flashvars" value="http://book.pdf"> </object> 複製程式碼 -
<embed></embed>嵌入外掛<embed src="http://pdfReader.swf" type="application/x-shockwaveflash"> 複製程式碼 -
<video></video>在h5中可以使用video標籤來插入視訊，viedo標籤，只有高版本的瀏覽器才支援<!--因為不同的瀏覽器對視訊的支援格式不一樣，--> <!--所以要準備多個視訊檔案，放在source的標籤中，如果只有一個視訊檔案，可以直接放在video標籤的src裡面--> <!--瀏覽器會選擇一個它支援的檔案視訊型別來播放--> <video src="" controls="controls" poster="海報地址" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <source src="movie.ogg" type="video/ogg"> <track kind="subtitles" src="video.srt" label="English"> 您的瀏覽器不支援video標籤 </video> <!--通過controls，顯示控制條--> <!--poster用來指定封面，如果沒有指定，則顯示視訊的第一幀；--> <!--track屬性用來引入字幕--> <!--autoplay屬性用來設定為自動播放--> <!--loop屬性，迴圈播放,沒有指定，則播放完畢後顯示視訊的最後一幀--> 複製程式碼 -
<audio></audio>和video標籤很類似 -
<canvas>（圖）基於畫素的，有很多圖形函式，可以在js中進行繪製；適合用來處理比較複雜的，實時性比較高的，比如遊戲； -
<svg>（圖） 是向量的，適合用來處理高保真的、靜態的圖形影象 -
<map>(熱點區域） -
<area>(熱點區域）<!--coords,區域--> <!--shape,形狀--> <img src="圖片地址" alt="圖片名稱" width="1090" height="995" usemap="#Map2"> <map name="Map2"> <area shape="rect" coords="669,75,1075,682" href="xiupin.com/..." target="_blank"> <area shape="rect" coords="26,93,391,337" href="xiupin.com/..." target="_blank"> </map> 複製程式碼
附錄
video檔案相容性 https://en.wikipedia.org/wiki/HTML5_video#Browser_support
audio檔案相容性https://en.wikipedia.org/wiki/HTML5_audio#Supported_audio_coding_formats
表格
<table></table><table> <caption>照片沖印價格詳情</caption> <thead> <tr> <!--表頭單元格用th表示--> <th>照片尺寸</th> <th>富士</th> <th>科達</th> </tr> </thead> <tbody> <tr> <th>6寸</th> <!--普通單元格用td表示--> <td>0.45</td> <td>0.6</td> </tr> </tbody> <tfoot> <tr> <!--跨列用colspan，跨行用rowspan--> <td colspan="3">運費8元每單，滿99免運費</td> </tr> </tfoot> </table> 複製程式碼
表單
-
<form></form><!--action，介面；method，方式--> <form action="/login" method="post"> <!--fieldset表示不同的區域--> <fieldset> <legend>照片選擇</legend> <!--input有兩個重要的屬性，name和value，name是向後臺傳值時的引數名，value是向後臺傳值時的引數值--> <input type="file" name="file"> </fieldset> <fieldset> <legend>填寫資訊</legend> <div> <!--多選--> <!--checked 表示預設選中--> <!--同一組單選框或者多選框的name的值是一樣的--> <input type="checkbox" value="香蕉" id="banana" checked><label for="banana">香蕉</label> <input type="checkbox" value="蘋果" id="apple"><label for="apple">蘋果</label> </div> <div> <!--單選--> <input type="radio" value="榨汁" id="1" name="how-to-eat" checked><label for="1">榨汁</label> <input type="radio" value="直接吃" id="2" name="how-to-eat"><label for="2">直接吃</label> <!--disabled屬性用來禁用某個選項--> <input type="radio" value="不吃了" id="3" name="how-to-eat" disabled><label for="2">不吃了</label> </div> <div> <!--文字--> <!--label為表單做提示，for對應input、textarea、select的id--> <label for="name">姓名</label> <!--placeholder佔位符，預設展示的文字--> <!--readonly屬性，表示只讀--> <!--hidden屬性表示隱藏，頁面上不可見，但是向後臺傳值的時候是傳的--> <input type="text" id="name" placeholder="請輸入姓名" readonly> <input type="text" id="name2" placeholder="請輸入姓名" readonly hidden> </div> <div> <label for="more-info">備註</label> <!--多行文字框用textarea表示--> <textarea name="" id="more-info" cols="30" rows="10"></textarea> </div> <label for="delivery">delivery</label> <!--下拉框--> <select name="" id="delivery"> <!--optgroup用來區分選項組--> <optgroup label="group1"> <option value="0">快遞</option> <option value="1">平郵</option> </optgroup> <option value="2" selected>EMS</option> </select> </fieldset> <!--<div>--> <!--<!–input也可以用來做按鈕，但是，為了更好地語義化，我們通常使用button–>--> <!--<input type="submit">--> <!--<input type="reset">--> <!--</div>--> <div> <button type="submit">提交</button> <button type="reset">重置</button> </div> </form> 複製程式碼 -
<input/>//input的type屬性 //email //url //number //tel //search //range 一定範圍內的資料 //color 顏色的拾色器 //date-picker （date，month，week，time，datetime，datetime-local） 複製程式碼
語義化
-
什麼是語義化呢？ 瞭解每一種標籤的用途，用適當的標籤來描述頁面。
-
語義化的作用：
1. 便於SEO（Search Engine Optimization）優化， 我們的頁面是給搜尋引擎看的，搜尋引擎的爬蟲呢會根據語義話的標籤來確定關鍵字的權重，這樣子我們的關鍵字能和使用者的關鍵字能更加的匹配；另外，搜尋引擎也會給語義化的頁面一個更高的權重，這樣我們的頁面也會更早出現在使用者的搜尋結果中。
2.可訪問性 頁面也可能是給殘障人士看的，他們可以通過螢幕閱讀器來訪問頁面，螢幕閱讀器會對不同的標籤發出不同的聲音，使用更語義化的標籤能夠傳達不同資訊的重要性，使他們能夠更好的理解頁面的內容。
3.可讀性 提高程式碼的可讀性，便於多人的修改維護，提高開發效率。
（ps：主流瀏覽器都相容HTML5的新標籤，對於 IE8 及以下版本不認識 HTML5的新元素，可以使用 JavaScript 建立一個沒用的元素來解決，例如：，也可以使用shiv來解決相容性問題，詳情可參考HTML5 Shiv https://github.com/afarkas/html5shiv）