HTML頁面標籤規範使用說明
我們在做網站SEO優化時涉及的前端代碼層有很方面值得就是HTML，所以非常有必要掌握HTML知識，HTML是Hypertext Markup Language（超文本標記語言）的縮寫，是一種基於SGML（標準通用標記語言）的標記語言，是Web用於編輯網頁的主要工具。在網上，如果要向全球範圍內出版和發佈信息，需要有一種能夠被廣泛理解的語言，即所有的計算機都能夠理解的一種用於出版的母語。WWW是環球信息網的縮寫，所使用的出版語言就是HTML語言。
HTML結構
<html> <head> <meta charset="utf-8"> <title>文檔標題</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="index.js"></script> <style></style> </head> <body>......</body> </html>
HTML解釋
<html></html>稱為根元素，所有的網頁元素都在<html></html>中
<head></head>元素用於定義文檔的頭部
頭部元素含有有:<meta> <title> <link> <script> <style>
<title>標籤定義文檔的標題
<meta>標籤提供關於 HTML 文檔的元數據。元數據不會顯示在頁面上，但是對於機器是可讀的 典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最後修改時間以及其他元數據 元數據可用於瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。 針對搜索引擎的關鍵詞，一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面
<meta charset="UTF-8"><!--網頁編碼--><meta name="Generator" content="EditPlus®"><!--用以說明生成工具--><meta name="Author" content="xxx@qq.com"><!--文檔的作者--><meta name="Keywords" content="HTML,CSS,HTML5,CSS3,jQuery"><!--關鍵字--><meta name="Description" content="辛苦一陣子，幸福一輩子"><!--描述-->
<link>元素引入外部樣式
<!-- 可以通過以下代碼引入圖標 --><link rel="shortcut icon " type="images/x-icon" href="https://www.seosiguan.com/favicon.ico">
<script> 元素該元素可以定義頁面的腳本內容
<style>標籤用於為 HTML 文檔定義樣式信息
<body></body>元素用於定義網頁顯示的內容
HTML基本標籤
<div>：div標籤它是可用於組合其他HTML元素的容器。
可用於對大的內容塊設置樣式屬性。
文檔佈局。它取代了使用表格定義佈局的老式方法。
<hx>：hx標籤只用於標題，不要僅僅是爲了生成粗體或大號的文本而使用標題，html提供的標題有六種分別是h1 h2 h3 h4 h5 h6 。
<h1>定義字號最大的標題,代表大標題,一般一個頁面只用一次。
<h6>定義字號最小的標題。
<p>：p元素定義段落,會自動在其前後創建一些空白。瀏覽器會自動添加這些空間。
<br>：br元素會在瀏覽器插入一個簡單的換行符。
<hr>：hr標籤定義 HTML 頁面中的主題變化（比如話題的轉移），並顯示為一條水平線。
<a>：a標籤簽用來設置超文本鏈接。 超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
href屬性：描述了鏈接的目標URL。
target屬性：設置鏈接跳轉方式
<img>：img 標籤 用來申明圖像的插入。
src屬性：規定顯示圖像的 URL。URL為圖片的相對路徑或者絕對路徑均可。
alt屬性：規定圖像的替代文本。
title屬性：定義圖片的標題，鼠標移動到圖片出現。
<span>：span 用來組合文檔中的行內元素,可用作文本的容器。 span 元素沒有固定的格式表現，當對它應用樣式時，它纔會產生視覺上的變化。
<ul>：ul 標籤作為無序列表，它是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記，無序列表始於 <ul> 標籤。每個列表項始於 <li> 標籤
<ul><li>無序列表一</li> <li>無序列表二</li></ul>
<ol>有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤
<ol><li>有序列表一</li><li>有序列表二</li></ol>
<!--註釋--> 註釋標籤用於在源代碼中插入註釋。註釋不會顯示在瀏覽器中。 可使用註釋對代碼進行解釋，這樣做有助於在以後的時間對代碼的修改，當編寫了大量代碼時尤其有用
<!-- 這就是一個p標籤的寫法 --><p>這是一個p標籤</p>
HTML標籤屬性
HTML元素可以通過設置屬性，實現某些特定的效果。
屬性可以在元素中添加附加信息。
屬性一般描述於開始標籤。
屬性總是以名稱/值對的形式出現，比如：name="value"。
<p class="container"> 這是一個帶有class屬性且值為container的段落<P>標籤</p>
HTML文本格式化標籤
<b>：b標籤表示 以粗體字體形式展現內容
<strong>：strong標籤與b標籤都表示粗體。 但strong表示強調。例如，一個單詞或短語需要顯示得更高調，更響亮...總之要比一般文本更加突出。這裏我們就使用strong標籤在SEO中的應用，告知搜索引擎我們內容強調的是什麼。
<i>：i標籤表示 以斜體字體形式展現內容。
<em>：em標籤告訴瀏覽器把其中的文本表示為強調的內容 並以斜體形式展現。
<pre>：pre標籤可定義預格式化的文本。 被包圍在 pre 標籤 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。
<small>：small標籤 定義小型文本。
<bdo>：bdo 標籤指定文本方向，其dir屬性申明文本顯示方向。
ltr 屬性值默認從左到右顯示。
rtl 屬性值從右到左顯示。
<sub>:sub標籤定義下標文本，下標文本將會顯示在當前文本流中字符高度的一半為基準線的下方。
<sup>：sup 標籤定義上標文本。上標文本將會顯示在當前文本流中字符高度的一半為基準線的上方。
HTML單雙標記的區別
單標記指的是由一個標籤組成。
比如：換行符：<br/>，水平線：<hr/>，圖片標籤:<img/>，文本標籤:<input/>，link標籤：<link/>，元信息標籤： <meta/>。
雙標記由"開始標籤"和"結束標籤"兩部分構成，必須成對使用。
如：<p></p>段落標籤，其中<p>是開始標籤表示一個段落的開始，</p>是結束標籤，表示一個段落的結束。
常見的雙標記標籤的有：
<html> <head> <title> <body> <table> <span> <div> <p> <h1>等等。
HTML實體轉義
在HTML中，內容編輯時，如果是通過空格鍵編輯的多個空格，網頁只會顯示成一個，而小於號（<）和大於號（>），網站則會認為是標籤而無法直接顯示在頁面中。而這些都可以通過實體字符來解決。
HTML塊狀元素&&行內元素
根據CSS規範的規定，每一個網頁元素都有一個display屬性，用於確定該元素的類型，每一個元素都有默認的display屬性值，比如div元素，它的默認display屬性值為block，成為"塊級"元素(block-level)；而span元素的默認display屬性值為inline，稱為"行內"元素。
塊狀元素
塊級元素會獨佔一行，其寬度自動填滿其父元素寬度，一般情況下，塊級元素可以設置width, height屬性一般用來搭建網站架構、佈局、承載內容……
它包括以下這些標籤： address、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、menu、noframes、ol、p、pre、table、ul
行內元素
行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裡，知道一行排不下纔會換行，其寬度隨元素的內容而變化，行內元素設置width, height無效。一般用在網站內容之中的某些細節或部位，用以"強調、區分樣式、上標、下標、錨點"等等。
下麪這些標籤都屬於內嵌元素： a、b、bdo、big、small、br、cite、em、font、i、img、input、kbd、label、select、span、strong、sub、sup、textarea
HTML標籤嵌套規則
1. 塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素。
<div><h1></h1><p></p></div> —— 對<a href="#"><span></span></a> —— 對<span><div></div></span> —— 錯。
2. 塊級元素不能放在<p>裏面。
<p><ol><li></li></ol></p> —— 錯<p><div></div></p> —— 錯。
3. 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是h1、h2、h3、h4、h5、h6、p、dt。
4. 塊級元素與塊級元素並列、內嵌元素與內嵌元素並列。
<div><h2></h2><p></p></div> —— 對<div><a href="#"></a><span></span></div> —— 對<div><h2></h2><span></span></div> —— 錯。
HTML語義化標籤
什麼是語義化標籤 那麼什麼叫做語義化呢，說的通俗點就是：明白每個標籤的用途（在什麼情況下我可以使用這個標籤才合理）比如： 網頁上的文章的 標題 就可以用h1~h6，網頁上的各個欄目的 欄目名稱 也可以使`h1~h6。 文章中內容的段落就得放在 段落標籤p 中，在文章中有想強調的文本，就可以使用em標籤表示強調等等。
1. 為啥使用語義化標籤。
2. 更容易被搜索引擎收錄。
3. 更容易讓屏幕閱讀器讀出網頁內容。
4. 能夠更好的體現頁面的主題。
5. 兼容性更好，支持更多的網絡設備。
<a>標籤：實現超鏈接 強調:title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜索引擎瞭解鏈接地址的內容（語義化更友好）。
<p>標籤：文章段落放到<p>標籤中。
<hx>標籤：文章標題，欄目標題用<hx>表示 標題標籤一共有6個， h1、h2、h3、h4、h5、h6 分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。 <h1> 是最高的等級。
<strong>和<em>標籤：特別強調某幾個文字 但兩者在強調的語氣上有區別:<em> 表示強調，<strong> 表示更強烈的強調。並且在瀏覽器中<em> 默認用 斜體 表示，<strong>用 粗體 表示。 兩個標籤相比，目前國內前端程序員更喜歡使用<strong>表示強調。
<q>標籤：短文本引用 注意要引用的文本不用加 雙引號 ，瀏覽器會對q標籤自動添加雙引號。
<blockquote>標籤：長文本引用 注意瀏覽器對 <blockquote>標籤的解析是 縮進樣式。
<address>標籤：為網頁加入地址信息。
<ul>標籤：無序列表。
<ol>標籤：有序列表。
<caption>標籤：為表格添加標題和摘要 摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容 語法： <table summary="表格簡介文本"> 標題用以描述表格內容，標題的顯示位置：表格上方。 語法：<caption>標題文本</caption>。
如果你能熟練運用HTML標籤及w3c規範，那對於網站的SEO會有很強的優化功底，因為HTML幾乎覆蓋了頁面前端80%的優化範疇，也是SEO技術的核心部分之一。
結語：熟悉掌握HTML全套標籤和代碼的運用是我們SEO優化專員必修課，也是必要的工作，而且也能具備前端開發的能力。