HTML 中常用的 meta 元素

<meta>標(biāo)簽提供了 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在客戶端,但是會(huì)被瀏覽器解析。META元素通常用于指定網(wǎng)頁的描述,關(guān)鍵詞,文件的最后修改時(shí)間,作者及其他元數(shù)據(jù)。元數(shù)據(jù)可以被使用瀏覽器(如何顯示內(nèi)容或重新加載頁面),搜索引擎(關(guān)鍵詞),或其他 Web 服務(wù)調(diào)用。

meta 的屬性有:name屬性、http-equiv屬性 、content屬性和charset屬性 。

name屬性:

name 屬性規(guī)定元數(shù)據(jù)的名稱。

name 屬性規(guī)定content屬性的信息/值的名稱。

注意:如果設(shè)置了 http-equiv 屬性,則不應(yīng)該設(shè)置 name 屬性。

語法

<meta name="value">

屬性值

application-name 規(guī)定頁面所代表的 Web 應(yīng)用程序的名稱。

author 規(guī)定文檔的作者的名字。

<meta name = "author" content = "作者的姓名">

description 規(guī)定頁面的描述。搜索引擎會(huì)把這個(gè)描述顯示在搜索結(jié)果中。

<meta name = "description" content = "對(duì)頁面的描述語言”>

generator 規(guī)定用于生成文檔的一個(gè)軟件包(不用于手寫頁面)。

<meta name = "generator" content = "編輯軟件的名稱">

keywords 規(guī)定一個(gè)逗號(hào)分隔的關(guān)鍵詞列表 - 相關(guān)的網(wǎng)頁(告訴搜索引擎頁面是與什么相關(guān)的)。

提示:總是規(guī)定關(guān)鍵詞(對(duì)于搜索引擎進(jìn)行頁面分類是必要的)。

<meta name = "keywords" content = "具體的關(guān)鍵字">

referrer 控制所述HTTP的內(nèi)容Referer附加到從本文件發(fā)送的任何請(qǐng)求的HTTP標(biāo)頭。

<meta name="referrer">
no-referrer 不要發(fā)送一個(gè)HTTP Referer標(biāo)頭。
origin 發(fā)送起源的文件。
no-referrer-when-downgrade 發(fā)送原點(diǎn)作為引薦先驗(yàn)的,多的安全目的地(https-> HTTPS),但不發(fā)送引薦一個(gè)不太安全的目的地(https-> HTTP)。這是默認(rèn)的行為。
origin-when-crossorigin 執(zhí)行相同來源的請(qǐng)求時(shí),發(fā)送一個(gè)完整的URL(從參數(shù)剝離),但只送起源的其他情況下的文件。
unsafe-URL perfoming來源相同的請(qǐng)求時(shí),發(fā)送一個(gè)完整的URL(從參數(shù)剝離)。

creator 限定,在自由格式中,文件的創(chuàng)建者的名稱。請(qǐng)注意,它可以是機(jī)構(gòu)的名稱。如果有不止一個(gè),有幾個(gè)<meta>要素都應(yīng)該使用。

googlebot 這是一個(gè)代名詞robots,但只有其是googlebot,索引爬蟲對(duì)谷歌搜索。

publisher 在一個(gè)自由的格式,文件的發(fā)布者的名稱。請(qǐng)注意,它可以是該機(jī)構(gòu)的名稱。

robots(定義搜索 引擎爬蟲的索引方式):content的參數(shù)有all(默認(rèn) ),none,index,follow,nofollow。

<meta name="robots" content="none">

slurp 這是一個(gè)代名詞robots,但只有其是slurp,索引爬蟲對(duì)雅虎搜索。

viewport 這給出了關(guān)于的初始大小的大小提示視口。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
可能值 描述
width 一個(gè)正整數(shù)或者字符串 device-width 限定了寬度,以像素為單位,視口的
height 一個(gè)正整數(shù)或者字符串 device-height 定義了高度,以像素,視口的
initial-scale 一個(gè)0.0 到10.0之間的正數(shù) 定義設(shè)備寬度(之間的比率device-width以縱向模式或device-height橫向模式)和視口的大小。
maximum-scale 一個(gè)0.0 到10.0之間的正數(shù) 定義了變焦的最大值; 它必須大于或等于minimum-scale或行為是不確定的。
minimum-scale 一個(gè)0.0 到10.0之間的正數(shù) 定義了變焦的最低值; 它必須小于或等于maximum-scale或行為是不確定的。
user-scalable 一個(gè)布爾值(yes 或者no) 如果設(shè)置為no,用戶無法在網(wǎng)頁中放大。默認(rèn)值是yes。

scheme 該屬性定義了描述元數(shù)據(jù)的方案。scheme是一種上下文,它可以對(duì)內(nèi)容值進(jìn)行正確的解釋,就像一種格式。

http-equiv屬性:

http-equiv 屬性提供了content屬性的信息/值的 HTTP 頭。

http-equiv 屬性可用于模擬一個(gè) HTTP 響應(yīng)頭。

語法

<meta http-equiv="content-type|default-style|refresh">

屬性值

content-type 規(guī)定文檔的字符編碼。

<meta http-equiv="content-type" content="text/html; charset=utf-8">

default-style 規(guī)定要使用的預(yù)定義的樣式表。

<meta http-equiv="default-style" content="the document's preferred stylesheet">

注釋:上面 content 屬性的值必須匹配同一文檔中的一個(gè) link 元素上的 title 屬性的值,或者必須匹配同一文檔中的一個(gè) style 元素上的 title 屬性的值。

refresh 定義文檔自動(dòng)刷新的時(shí)間間隔。

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

set-cookie 設(shè)置cookie,如果網(wǎng)頁過期,那么舊cookie將被刪除。

<meta http-equiv="set-cookie" content="cookievalue=xxx;expires=Monday,12 Jan 2020 20:20:20 GMT;path=/">

content 屬性:

定義與 http-equiv 或 name 屬性相關(guān)的元信息。

content 屬性給出了與 http-equiv 或 name 屬性相關(guān)的值。

語法

<meta content="text">

屬性值

text :meta 信息的內(nèi)容。

charset屬性:

charset 屬性規(guī)定 HTML 文檔的字符編碼。

提示:charset 屬性可以通過任意元素上的 lang 屬性來重寫。

語法

<meta charset="character_set">

屬性值

character_set :規(guī)定 HTML 文檔的字符編碼。

常用的值:

UTF-8 - Unicode 字符編碼

ISO-8859-1 - 拉丁字母表的字符編碼

<meta charset ="UTF-8">

在理論上,可以使用任何字符編碼,但并不是所有瀏覽器都能夠理解它們。某種字符編碼使用的范圍越廣,瀏覽器就越有可能理解它。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1.meta的意義: 在HTML文檔中,meta元素可放置在head標(biāo)簽內(nèi)用于定義整個(gè)文檔層面的元數(shù)據(jù)信息。使用m...
    馬建陽閱讀 978評(píng)論 0 2
  • 作者:彭志明日期:2017年4月29日 本文主要針對(duì)常用的meta元素的http-equiv,content屬性值...
    pz明閱讀 1,244評(píng)論 0 0
  • 雖然之前我有整理過一次meta 標(biāo)簽,但是心中對(duì)于meta 標(biāo)簽還是一知半解,所以再次對(duì)meta 標(biāo)簽進(jìn)行整理,并...
    微風(fēng)玉米閱讀 1,197評(píng)論 0 0
  • meta 是用來在HTML文檔中模擬HTTP協(xié)議的響應(yīng)頭報(bào)文。meta 標(biāo)簽用于網(wǎng)頁的<head>與<...
    __HAPPINESS_yh閱讀 1,137評(píng)論 1 1
  • <meta>標(biāo)簽的定義和用法: 元素可提供頁面的元信息,比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵字 一...
    饑人谷魏朋朋閱讀 512評(píng)論 0 0