HTML 中常用的 meta 元素

1.meta的意義:

在HTML文檔中忧吟,meta元素可放置在head標(biāo)簽內(nèi)用于定義整個(gè)文檔層面的元數(shù)據(jù)信息砌函。使用meta標(biāo)簽時(shí)無(wú)需將標(biāo)簽閉合。

2.meta的使用:

除了通用的全局屬性溜族,meta元素還可以擁有4個(gè)特有屬性:name讹俊、http-equiv、charset和content煌抒。
meta元素可以用name屬性表示文檔級(jí)元數(shù)據(jù)仍劈,以http-equiv屬性表示編程指示,以及charset屬性用來(lái)表示HTML文檔序列化為字符串而成的文件的字符編碼聲明寡壮。
對(duì)于name贩疙、http-equiv和charset,任何meta元素必須擁有且只能擁有其中的一個(gè)况既,這一屬性及其值決定了該meta元素所表達(dá)的作用这溅。如果meta元素?fù)碛衝ame屬性或者h(yuǎn)ttp-equiv屬性,則該meta元素必須同時(shí)具備content屬性用于描述具體的元數(shù)據(jù)信息(如果content屬性缺失棒仍,則其值默認(rèn)為空字符串)悲靴;如果meta元素?fù)碛衏harset屬性,則content屬性不應(yīng)出現(xiàn)降狠。
注:一個(gè)HTML文檔中擁有charset屬性的meta元素最多只能出現(xiàn)一個(gè)对竣。這很好理解 -- 整個(gè)文檔層面的編碼信息只需要出現(xiàn)一次即可否纬。

三個(gè)可選屬性:

屬性 描述
http-equiv content-language, content-type, expires, refresh,set-cookie 把 content 屬性關(guān)聯(lián)到 HTTP 頭部蛋褥。
name application-name, author, description, keywords, generator, revised, others 把 content 屬性關(guān)聯(lián)到一個(gè)名稱。
charset utf-8... 設(shè)定自身的編碼

必選屬性:

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

3.具體屬性

1.name

對(duì)于meta元素的name屬性乏沸,HTML5文檔定義了一些標(biāo)準(zhǔn)值:

(application-name) 如果HTML頁(yè)面是一個(gè)Web應(yīng)用爪瓜,則可以用name值為application-name的meta元素來(lái)定義該Web應(yīng)用的名稱铆铆。在使用application-name時(shí),可通過(guò)同時(shí)定義meta元素的lang值來(lái)設(shè)定不同自然語(yǔ)言情況下該Web應(yīng)用的名稱翁都,從而實(shí)現(xiàn)Web應(yīng)用名稱的本地化谅猾。不過(guò)在同一個(gè)HTML文檔中,不允許出現(xiàn)兩個(gè)application-name其所屬的meta元素lang值相同的情況 -- 同一種語(yǔ)言的情況下坐搔,Web應(yīng)用的名稱只能有一個(gè)薯蝎。對(duì)于通過(guò)application-name所定義的Web應(yīng)用的名稱谤绳,瀏覽器可以將其作為窗口頂部的名稱信息加以展示(也即,其優(yōu)先級(jí)高于head標(biāo)簽中的title元素)消略。
(author)name值為author的meta元素可用于定義當(dāng)前文檔的作者信息。
(description)name值為description的meta元素可用于定義當(dāng)前文檔的具體描述信息艺演,這種meta元素在同一個(gè)HTML文檔中最多只能出現(xiàn)一個(gè)胎撤。在Web的早期歷史中断凶,搜索引擎會(huì)根據(jù)這個(gè)description信息來(lái)處理HTML文檔;但由于之后SEO對(duì)此屬性的濫用认烁,導(dǎo)致如今搜索引擎對(duì)此meta信息的參考權(quán)重已經(jīng)大為降低。
(generator)對(duì)于由Dreamweaver等網(wǎng)頁(yè)制作軟件所制作的HTML文檔舶沛,name值為generator的meta元素可用于記錄該網(wǎng)頁(yè)制作軟件的信息如庭。
(keywords)name值為keywords的meta元素可接受以逗號(hào)分隔的多個(gè)關(guān)鍵詞作為content,用于描述當(dāng)前文檔的關(guān)鍵詞信息柱彻。與description一樣,由于SEO濫用,如今的搜索引擎在處理HTML文檔的時(shí)候已經(jīng)不考慮keywords信息了卖擅。

2.http-equiv

http-equiv屬性接受有限的幾個(gè)可選值墨技,用于從瀏覽器角度描述當(dāng)前文檔的元數(shù)據(jù)信息 -- 其出發(fā)點(diǎn)及實(shí)質(zhì)是模擬HTTP Response頭中的相應(yīng)字段。這些可選值包括:

(content-language)meta標(biāo)簽可以使用http-equiv="content-language"來(lái)定義當(dāng)前文檔的自然語(yǔ)言断楷。不過(guò)HTML5標(biāo)準(zhǔn)并不建議這么做崭别,對(duì)于文檔自然語(yǔ)言的定義茅主,標(biāo)準(zhǔn)建議使用lang屬性。
(content-type)meta標(biāo)簽可以通過(guò)使用http-equiv="content-type"來(lái)定義當(dāng)前文檔的MIME Type及編碼诀姚,其實(shí)質(zhì)是模擬HTTP Response中的content-type頭赫段。一般情況下,這一meta標(biāo)簽會(huì)寫成下面這個(gè)樣子:<meta http-equiv="content-type" content="text/html;charset=utf-8">贬丛。由于作用相同瘫寝,http-equiv值為content-type的meta標(biāo)簽與擁有charset屬性的meta標(biāo)簽在同一個(gè)HTML文檔中不能同時(shí)出現(xiàn)蜒蕾。
(refresh)在meta標(biāo)簽中使用http-equiv="refresh"可實(shí)現(xiàn)定時(shí)跳轉(zhuǎn)咪啡,此時(shí)可用meta標(biāo)簽的content值來(lái)表示跳轉(zhuǎn)前的等待時(shí)間以及頁(yè)面跳轉(zhuǎn)的目的地撤摸。但由于用戶體驗(yàn)的原因褒纲,http-equiv="refresh"的實(shí)際應(yīng)用已經(jīng)很少了。以下是兩個(gè)簡(jiǎn)單的例子:

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

<meta http-equiv="Refresh" content="20; URL=page4.html">
(set-cookie)在meta標(biāo)簽中使用http-equiv="set-cookie"可實(shí)現(xiàn)瀏覽器cookie寫入衫嵌,不過(guò)HTML5標(biāo)準(zhǔn)并不建議這么做 -- 正確的做法應(yīng)當(dāng)是在真正的HTTP Response頭中來(lái)實(shí)現(xiàn)set-cookie行為楔绞。

3.charset

HTML文檔可以通過(guò)擁有charset屬性的meta標(biāo)簽來(lái)設(shè)定自身的編碼唇兑。無(wú)論是通過(guò)這種方式扎附,還是通過(guò)http-equiv="content-type"的方式,文檔的編碼信息必須得到定義留夜。不過(guò)當(dāng)HTML文檔作為包含在iframe中的子文檔而存在的情況下香伴,標(biāo)準(zhǔn)規(guī)定不能對(duì)該文檔進(jìn)行編碼定義(此時(shí)其編碼取決于包含它的那個(gè)外部文檔)。
注:HTML5標(biāo)準(zhǔn)規(guī)定文檔的作者(Web開(kāi)發(fā)人員)應(yīng)當(dāng)使用UTF-8作為HTML文檔的編碼即纲。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蜂厅,一起剝皮案震驚了整個(gè)濱河市膊畴,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌唇跨,老刑警劉巖衬衬,帶你破解...
    沈念sama閱讀 211,948評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件滋尉,死亡現(xiàn)場(chǎng)離奇詭異狮惜,居然都是意外死亡碾篡,警方通過(guò)查閱死者的電腦和手機(jī)筏餐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門魁瞪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事趟畏。” “怎么了赋秀?”我有些...
    開(kāi)封第一講書人閱讀 157,490評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵猎莲,是天一觀的道長(zhǎng)著洼。 經(jīng)常有香客問(wèn)我而叼,道長(zhǎng),這世上最難降的妖魔是什么液荸? 我笑而不...
    開(kāi)封第一講書人閱讀 56,521評(píng)論 1 284
  • 正文 為了忘掉前任娇钱,我火速辦了婚禮文搂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘细疚。我一直安慰自己疯兼,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,627評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布待侵。 她就那樣靜靜地躺著秧倾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪那先。 梳的紋絲不亂的頭發(fā)上售淡,一...
    開(kāi)封第一講書人閱讀 49,842評(píng)論 1 290
  • 那天揖闸,我揣著相機(jī)與錄音汤纸,去河邊找鬼芹血。 笑死祟牲,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的议惰。 我是一名探鬼主播乡恕,決...
    沈念sama閱讀 38,997評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼夫啊!你這毒婦竟也來(lái)了撇眯?” 一聲冷哼從身側(cè)響起虱咧,我...
    開(kāi)封第一講書人閱讀 37,741評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤玄坦,失蹤者是張志新(化名)和其女友劉穎绘沉,沒(méi)想到半個(gè)月后车伞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,203評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡休蟹,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,534評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了日矫。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,673評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡绑榴,死狀恐怖哪轿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情翔怎,我是刑警寧澤窃诉,帶...
    沈念sama閱讀 34,339評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站赤套,受9級(jí)特大地震影響飘痛,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜容握,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,955評(píng)論 3 313
  • 文/蒙蒙 一宣脉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧剔氏,春花似錦竹祷、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,770評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)芬萍。三九已至,卻和暖如春负芋,著一層夾襖步出監(jiān)牢的瞬間莽龟,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,000評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工益缠, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留宋欺,地道東北人秒咨。 一個(gè)月前我還...
    沈念sama閱讀 46,394評(píng)論 2 360
  • 正文 我出身青樓陡厘,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親谤饭。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,562評(píng)論 2 349

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

  • 作者:彭志明日期:2017年4月29日 本文主要針對(duì)常用的meta元素的http-equiv戏罢,content屬性值...
    pz明閱讀 1,190評(píng)論 0 0
  • 雖然之前我有整理過(guò)一次meta 標(biāo)簽,但是心中對(duì)于meta 標(biāo)簽還是一知半解翩蘸,所以再次對(duì)meta 標(biāo)簽進(jìn)行整理泄鹏,并...
    微風(fēng)玉米閱讀 1,155評(píng)論 0 0
  • 標(biāo)簽提供了 HTML 文檔的元數(shù)據(jù)霉猛。元數(shù)據(jù)不會(huì)顯示在客戶端惜浅,但是會(huì)被瀏覽器解析。META元素通常用于指定網(wǎng)頁(yè)的描述...
    shadow123閱讀 590評(píng)論 0 0
  • meta 是用來(lái)在HTML文檔中模擬HTTP協(xié)議的響應(yīng)頭報(bào)文轩猩。meta 標(biāo)簽用于網(wǎng)頁(yè)的<head>與<...
    __HAPPINESS_yh閱讀 1,075評(píng)論 1 1
  • 初看這個(gè)標(biāo)題很容易理解錯(cuò)誤浊猾,這里的meta元素不僅僅指的是 ,而是指元信息(meta information)偷办,即...
    chiang24閱讀 839評(píng)論 0 1