HTML แบบฟอร์ม <meta>

  • หน้าก่อน <menu>
  • หน้าต่อไป <meter>

定義和用法

<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 ตัวอักษรบอร์ดวิสัย

คำเตือน：หากคุณเข้าถึงเว็บไซต์นี้ด้วยโทรศัพท์หรือแทบเล็ต คุณสามารถคลิกลิงก์สองลิงก์ด้านล่างเพื่อดูความแตกต่าง



ไม่มี meta ตัวอักษรบอร์ดวิสัย


มี meta ตัวอักษรบอร์ดวิสัย

การตั้งค่า CSS โดยเริ่มต้น

ไม่มี

การสนับสนุนโปรแกรมนีเวอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อน <menu>
  • หน้าต่อไป <meter>