HTML <meta> 標籤
示例
描述 HTML 文件中的元資料
<head>
<meta charset="UTF-8">
<meta name="description" content="免費網頁教程">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
<meta> 標籤定義 HTML 文件的元資料。元資料是關於資料的資料(資訊)。
<meta> 標籤始終放在 <head> 元素內,通常用於指定字元集、頁面描述、關鍵字、文件作者和視口設定。
元資料不會顯示在頁面上,但可以被機器解析。
元資料由瀏覽器(如何顯示內容或重新載入頁面)、搜尋引擎(關鍵字)和其他 Web 服務使用。
有一種方法可以讓網頁設計師透過 <meta> 標籤來控制視口(使用者可見的網頁區域)(參見下面的“設定視口”示例)。
瀏覽器支援
元素 | |||||
---|---|---|---|---|---|
<meta> | 是 | 是 | 是 | 是 | 是 |
屬性
Attribute | 值 | 描述 |
---|---|---|
charset | character_set | 指定 HTML 文件的字元編碼 |
content | text | 指定與 http-equiv 或 name 屬性關聯的值 |
http-equiv | content-security-policy content-type default-style 重新整理 |
為 content 屬性的資訊/值提供 HTTP 標頭 |
name | application-name author 描述 generator keywords viewport |
指定元資料的名稱 |
全域性屬性
<meta> 標籤也支援 HTML 中的 全域性屬性。
更多示例
為搜尋引擎定義關鍵字
<meta name="keywords" content="HTML, CSS, JavaScript">
定義網頁的描述
<meta name="description" content="Free Web tutorials for HTML and CSS">
定義頁面的作者
<meta name="author" content="John Doe">
每 30 秒重新整理文件
<meta http-equiv="refresh" content="30">
設定視口,使您的網站在所有裝置上看起來都很好
<meta name="viewport" content="width=device-width, initial-scale=1.0">
設定視口
視口是使用者可見的網頁區域。它隨裝置而異 - 在手機上比在電腦螢幕上小。
您應該在所有網頁中包含以下 <meta>
元素
<meta name="viewport" content="width=device-width, initial-scale=1.0">
這會給瀏覽器指令,告知如何控制頁面的尺寸和縮放。
width=device-width
部分將頁面的寬度設定為與裝置的螢幕寬度一致(這將因裝置而異)。
initial-scale=1.0
部分設定了瀏覽器首次載入頁面時的初始縮放級別。
這是一個沒有視口 meta 標籤的網頁示例,以及同一個網頁有視口 meta 標籤的示例。
提示:如果您正在用手機或平板電腦瀏覽此頁面,可以點選下面的兩個連結來檢視差異。
您可以在我們的 響應式網頁設計 - 視口教程 中閱讀更多關於視口的資訊。
相關頁面
HTML 教程:HTML Head
HTML DOM 參考:Meta 物件
預設 CSS 設定
無。