HTML大事記

首先我們簡單地來看一下HTML的發展歷程（具體各個版本的區別亦不做講解）。

1982年建立了html；
1989年規定HTML並在1990年底寫出瀏覽器和伺服器軟體；
1991年底提及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（" 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頁面會有什麼東西：

<!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

<html></html>限定了文件的開始點和結束點，在它們之間是文件的頭部和主體。我們來看看在<html></html>標籤中可新增的專屬屬性有哪些：

屬性	值	描述
manifest	url	定義一個 URL，在這個 URL 上描述了文件的快取資訊。（已廢棄）
		定義 XML namespace 屬性。

全域性屬性

HTML 屬性賦予元素意義和語境。下面的全域性屬性可用於任何 HTML 元素。

屬性	描述
	規定啟用元素的快捷鍵。
	規定元素的一個或多個類名（引用樣式表中的類）。
	規定元素內容是否可編輯。
	規定元素的上下文選單。上下文選單在使用者點選元素時顯示。
	用於儲存頁面或應用程式的私有定製資料。
	規定元素中內容的文字方向。
	規定元素是否可拖動。
	規定在拖動被拖動資料時是否進行復制、移動或連結。
	規定元素仍未或不再相關。
	規定元素的唯一 id。
	規定元素內容的語言。
	規定是否對元素進行拼寫和語法檢查。
	規定元素的行內 CSS 樣式。
	規定元素的 tab 鍵次序。
	規定有關元素的額外資訊。
	規定是否應該翻譯元素內容。

head

<head>標籤用於定義文件的頭部，它是所有頭部元素的容器。<head>描述了文件的各種屬性和資訊，包括文件的標題、在 Web 中的位置以及和其他文件的關係等。

那麼有哪些標籤是可以放在<head></head>內的呢？

首先是<base>

<base>是個很實用但是很多人會忽略的標籤。

<base> 標籤為頁面上的所有連結規定預設地址或預設目標。

通常情況下，瀏覽器會從當前文件的 URL 中提取相應的元素來填寫相對 URL 中的空白。

使用 <base> 標籤可以改變這一點。瀏覽器隨後將不再使用當前文件的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括<a>、<img>、<link>、<form> 標籤中的 URL。

屬性	值	描述
	URL	規定頁面中所有相對連結的基準 URL。（必選）
	_blank , _parent , _self , _top , framename	在何處開啟頁面中所有的連結。（可選）

程式碼如下：

<!DOCTYPE html> <html>   <head>     <base href="" />     <base target="_blank" />   </head>   <body>     <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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](krissarea.gitee.io/blog/css /head-base.html)我們可以發現，在設定了<base>的url跟target之後，<img>跟<a>即使不設定base url跟跳轉行為，也可以得到預期的效果。

然後是<link>、<style>、<title>

<link>、<style>、<title>可以算是非常常用的屬性了，所以也就不多做講解，只列個屬性表就好。

<link>

<link>主要用於style檔案引入

屬性	值	描述
	char_encoding	HTML5 中不支援。
	URL	規定被連結文件的位置。
	language_code	規定被連結文件中文字的語言。
	media_query	規定被連結文件將被顯示在什麼裝置上。
	alternate , author , help , icon , licence , next , pingback , prefetch , prev , search , sidebar , stylesheet , tag	規定當前文件與被連結文件之間的關係。
	reversed relationship	HTML5 中不支援。
	height , xwidth , any	規定被連結資源的尺寸。僅適用於 rel="icon"。
	_blank , _self , _top , _parent , frame_name	HTML5 中不支援。
	MIME_type	規定被連結文件的 MIME 型別。

<style>

屬性	值	描述
	text/css	規定樣式表的 MIME 型別。（必選）
	screen , tty , tv , projection , handheld , print , braille , aural , all	為樣式表規定不同的媒介型別。（可選）

<title>

可定義文件的標題。

但是有一點可能大家不知道，或者都這麼做了，或者沒有，但是 <title> 標籤是 <head> 標籤中唯一要求包含的東西。

<meta>

最後是 <meta>，這是非常重要的一個標籤，它提供了有關當前HTML元素的元資訊 (meta-information)，比如描述、針對搜尋引擎的關鍵詞以及重新整理頻率。

<meta> 的屬性物件如下：

屬性	描述
	設定或返回元素的 content 屬性的值。
	把 content 屬性連線到一個 HTTP 頭部。
	把 content 屬性連線到某個名稱。
	設定或返回用於解釋 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	其他的內容。

最後我們來看看http-equiv，此屬性把content屬性連線到HTTP頭部。

值	描述
content-security-policy	允許站點管理者在指定的頁面控制使用者代理的資源。除了少數例外，這條政策將極大地指定服務源以及指令碼端點。這將幫助防止跨站指令碼攻擊。
default-style	這個屬性指定了在頁面上使用的首選樣式表. `content`屬性必須包含元素的標題, `href`屬性連結到CSS樣式表或包含CSS樣式表的元素的標題。
refresh	這個屬性指定如果`<content>`只包含一個正整數，則是重新載入頁面的時間間隔(秒)，包含一個正整數並且跟著一個字串,則是重定向到指定連結的時間間隔(秒)。

body

<body>標籤記憶體放文件的內容。<html>內可使用的標籤大概有357個，其中MDN給**<body>**內的元素分了11類。

按照MDN的劃分，一共有以下11類標籤：

1. 內容分割槽：

內容分割槽元素允許你將文件內容從邏輯上進行組織劃分。

2. 文字內容

使用 HTML 文字內容元素來組織在開標籤和閉標籤 </body> 裡的塊或章節的內容。這些元素能標識內容的宗旨或結構，而這對於和很重要。

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】第四章-HTML的標籤與語意