選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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 設定

無。


×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援