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文档的编码。