- 作者：陳大魚頭
- github： KRISACHAN
上一篇分享了CSS的邏輯屬性與盒子模型中分享了一些有關設備屏幕的知識以及瀏覽器視口的座標構成。本篇則會分享HTML相關的一些知識。
我們在序章的開頭就簡單的講解了HTML的誕生歷史，本篇不作詳細講解，有興趣的可以去看wikipedia。
HTML大事記
首先我們簡單地來看一下HTML的發展歷程（具體各個版本的區別亦不做講解）。
- 1982年Tim Berners-Lee創建了html；
- 1989年Tim Berners-Lee規定HTML並在1990年底寫出瀏覽器和服務器軟件；
- 1991年底Tim Berners-Lee提及HTML標籤（它描述18個元素，包括HTML初始的、相對簡單的設計）；
- 1993年互聯網工程任務組（IETF）發佈首個HTML規範的提案；
- 1994年IETF創建一個HTML工作組；
- 1995年11月24日HTML 2.0作爲IETF RFC 1866發佈；
- IETF於1996年9月12日關閉它的HTML工作組；
- 1997年1月14日HTML 3.2作爲W3C推薦標準發佈。這是首個完全由W3C開發並標準化的版本；
- 1997年12月18日HTML 4.0作爲W3C推薦標準發佈；
- 1998年4月24日進行微調，不增加版本號；
- 1999年12月24日HTML 4.01作爲W3C推薦標準發佈；
- 2000年5月ISO/IEC 15445:2000（“ISO HTML”，基於HTML 4.01嚴格版）作爲ISO/IEC國際標準發佈。
- 2014年10月28日HTML 5作爲W3C推薦標準發佈；
- 2015年3月20日HTML6作爲提案被W3C提出；
- 2016年11月HTML5.1作爲W3C推薦標準發佈；
- 2017年12月14日HTML5.2作爲W3C推薦標準發佈；
- 2018年10月18日HTML5.3作爲W3C推薦標準發佈。
魚頭注：上面某些信息看得真讓人發愁。。。。。。
HTML標籤
對於應付日常的業務，寫在同一行的就用span，需要換行的就用div，如果有超鏈接就用a。長得醜？加color啊，不夠大？用font-size: xx-large啊。嗯，沒有任何問題，精通HTML。: )
此刻正在看這篇文章的你估計會覺得：“HTML有什麼好說的，每天都寫，鍵盤上div那幾個字母都要被我按爛了，這隻有初學者才需要學。”
嗯，說得對。那本篇結束，再見！
咦，不對，其實在魚頭看來HTML並不簡單，作爲一門原本是爲了學者們的交流而誕生的語言，本身就是充滿嚴謹性的，加上又已經發展了37個年頭，更是不簡單。
魚頭注：本篇不會對HTML的標籤結構跟文件組成進行介紹，有需要了解的童鞋可以參考MDN跟W3school
首先我們來看一個基本的HTML頁面會有什麼東西：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
從上面我們可以知道一個基本的HTML頁面會有定義文檔類型的<!DOCTYPE html>，告知瀏覽器這是一個HTML文檔的<html></html>，定義各種文檔屬性的<head></head>，以及定義內容主體的<body></body>。
首先我們一起來看看這幾大標籤的具體情況以及子標籤詳情。
DOCTYPE
<!DOCTYPE>是個聲明而不是標籤，它必須在HTML 文檔的第一行，位於 <html> 標籤之前。它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。必須始終向 HTML 文檔添加<!DOCTYPE>聲明，這樣瀏覽器才能獲知文檔類型。詳情請參考HTML 元素和有效的 DTD。
html
<html></html>限定了文檔的開始點和結束點，在它們之間是文檔的頭部和主體。我們來看看在<html></html>標籤中可添加的專屬屬性有哪些：
| 屬性 | 值 | 描述 |
|---|---|---|
| manifest | url | 定義一個 URL，在這個 URL 上描述了文檔的緩存信息。（已廢棄） |
| xmlns | http://www.w3.org/1999/xhtml | 定義 XML namespace 屬性。 |
全局屬性
HTML 屬性賦予元素意義和語境。下面的全局屬性可用於任何 HTML 元素。
| 屬性 | 描述 |
|---|---|
| accesskey | 規定激活元素的快捷鍵。 |
| class | 規定元素的一個或多個類名（引用樣式表中的類）。 |
| contenteditable | 規定元素內容是否可編輯。 |
| contextmenu | 規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。 |
| data-* | 用於存儲頁面或應用程序的私有定製數據。 |
| dir | 規定元素中內容的文本方向。 |
| draggable | 規定元素是否可拖動。 |
| dropzone | 規定在拖動被拖動數據時是否進行復制、移動或鏈接。 |
| hidden | 規定元素仍未或不再相關。 |
| id | 規定元素的唯一 id。 |
| lang | 規定元素內容的語言。 |
| spellcheck | 規定是否對元素進行拼寫和語法檢查。 |
| style | 規定元素的行內 CSS 樣式。 |
| tabindex | 規定元素的 tab 鍵次序。 |
| title | 規定有關元素的額外信息。 |
| translate | 規定是否應該翻譯元素內容。 |
head
<head>標籤用於定義文檔的頭部，它是所有頭部元素的容器。<head>描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關係等。
那麼有哪些標籤是可以放在<head></head>內的呢？
首先是<base>
<base>是個很實用但是很多人會忽略的標籤。
<base> 標籤爲頁面上的所有鏈接規定默認地址或默認目標。
通常情況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。
使用 <base> 標籤可以改變這一點。瀏覽器隨後將不再使用當前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括<a>、<img>、<link>、<form> 標籤中的 URL。
| 屬性 | 值 | 描述 |
|---|---|---|
| href | URL | 規定頁面中所有相對鏈接的基準 URL。（必選） |
| target | _blank , _parent , _self , _top , framename | 在何處打開頁面中所有的鏈接。（可選） |
代碼如下：
<!DOCTYPE html>
<html>
<head>
<base href="https://user-gold-cdn.xitu.io/" />
<base target="_blank" />
</head>
<body>
<img src="2018/12/25/167e378b5af48d99?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1" />
<a href="2018/12/25/167e378b5af48d99?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1">跳轉</a>
</body>
</html>
根據上面的[DEMO](https://krissarea.gitee.io/blog/css
/head-base.html)我們可以發現，在設置了<base>的url跟target之後，<img>跟<a>即使不設置base url跟跳轉行爲，也可以得到預期的效果。
然後是<link>、<style>、<title>
<link>、<style>、<title>可以算是非常常用的屬性了，所以也就不多做講解，只列個屬性表就好。
<link>
<link>主要用於style文件引入
| 屬性 | 值 | 描述 |
|---|---|---|
| charset | char_encoding | HTML5 中不支持。 |
| href | URL | 規定被鏈接文檔的位置。 |
| hreflang | language_code | 規定被鏈接文檔中文本的語言。 |
| media | media_query | 規定被鏈接文檔將被顯示在什麼設備上。 |
| rel | alternate , author , help , icon , licence , next , pingback , prefetch , prev , search , sidebar , stylesheet , tag | 規定當前文檔與被鏈接文檔之間的關係。 |
| rev | reversed relationship | HTML5 中不支持。 |
| sizes | *height , xwidth , *any | 規定被鏈接資源的尺寸。僅適用於 rel=“icon”。 |
| target | _blank , _self , _top , _parent , frame_name | HTML5 中不支持。 |
| type | MIME_type | 規定被鏈接文檔的 MIME 類型。 |
<style>
| 屬性 | 值 | 描述 |
|---|---|---|
| type | text/css | 規定樣式表的 MIME 類型。（必選） |
| media | screen , tty , tv , projection , handheld , print , braille , aural , all | 爲樣式表規定不同的媒介類型。（可選） |
<title>
可定義文檔的標題。
但是有一點可能大家不知道，或者都這麼做了，或者沒有，但是 <title> 標籤是 <head> 標籤中唯一要求包含的東西。
<meta>
最後是 <meta>，這是非常重要的一個標籤，它提供了有關當前HTML元素的元信息 (meta-information)，比如描述、針對搜索引擎的關鍵詞以及刷新頻率。
<meta> 的屬性對象如下：
| 屬性 | 描述 |
|---|---|
| content | 設置或返回 元素的 content 屬性的值。 |
| http-equiv | 把 content 屬性連接到一個 HTTP 頭部。 |
| name | 把 content 屬性連接到某個名稱。 |
| scheme | 設置或返回用於解釋 content 屬性的值的格式。 |
我們首先來看content，此屬性包含http-equiv 或name 屬性的值，具體取決於所使用的值。
<meta name="keywords" content="WEB,CSS,魚頭" />
其次是scheme，此屬性是用來設置或返回用於解釋 content 屬性的值的格式。例子如下：
<meta name="revised" content="2019-04-03" scheme="YYYY-MM-DD" />
有趣的是，MDN上有這麼一段描述：
Notes: Do not use this attribute as it is obsolete. There is no replacement for it as there was no real usage for it. Omit it altogether.
意思就是不要用這屬性，因爲這屬性並沒什麼用處。: )
然後是name，此屬性定義文檔級元數據的名稱。值得注意的是，如果定義的元數據設置了itemprop, http-equiv or charset ，就不能再設置name了。
name的值含義如下
| 值 | 描述 |
|---|---|
| application-name | 定義正運行在該網頁上的網絡應用名稱 |
| author | 文檔作者 |
| description | 其中包含頁面內容的簡短和精確的描述。一些瀏覽器，如Firefox和Opera，將其用作書籤頁面的默認描述。 |
| generator | 包含生成頁面的軟件的標識符。 |
| keywords | 包含與逗號分隔的頁面內容相關的單詞。 |
| referrer | 控制所有從該文檔發出的 HTTP 請求中HTTP Referer 首部的內容。 |
| others | 其他的內容。 |
詳細name值，可以訪問https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#屬性。
最後我們來看看http-equiv，此屬性把content屬性連接到HTTP頭部。
| 值 | 描述 |
|---|---|
| content-security-policy | 允許站點管理者在指定的頁面控制用戶代理的資源。除了少數例外，這條政策將極大地指定服務源 以及腳本端點。這將幫助防止跨站腳本攻擊。 |
| default-style | 這個屬性指定了在頁面上使用的首選樣式表. content屬性必須包含<link> 元素的標題, href屬性鏈接到CSS樣式表或包含CSS樣式表的<style>元素的標題。 |
| refresh | 這個屬性指定如果<content>只包含一個正整數，則是重新載入頁面的時間間隔(秒)，包含一個正整數並且跟着一個字符串,則是重定向到指定鏈接的時間間隔(秒)。 |
詳細http-equiv值，可以訪問https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#屬性。
body
<body>標籤內存放文檔的內容。<html>內可使用的標籤大概有357個，其中MDN給**<body>**內的元素分了11類。有需要了解的可參考https://developer.mozilla.orgzh-CN/docs/Web/HTML/Element。
按照MDN的劃分，一共有以下11類標籤：
1. 內容分區：
內容分區元素允許你將文檔內容從邏輯上進行組織劃分。
2. 文本內容
使用 HTML 文本內容元素來組織在開標籤 `` 和閉標籤
</body>裏的塊或章節的內容。這些元素能標識內容的宗旨或結構，而這對於 accessibility 和 SEO 很重要。
3. 內聯文本語義
使用 HTML 內聯文本語義（Inline text semantics）定義一個單詞、一行內容，或任意文字的語義、結構或樣式。
4. 圖片和多媒體
HTML 支持各種多媒體資源，例如圖像，音頻和視頻。
5. 內嵌內容
除了常規的多媒體內容，HTML 可以包括各種其他的內容，即使它並不容易交互。
6. 腳本
爲了創建動態內容和 Web 應用程序，HTML 支持使用腳本語言，最突出的就是 JavaScript。某些元素支持此功能。
7. 編輯標識
這些元素能標示出某個文本被更改過的部分。
8. 表格內容
這裏的元素用於創建和處理表格數據。
9. 表單
HTML 提供了許多可一起使用的元素，這些元素能用來創建一個用戶可以填寫並提交到網站或應用程序的表單。
10. 交互元素
HTML 提供了一系列有助於創建交互式用戶界面對象的元素。
11. Web組件
Web 組件是一種與 HTML 相關聯（HTML-related）的技術，簡單來說，它允許創建自定義元素，並如同普通的 HTML 一樣使用它們。此外，你甚至可以創建經過自定義的標準 HTML 元素。
標籤語義化
語義化到底重不重要？
有的人認爲，在可以“競價排名”以及“軟件界面”的場景多於“富文本”的前提下，HTML語意並不重要。只要div、span、a標籤差不多就能走天下了，最有意思的是，百度百科跟維基百科這類文檔類網站，HTML結構大多數都是上述的情況。
但是，標籤語義化真的不重要嗎？
這個問題魚頭暫時不回答，但會在後續的文章中體現並實踐魚頭的想法。如果你對這個問題感興趣，也可以通過留言或者加魚頭好友或者進魚頭的微信羣來討論，聯繫方式在文章底部。
我們知道，在HTML中，每個標題是通過標題標籤來定義的，標題標籤一共有6個，分別是：h1~6。例子如下：
<h1>我是一級標題</h1>
<h2>我是二級標題</h2>
<h3>我是三級標題</h3>
<h4>我是四級標題</h4>
<h5>我是五級標題</h5>
<h6>我是六級標題</h6>
如果是連續的標題，則可以用 <hgroup> 來連接：
<hgroup>
<h1>我是一級標題</h1>
<h2>我是二級標題</h2>
<h3>我是三級標題</h3>
<h4>我是四級標題</h4>
<h5>我是五級標題</h5>
<h6>我是六級標題</h6>
</hgroup>
如果是段落內容，則用 <p>：
<p>我是段落內容</p>
如果我們要列一個列表則可以用 <ol></ol> 或 <li></li> 。如果只是要標記項目，我們可以用 <li></li> ，例子如下：
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>奧特曼</li>
<li>橙子</li>
</ul>
若是標記順序，則用 <ol></ol> ，例子如下：
<ol>
<li>向前走300米</li>
<li>右轉</li>
<li>向前走300米</li>
<li>右轉</li>
<li>向前走300米</li>
</ol>
當然我們也可以按需嵌套。
<ol>
<li>先用蛋白一個、鹽半茶匙及澱粉兩大匙攪拌均勻，調成“醃料”，雞胸肉切成約一釐米見方的碎丁並用“醃料”攪拌均勻，醃漬半小時。</li>
<li>用醬油一大匙、澱粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調拌均勻，調成“綜合調味料”。</li>
<li>雞丁醃好以後，色拉油下鍋燒熱，先將雞丁倒入鍋內，用大火快炸半分鐘，炸到變色之後，撈出來瀝乾油汁備用。</li>
<li>在鍋裏留下約兩大匙油，燒熱後將切好的幹辣椒下鍋，用小火炒香後，再放入花椒粒和蔥段一起爆香。隨後雞丁重新下鍋，用大火快炒片刻後，再倒入“綜合調味料”繼續快炒。</li>
<ul>
<li>如果你採用正宗川菜做法，最後只需加入花生米，炒拌幾下就可以起鍋了。</li>
<li>如果你在北方，可加入黃瓜丁、胡蘿蔔丁和花生米，翻炒後起鍋。</li>
</ul>
</ol>
在我們平常說話的時候，爲了突出重點，我們往往會強調某些詞，就如如下的例子：
<p>我<em>非常</em>喜歡加班</p>
如果是重音強調，則：
<p>魚頭，明天<strong>別遲到</strong>了</p>
在我們身邊任何的地方都是非常需要語義學的，我們依靠過去的學習經驗，通過所見的物體就可以知道它代表的意義。例如“紅燈停，綠燈行”。如果這個語義出錯或者弄反了，造成的影響是不堪設想的。
同樣的道理，我們需要確保使用了正確的元素來給予內容正確的意思、作用以及外形。
每個標籤都有自己的使用場景，如果要全部列出來，也不是一篇文章能寫得完的。更多的需要能堅持看到這裏的你來探索，當然也非常歡迎你來跟魚頭一起討論標籤語義化的問題。
參考資料：
【Hello CSS】系列
【Hello CSS】是以CSS基礎概念爲主題的系列文章，旨在幫助大家更深刻地瞭解並且提高CSS在各位開發者心目中的地位。由於魚頭我水平有限，文筆有限，如果各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收穫，這就讓魚頭我喜不自勝了！
如果你也喜歡 CSS，喜歡探討技術，或者對本文，本系列有任何的意見或建議，你可以掃描下方二維碼，關注微信公衆號“ 魚頭的Web海洋 ”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。
