head 標簽
首先我們先來了解一下 head
標簽,head
標簽本身并不攜帶任何信息,它主要是作為盛放其它語義類標簽的容器使用。
head 標簽規定了自身必須是 html 標簽中的第一個標簽,它的內容必須包含一個 title,并且最多只能包含一個 base。如果文檔作為 iframe,或者有其他方式指定了文檔標題時,可以允許不包含 title
標簽。
title 標簽
你還記得嗎,我們的語義類標簽中也有一組表示標題的標簽:h1-h6
。
heading
和 title
兩個英文單詞意義區分十分微妙,在中文中更是找不到對應的詞匯來區分。但是實際使用中,兩者確實有一定區別。
在
HTML
標準中,特意討論了這個問題。我們思考一下,假設有一個介紹蜜蜂跳舞求偶儀式的科普頁面,我們試著把以下兩個文字分別對應到title
和h1
。
- 蜜蜂求偶儀式舞蹈
- 舞蹈
在聽 / 看正確答案前,你不妨先想想,自己的答案是什么呢?為什么?
好了,思考之后,我們來看看正確答案。正確答案是“蜜蜂求偶儀式舞蹈”放入 title
,“舞蹈”放入 h1
。
我來講一講為什么要這樣放呢?這主要是考慮到 title
作為元信息,可能會被用在瀏覽器收藏夾、微信推送卡片、微博等各種場景,這時侯往往是上下文缺失的,所以 title
應該是完整地概括整個網頁內容的。
而 h1
則僅僅用于頁面展示,它可以默認具有上下文,并且有鏈接輔助,所以可以簡寫,即便無法概括全文,也不會有很大的影響。
base 標簽
base
標簽實際上是個歷史遺留標簽。它的作用是給頁面上所有的 URL 相對地址提供一個基礎。
base
標簽最多只有一個(若有多個就使用第一個),它改變全局的鏈接地址,它是一個非常危險的標簽,容易造成跟 JavaScript 的配合問題,所以在實際開發中,我比較建議你使用 JavaScript 來代替 base 標簽。
meta 標簽
在 head
中可以出現任意多個 meta
標簽。一般的 meta
標簽由 name
和 content
兩個屬性來定義。name
表示元信息的名,content
則用于表示元信息的值。
具有 http-equiv 屬性的 meta
具有 http-equiv
屬性的 meta
標簽,表示執行一個命令,這樣的 meta
標簽可以不需要 name
屬性了。
例如,下面一段代碼,相當于添加了 content-type
這個 http
頭,并且指定了 http
編碼方式。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
除了 content-type
,還有以下幾種命令:
- content-language 指定內容的語言;
- default-style 指定默認樣式表;
- refresh 刷新;
- set-cookie 模擬 http 頭 set-cookie,設置 cookie;
- x-ua-compatible 模擬 http 頭 x-ua-compatible,聲明 ua 兼容性;
- content-security-policy 模擬 http 頭 content-security-policy,聲明內容安全策略。
name 為 viewport 的 meta
實際上,meta 標簽可以被自由定義,只要寫入和讀取的雙方約定好 name
和 content
的格式就可以了。
我們來介紹一個 meta
類型,它沒有在 HTML
標準中定義,卻是移動端開發的事實標準:它就是 name 為 viewport
的 meta
。
orz
viewport
竟然是自定義的
這類 meta
的 name
屬性為 viewport
,它的 content
是一個復雜結構,是用逗號分隔的鍵值對,鍵值對的格式是 key=value
。
它能表示的全部屬性如下:
- width:頁面寬度,可以取值具體的數字,也可以是 device-width,表示跟設備寬度相等。
- height:頁面高度,可以取值具體的數字,也可以是 device-height,表示跟設備高度相等。
- initial-scale:初始縮放比例。
- minimum-scale:最小縮放比例。
- maximum-scale:最大縮放比例。
- user-scalable:是否允許用戶縮放。
對于已經做好了移動端適配的網頁,應該把用戶縮放功能禁止掉,寬度設為設備寬度,一個標準的 meta
如下:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
其它預定義的 meta
在 HTML 標準中,還定義了一批 meta
標簽的 name
,可以視為一種有約定的 meta
,我在這里列出來,你可以簡單了解一下。
application-name:如果頁面是 Web application,用這個標簽表示應用名稱。
- author: 頁面作者。
- description:頁面描述,這個屬性可能被用于搜索引擎或者其它場合。
- generator: 生成頁面所使用的工具,主要用于可視化編輯器,如果是手寫 HTML 的網頁,不需要加這個 meta。
- keywords: 頁面關鍵字,對于 SEO 場景非常關鍵。
- referrer: 跳轉策略,是一種安全考量。
- theme-color: 頁面風格顏色,實際并不會影響頁面,但是瀏覽器可能據此調整頁面之外的 UI(如窗口邊框或者 tab 的顏色)。