07丨HTML元信息類標簽

head 標簽

首先我們先來了解一下 head 標簽,head 標簽本身并不攜帶任何信息,它主要是作為盛放其它語義類標簽的容器使用。

head 標簽規定了自身必須是 html 標簽中的第一個標簽,它的內容必須包含一個 title,并且最多只能包含一個 base。如果文檔作為 iframe,或者有其他方式指定了文檔標題時,可以允許不包含 title 標簽。

title 標簽

你還記得嗎,我們的語義類標簽中也有一組表示標題的標簽:h1-h6

headingtitle 兩個英文單詞意義區分十分微妙,在中文中更是找不到對應的詞匯來區分。但是實際使用中,兩者確實有一定區別。

HTML 標準中,特意討論了這個問題。我們思考一下,假設有一個介紹蜜蜂跳舞求偶儀式的科普頁面,我們試著把以下兩個文字分別對應到 titleh1

  • 蜜蜂求偶儀式舞蹈
  • 舞蹈

在聽 / 看正確答案前,你不妨先想想,自己的答案是什么呢?為什么?

好了,思考之后,我們來看看正確答案。正確答案是“蜜蜂求偶儀式舞蹈”放入 title,“舞蹈”放入 h1

我來講一講為什么要這樣放呢?這主要是考慮到 title 作為元信息,可能會被用在瀏覽器收藏夾、微信推送卡片、微博等各種場景,這時侯往往是上下文缺失的,所以 title 應該是完整地概括整個網頁內容的

h1 則僅僅用于頁面展示,它可以默認具有上下文,并且有鏈接輔助,所以可以簡寫,即便無法概括全文,也不會有很大的影響。

base 標簽

base 標簽實際上是個歷史遺留標簽。它的作用是給頁面上所有的 URL 相對地址提供一個基礎。

base 標簽最多只有一個(若有多個就使用第一個),它改變全局的鏈接地址,它是一個非常危險的標簽,容易造成跟 JavaScript 的配合問題,所以在實際開發中,我比較建議你使用 JavaScript 來代替 base 標簽。

meta 標簽

head 中可以出現任意多個 meta 標簽。一般的 meta 標簽由 namecontent 兩個屬性來定義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 標簽可以被自由定義,只要寫入和讀取的雙方約定好 namecontent 的格式就可以了。

我們來介紹一個 meta 類型,它沒有在 HTML 標準中定義,卻是移動端開發的事實標準:它就是 name 為 viewportmeta

orz viewport 竟然是自定義的

這類 metaname 屬性為 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 的顏色)。

others

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容