HTML 中常用的 meta 元素
meta标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。
meta 的属性有:name属性、http-equiv属性 、content属性和charset属性 。
name属性:
name 属性规定元数据的名称。
name 属性规定content属性的信息/值的名称。
注意:如果设置了 http-equiv 属性,则不应该设置 name 属性。
语法
<meta name="value">
属性值
application-name 规定页面所代表的 Web 应用程序的名称。
author 规定文档的作者的名字。
<meta name = "author" content = "作者的姓名">
description 规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。
<meta name = "description" content = "对页面的描述语言”>
generator 规定用于生成文档的一个软件包(不用于手写页面)。
<meta name = "generator" content = "编辑软件的名称">
keywords 规定一个逗号分隔的关键词列表 - 相关的网页(告诉搜索引擎页面是与什么相关的)。
提示:总是规定关键词(对于搜索引擎进行页面分类是必要的)。
<meta name = "keywords" content = "具体的关键字">
referrer 控制所述HTTP的内容Referer附加到从本文件发送的任何请求的HTTP标头。
<meta name="referrer">
no-referrer | 不要发送一个HTTP Referer标头。 |
---|---|
origin | 发送起源的文件。 |
no-referrer-when-downgrade | 发送原点作为引荐先验的,多的安全目的地(https-> HTTPS),但不发送引荐一个不太安全的目的地(https-> HTTP)。这是默认的行为。 |
origin-when-crossorigin | 执行相同来源的请求时,发送一个完整的URL(从参数剥离),但只送起源的其他情况下的文件。 |
unsafe-URL | perfoming来源相同的请求时,发送一个完整的URL(从参数剥离)。 |
creator 限定,在自由格式中,文件的创建者的名称。请注意,它可以是机构的名称。如果有不止一个,有几个要素都应该使用。
googlebot 这是一个代名词robots,但只有其是googlebot,索引爬虫对谷歌搜索。
publisher 在一个自由的格式,文件的发布者的名称。请注意,它可以是该机构的名称。
robots(定义搜索 引擎爬虫的索引方式):content的参数有all(默认 ),none,index,follow,nofollow。
<meta name="robots" content="none">
slurp 这是一个代名词robots,但只有其是slurp,索引爬虫对雅虎搜索。
viewport 这给出了关于的初始大小的大小提示视口。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
值 | 可能值 | 描述 |
---|---|---|
width | 一个正整数或者字符串 device-width | 限定了宽度,以像素为单位,视口的 |
height | 一个正整数或者字符串 device-height | 定义了高度,以像素,视口的 |
initial-scale | 一个0.0 到10.0之间的正数 | 定义设备宽度(之间的比率device-width以纵向模式或device-height横向模式)和视口的大小。 |
maximum-scale | 一个0.0 到10.0之间的正数 | 定义了变焦的最大值; 它必须大于或等于minimum-scale或行为是不确定的。 |
minimum-scale | 一个0.0 到10.0之间的正数 | 定义了变焦的最低值; 它必须小于或等于maximum-scale或行为是不确定的。 |
user-scalable | 一个布尔值(yes 或者no) | 如果设置为no,用户无法在网页中放大。默认值是yes。 |
scheme 该属性定义了描述元数据的方案。scheme是一种上下文,它可以对内容值进行正确的解释,就像一种格式。
http-equiv属性:
http-equiv 属性提供了content属性的信息/值的 HTTP 头。
http-equiv 属性可用于模拟一个 HTTP 响应头。
语法
<meta http-equiv="content-type|default-style|refresh">
属性值
content-type 规定文档的字符编码。
<meta http-equiv="content-type" content="text/html; charset=utf-8">
default-style 规定要使用的预定义的样式表。
<meta http-equiv="default-style" content="the document's preferred stylesheet">
注释:上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值,或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。
refresh 定义文档自动刷新的时间间隔。
<meta http-equiv="refresh" content="300">
set-cookie 设置cookie,如果网页过期,那么旧cookie将被删除。
<meta http-equiv="set-cookie" content="cookievalue=xxx;expires=Monday,12 Jan 2020 20:20:20 GMT;path=/">
content 属性:
定义与 http-equiv 或 name 属性相关的元信息。
content 属性给出了与 http-equiv 或 name 属性相关的值。
语法
<meta content="text">
属性值
text :meta 信息的内容。
charset属性:
charset 属性规定 HTML 文档的字符编码。
提示:charset 属性可以通过任意元素上的 lang 属性来重写。
语法
<meta charset="character_set">
属性值
character_set :规定 HTML 文档的字符编码。
常用的值:
UTF-8 - Unicode 字符编码
ISO-8859-1 - 拉丁字母表的字符编码
<meta charset ="UTF-8">
在理论上,可以使用任何字符编码,但并不是所有浏览器都能够理解它们。某种字符编码使用的范围越广,浏览器就越有可能理解它。