HTML <meta> 標簽

定義和用法

<meta> 標簽定義關于 HTML 文檔的元數據。元數據是關于數據的數據（信息）。

<meta> 標簽始終位于 <head> 元素 內，通常用于指定字符集、頁面描述、關鍵詞、文檔作者和視口設置：

元數據不會顯示在頁面上，但可以被機器解析。

瀏覽器（如何顯示內容或重新加載頁面）、搜索引擎（關鍵詞）和其他網絡服務會用到元數據。

提示：meta 元素有多種不同用法，而且一個 HTML 文檔中可以多個 meta 元素。

提示：通過 <meta> 標簽，有一種方法讓網頁設計師控制視口（即用戶在網頁中可見的區域）（請參見下面的"設置視口"實例）。

注意：每個 meta 元素只能用于一種用途。如果想要使用的特性不止一個，那就應該在 head 元素中添加多個 meta 元素。

另請參閱：

HTML 教程：HTML 頭部

HTML DOM 參考手冊：Meta 對象

實例

<head>
  <meta charset="UTF-8">
  <meta name="description" content="免費的 Web 教程">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

親自試一試

屬性

屬性 值 描述
charset 字符集 規定 HTML 文檔的字符編碼。
content 文本 規定與 http-equiv 或 name 屬性關聯的值。
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 為 content 屬性的信息/值提供 HTTP 標頭。
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 規定元數據的名稱。

全局屬性

<meta> 標簽還支持 HTML 中的全局屬性。

meta 元素有三種典型的用法：

  1. 指定名/值元數據對
  2. 聲明字符編碼
  3. 模擬 HTTP 標頭字段

1：指定各種名/值元數據對

meta 元素可以使用名/值對定義元數據，為此需要用到其 name 和 content 屬性。

為搜索引擎定義關鍵字：

<meta name="keywords" content="HTML, CSS, JavaScript">

定義有關網頁的描述：

<meta name="description" content="Free Web tutorials for HTML and CSS">

定義頁面的作者：

<meta name="author" content="John Doe">

設置視口，改善網站在各種設備上的外觀：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2：聲明字符編碼

使用 charset 屬性聲明該頁面采用 UTF-8 字符編碼：

<meta charset="UTF-8">

3：模擬 HTTP 標頭字段

使用 http-equiv 屬性和 content 屬性，每 30 秒刷新一次文檔：

<meta http-equiv="refresh" content="30">

在 HTML5 中的變化

charset 屬性在 HTML5 中是新增的。

在 HTML4 中，http-equiv 屬性可以有任意多個不同的值。而在 HTML5 中，只能使用本頁提到的值。

HTML4 中的 scheme 屬性在 HTML5 中已不再使用。

此外，現在已不再使用 meta 元素來指定網頁所用的語言。

設置視口

HTML5 引入了一種方法，使 Web 設計者可以通過 <meta> 標簽來控制視口。

您應該在所有網頁中包含以下 <meta> 視口元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它為瀏覽器提供了關于如何控制頁面尺寸和縮放比例的指令。

width=device-width 部分將頁面的寬度設置為跟隨設備的屏幕寬度（視設備而定）。

當瀏覽器首次加載頁面時，initial-scale=1.0 部分設置初始縮放級別。

下面分別是不帶視口 meta 標簽的網頁、以及帶視口 meta 標簽的網頁的例子：

提示：如果您使用手機或平板電腦瀏覽這張頁面，則可以單擊下面的兩個鏈接以查看不同之處。



沒有視口元標記


帶有視口元標記

默認的 CSS 設置

無。

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持