堅持為客戶提供有價值的服務和內容
精準傳達·有效溝通
在HTML5出現之前，我們一般采用DIV+CSS布局我們的頁面。但是這樣的布局方式不僅使我們的文檔結構不夠清晰，而且不利于搜索引擎爬蟲對我們頁面的爬取。為了解決上述缺點，HTML5新增了很多新的語義化標簽。我們一起來看看。
用最恰當的HTML元素標記的內容。
優點：
通用容器:
搜索引擎會將title作為判斷頁面主要內容的指標，有效的title應該包含幾個與頁面內容密切相關的關鍵字，建議將title核心內容放在前60個字符中。
對于搜索引擎而言，如果標題與搜索詞匹配，這些標題就會被賦予很高的權重，尤其是h1
也適合對頁面內部一組介紹性或導航性內容進行標記。：標記導航，僅對文檔中重要的鏈接群使用。
Html5規范不推薦對輔助性頁腳鏈接使用nav，除非頁腳再次顯示頂級全局導航、或者包含招聘信息等重要鏈接。：頁面主要內容，一個頁面只能使用一次。如果是web應用，則包圍其主要功能。
：表示文檔、頁面、應用或一個獨立的容器。
article可以嵌套article，只要里面的article與外面的是部分與整體的關系。：具有相似主圖的一組內容，比如網站的主頁可以分成介紹、新聞條目、聯系信息等條塊。
如果只是為了添加樣式，請用div：指定附注欄，包括引述、側欄、指向文章的一組鏈接、廣告、友情鏈接、相關產品列表等。
如果放在main內，應該與所在內容密切相關。：頁腳，只有當父級是body時，才是整個頁面的頁腳。
：指定細則，輸入免責聲明、注解、署名、版權。
只適用于短語，不要用來不標記“使用條款”，“隱私政策”等長的法律聲明。
不單純的樣式標簽（有意義的，對搜索引擎抓取有強調意義 strong > em > cite）：表示內容重要性。
：標記內容著重點（大量用于提升段落文本語義）（斜體）
：指明引用或者參考，如圖書的標題，歌曲、電影、等的名稱，演唱會、音樂會、規范、報紙、或法律文件等。（斜體）
：突出顯示文本（黃色背景顏色），提醒讀者
：標記事件。datetime屬性遵循特定格式，如果忽略此屬性，文本內容必須是合法的日期或者時間格式。（不再相關的時間用s標簽）
：解釋縮寫詞。使用title屬性可提供全稱，只在第一次出現時使用就可以了
：定義術語元素，與定義必須緊挨著，可以在描述列表dl元素中使用。
：作者、相關人士或組織的聯系信息（電子郵件地址、指向聯系信息頁的鏈接）表示一個具體的地址，字體為斜體，會自動換行
：添加的內容。
少有的既可以包圍塊級，又可以包圍短語內容的元素。
：預格式化文本。保留文本固有的換行和空格。
例如：20%completed ：完成進度?？赏ㄟ^js動態更新value。
在HTML5中我們可以使用data-前綴設置我們需要的自定義屬性，來進行一些數據的存放。通過dataset來獲取這些數據。這里的data-前綴就被稱為data屬性，其可以通過腳本進行定義，也可以應用CSS屬性選擇器進行樣式設置。數量不受限制，在控制和渲染數據的時候提供了非常強大的控制。
例如我們要在一個文字按鈕上存放相對應的id
下面是元素應用data屬性的一個例子：
￥20.12
// 要想獲取某個屬性的值，可以像下面這樣使用dataset對象：
var food = document.getElementById('food');
var typeOfDrink = food.dataset.drink;
email 類型用于應該包含 e-mail 地址的輸入域。在提交表單時，會自動驗證 email 域的值。
E-mail: url 類型用于應該包含 URL 地址的輸入域。在提交表單時，會自動驗證 url 域的值。
Homepage: number 類型用于應該包含數值的輸入域。您還能夠設定對所接受的數字的限定：
Points: range 類型用于應該包含一定范圍內數字值的輸入域。range 類型顯示為滑動條。您還能夠設定對所接受的數字的限定：
search 類型用于搜索域，比如站點搜索或 Google 搜索。search 域顯示為常規的文本域。
autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
注釋：autocomplete 適用于 novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
注釋：novalidate 屬性適用于 autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
注釋：autocomplete 適用于 autofocus 屬性規定在頁面加載時，域自動地獲得焦點。
注釋：autofocus 屬性適用于所有 標簽的類型。
User name: form 屬性規定輸入域所屬的一個或多個表單。
注釋：form 屬性適用于所有 標簽的類型。
form 屬性必須引用所屬表單的 id：
Last name: 表單重寫屬性（form override attributes）允許您重寫 form 元素的某些屬性設定。
- 表單重寫屬性有：
1. formaction - 重寫表單的 action 屬性
2. formenctype - 重寫表單的 enctype 屬性
3. formmethod - 重寫表單的 method 屬性
4. formnovalidate - 重寫表單的 novalidate 屬性
5. formtarget - 重寫表單的 target 屬性
注釋：表單重寫屬性適用于以下類型的 標簽：submit 和 image。
height 和 width 屬性規定用于 image 類型的 input 標簽的圖像高度和寬度。
注釋：height 和 width 屬性只適用于 image 類型的 標簽。
list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。
注釋：list 屬性適用于以下類型的 標簽：text, search, url, telephone, email, date pickers, number, range 以及 color。
Webpage:
min、max 和 step 屬性用于為包含數字或日期的 input 類型規定限定（約束）。
max 屬性規定輸入域所允許的最大值。
min 屬性規定輸入域所允許的最小值。
step 屬性為輸入域規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）。
注釋：min、max 和 step 屬性適用于以下類型的 標簽：date pickers、number 以及 range。
下面的例子顯示一個數字域，該域接受介于 0 到 10 之間的值，且步進為 3（即合法的值為 0、3、6 和 9）：
Points: multiple 屬性規定輸入域中可選擇多個值。
注釋：multiple 屬性適用于以下類型的 標簽：email 和 file。
Select images: novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
注釋：novalidate 屬性適用于 pattern 屬性規定用于驗證 input 域的模式（pattern）。
注釋：pattern 屬性適用于以下類型的 標簽：text, search, url, telephone, email 以及 password。
下面的例子顯示了一個只能包含三個字母的文本域（不含數字及特殊字符）：
Country code:
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。
注釋：placeholder 屬性適用于以下類型的 標簽：text, search, url, telephone, email 以及 password。
提示（hint）會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失：
required 屬性規定必須在提交之前填寫輸入域（不能為空）。
注釋：required 屬性適用于以下類型的 標簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
Name:
音頻元素支持的3種格式：Ogg MP3 Wav
視頻元素支持三種視頻格式：MP4、WebM、Ogg。
最后希望大家在網站建設過程中遵循html5標準，通過對新特性的運用，設計出利于seo優化的頁面，方便日后的搜索引擎優化！
