HTML <meta> name 屬性
示例
使用 name 屬性為 HTML 文件定義描述、關鍵詞和作者。還可以定義 viewport 以控制不同裝置上頁面的尺寸和縮放。
<head>
<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>
自己動手試一試 »
name
屬性指定元資料的名稱。
name
屬性為 content
屬性的資訊/值指定名稱。
注意: 如果設定了 http-equiv
屬性,則不應設定 name
屬性。
HTML5 引入了一種方法,透過 <meta>
標籤讓網頁設計師控制視口(使用者可見的網頁區域)(參見下面的“設定視口”示例)。
瀏覽器支援
Attribute | |||||
---|---|---|---|---|---|
name | 是 | 是 | 是 | 是 | 是 |
語法
<meta name="value">
屬性值
值 | 描述 |
---|---|
application-name | 指定頁面所代表的 Web 應用程式的名稱。 |
author | 指定文件作者的名稱。例如:<meta name="author" content="John Doe">
|
描述 | 指定頁面描述。搜尋引擎可以抓取此描述以在搜尋結果中顯示。例如:<meta name="description" content="免費網頁教程">
|
generator | 指定生成文件的軟體之一(手動編寫的頁面不使用)。例如:<meta name="generator" content="FrontPage 4.0">
|
keywords | 指定一個逗號分隔的關鍵詞列表 - 與頁面相關(告知搜尋引擎頁面的內容)。例如:<meta name="keywords" content="HTML, meta tag, tag reference">
|
viewport | 控制視口(使用者可見的網頁區域)。 視口會因裝置而異,在手機上的尺寸會比電腦螢幕上的小。 您應該在所有網頁中包含以下 <meta> viewport 元素。 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> viewport 元素會向瀏覽器提供關於如何控制頁面尺寸和縮放的指令。 width=device-width 部分將頁面的寬度設定為跟隨裝置的螢幕寬度(這會因裝置而異)。 initial-scale=1.0 部分設定了頁面首次載入到瀏覽器時顯示的初始縮放級別。 這是一個沒有視口 meta 標籤的網頁示例,以及同一個網頁有視口 meta 標籤的示例。 提示:如果您正在用手機或平板電腦瀏覽此頁面,可以點選下面的兩個連結來檢視差異。 您可以在我們的 響應式網頁設計 - 視口教程 中瞭解更多關於視口的資訊。 |
❮ HTML <meta> 標籤