meta 標籤 詳解
阿新 • • 發佈:2018-10-31
定義與用法
- <meta> 元素可提供有關頁面的元資訊(meta-information),通常用於指定網頁的描述,關鍵詞,檔案的最後修改時間,作者、搜尋引擎和更新頻度及其他元資料。
- 元資料可以被使用瀏覽器(如何顯示內容或重新載入頁面),搜尋引擎(關鍵詞),或其他 Web 服務呼叫。
- <meta> 標籤位於文件的頭部,不包含任何內容。元資料不會顯示在客戶端,但是會被瀏覽器解析。
- <meta> 標籤的屬性定義了與文件相關聯的名稱/值對。
- <meta> 標籤永遠位於 head 元素內部。
- 元資料總是以名稱/值的形式被成對傳遞的。
- meta 標籤可以出現多次,如果沒有提供 name 屬性,那麼名稱/值對中的名稱會採用 http-equiv 屬性的值。
- 在 HTML 中 <meta> 標籤沒有結束標籤;在 XHTML 中 <meta> 標籤必須包含結束標籤。
- 如下所示:
<head> <meta name="description" content="免費線上教程"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="runoob"> <meta charset="UTF-8"> </head>
meta 標籤屬性
必需的屬性:
屬性 | 值 | 描述 | 版本支援 |
---|---|---|---|
content | some_text | 定義與 http-equiv 或 name 屬性相關的元資訊 | 4,5 |
可選的屬性:
屬性 | 值 | 描述 | 版本支援 |
---|---|---|---|
charset |
character encoding |
定義文件的字元編碼。 |
5 |
|
把 content 屬性關聯到 HTTP 頭部。 | 4,5 | |
name |
|
把 content 屬性關聯到一個名稱。 | 4,5, |
scheme | some_text | 定義用於翻譯 content 屬性值的格式。 | 4 |
name 屬性
- name 屬性提供了 content 中鍵值對的名稱。HTML 和 XHTML 標籤都沒有指定任何預先定義的 <meta> 名稱。通常情況下,您可以自由使用對自己和源文件的讀者來說富有意義的名稱。
- "keywords" 是一個經常被用到的名稱,它為文件定義了一組關鍵字,某些搜尋引擎在遇到這些關鍵字時,會用這些關鍵字對文件進行分類。
- 類似這樣的 meta 標籤可能對於進入搜尋引擎的索引有幫助:
<meta name="keywords" content="HTML,ASP,PHP,SQL">
- 如果沒有提供 name 屬性,那麼 content 中鍵值對的名稱會採用 http-equiv 屬性的值。
http-equiv 屬性
- 使用帶有 http-equiv 屬性的 <meta> 標籤時,伺服器將把名稱/值對新增到傳送給瀏覽器的內容頭部。
- 當伺服器向瀏覽器傳送文件時,會先發送許多名稱/值對,雖然有些伺服器會發送許多這種名稱/值對,但是所有伺服器都至少要傳送一個:content-type:text/html,這將告訴瀏覽器準備接受一個 HTML 文件。
如: <meta http-equiv="charset" content="iso-8859-1"> <meta http-equiv="expires" content="31 Dec 2008"> 這樣傳送到瀏覽器的頭部就應該包含: content-type: text/html charset:iso-8859-1 expires:31 Dec 2008
content 屬性
- content 屬性提供了名稱/值對中的值。該值可以是任何有效的字串。
- content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。
name viewport 移動端優化
- 可以參考:viewport 深入理解(https://www.runoob.com/w3cnote/viewport-deep-understanding.html)
- viewport 屬性用於移動端顯示優化,特別是手機等裝置上顯示時,加上此屬性和不加完全是兩回事,加上之後網頁看起來會更加像手機上的APP頁面。
- 常用 content 鍵值對如下:
width | 設定layout viewport 的寬度,為一個正整數,或字串"width-device" |
initial-scale | 設定頁面的初始縮放值,為一個數字,可以帶小數 |
minimum-scale | 允許使用者的最小縮放值,為一個數字,可以帶小數 |
maximum-scale | 允許使用者的最大縮放值,為一個數字,可以帶小數 |
height | 設定layout viewport 的高度,這個屬性對我們並不重要,很少使用 |
user-scalable | 是否允許使用者進行縮放,值為 "no" 或 "yes", no 代表不允許,yes 代表允許 |
-
使用示例如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
HTML 4 與 5 差異
- HTML5 不支援 scheme 屬性。
- 在 HTML5 中,有一個新的 charset 屬性,它使字符集的定義更加容易:
HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5: <meta charset="UTF-8">
常用例項
例項 1 - 定義文件關鍵詞,用於搜尋引擎:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
例項 2 - 定義web頁面描述:
<meta name="description" content="Free Web tutorials on HTML and CSS">
例項 3 - 定義頁面作者:
<meta name="author" content="Hege Refsnes">
例項 4 - 每30秒重新整理頁面:
<meta http-equiv="refresh" content="30">
例項 5 - 10 秒後重定向到 http://www.w3school.com.cn 頁面:
<meta http-equiv="Refresh" content="10;url=http://www.w3school.com.cn" />
例項6 - 移動端頁面顯示優化
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">