HTML 中常用的 meta 元素

1.meta的意义:

在HTML文档中,meta元素可放置在head标签内用于定义整个文档层面的元数据信息。使用meta标签时无需将标签闭合。

2.meta的使用:

除了通用的全局属性,meta元素还可以拥有4个特有属性:name、http-equiv、charset和content。
meta元素可以用name属性表示文档级元数据,以http-equiv属性表示编程指示,以及charset属性用来表示HTML文档序列化为字符串而成的文件的字符编码声明。
对于name、http-equiv和charset,任何meta元素必须拥有且只能拥有其中的一个,这一属性及其值决定了该meta元素所表达的作用。如果meta元素拥有name属性或者http-equiv属性,则该meta元素必须同时具备content属性用于描述具体的元数据信息(如果content属性缺失,则其值默认为空字符串);如果meta元素拥有charset属性,则content属性不应出现。
注:一个HTML文档中拥有charset属性的meta元素最多只能出现一个。这很好理解 -- 整个文档层面的编码信息只需要出现一次即可。

三个可选属性:

属性 描述
http-equiv content-language, content-type, expires, refresh,set-cookie 把 content 属性关联到 HTTP 头部。
name application-name, author, description, keywords, generator, revised, others 把 content 属性关联到一个名称。
charset utf-8... 设定自身的编码

必选属性:

属性 描述
content some_text 定义与 http-equiv 或 name 属性相关的元信息

3.具体属性

1.name

对于meta元素的name属性,HTML5文档定义了一些标准值:

(application-name) 如果HTML页面是一个Web应用,则可以用name值为application-name的meta元素来定义该Web应用的名称。在使用application-name时,可通过同时定义meta元素的lang值来设定不同自然语言情况下该Web应用的名称,从而实现Web应用名称的本地化。不过在同一个HTML文档中,不允许出现两个application-name其所属的meta元素lang值相同的情况 -- 同一种语言的情况下,Web应用的名称只能有一个。对于通过application-name所定义的Web应用的名称,浏览器可以将其作为窗口顶部的名称信息加以展示(也即,其优先级高于head标签中的title元素)。
(author)name值为author的meta元素可用于定义当前文档的作者信息。
(description)name值为description的meta元素可用于定义当前文档的具体描述信息,这种meta元素在同一个HTML文档中最多只能出现一个。在Web的早期历史中,搜索引擎会根据这个description信息来处理HTML文档;但由于之后SEO对此属性的滥用,导致如今搜索引擎对此meta信息的参考权重已经大为降低。
(generator)对于由Dreamweaver等网页制作软件所制作的HTML文档,name值为generator的meta元素可用于记录该网页制作软件的信息。
(keywords)name值为keywords的meta元素可接受以逗号分隔的多个关键词作为content,用于描述当前文档的关键词信息。与description一样,由于SEO滥用,如今的搜索引擎在处理HTML文档的时候已经不考虑keywords信息了。

2.http-equiv

http-equiv属性接受有限的几个可选值,用于从浏览器角度描述当前文档的元数据信息 -- 其出发点及实质是模拟HTTP Response头中的相应字段。这些可选值包括:

(content-language)meta标签可以使用http-equiv="content-language"来定义当前文档的自然语言。不过HTML5标准并不建议这么做,对于文档自然语言的定义,标准建议使用lang属性。
(content-type)meta标签可以通过使用http-equiv="content-type"来定义当前文档的MIME Type及编码,其实质是模拟HTTP Response中的content-type头。一般情况下,这一meta标签会写成下面这个样子:<meta http-equiv="content-type" content="text/html;charset=utf-8">。由于作用相同,http-equiv值为content-type的meta标签与拥有charset属性的meta标签在同一个HTML文档中不能同时出现。
(refresh)在meta标签中使用http-equiv="refresh"可实现定时跳转,此时可用meta标签的content值来表示跳转前的等待时间以及页面跳转的目的地。但由于用户体验的原因,http-equiv="refresh"的实际应用已经很少了。以下是两个简单的例子:

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

<meta http-equiv="Refresh" content="20; URL=page4.html">
(set-cookie)在meta标签中使用http-equiv="set-cookie"可实现浏览器cookie写入,不过HTML5标准并不建议这么做 -- 正确的做法应当是在真正的HTTP Response头中来实现set-cookie行为。

3.charset

HTML文档可以通过拥有charset属性的meta标签来设定自身的编码。无论是通过这种方式,还是通过http-equiv="content-type"的方式,文档的编码信息必须得到定义。不过当HTML文档作为包含在iframe中的子文档而存在的情况下,标准规定不能对该文档进行编码定义(此时其编码取决于包含它的那个外部文档)。
注:HTML5标准规定文档的作者(Web开发人员)应当使用UTF-8作为HTML文档的编码。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 作者:彭志明日期:2017年4月29日 本文主要针对常用的meta元素的http-equiv,content属性值...
    pz明阅读 1,182评论 0 0
  • 虽然之前我有整理过一次meta 标签,但是心中对于meta 标签还是一知半解,所以再次对meta 标签进行整理,并...
    微风玉米阅读 1,141评论 0 0
  • 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。META元素通常用于指定网页的描述...
    shadow123阅读 583评论 0 0
  • meta 是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与<...
    __HAPPINESS_yh阅读 1,064评论 1 1
  • 初看这个标题很容易理解错误,这里的meta元素不仅仅指的是 ,而是指元信息(meta information),即...
    chiang24阅读 830评论 0 1