html 的 meta 总结，html 标签中 meta 属性使用介绍

文章转自 haorooms博客

引言

META 标签是 HTML 语言 HEAD 区的一个辅助性标签，位于 HTML 文档头部的标记和标题之前，提供用户不可见的信息。

meta 标签通常用来：
1. 为搜索引擎 robots 定义页面主题，搜索引擎优化 SEO 。
2. 定义用户浏览器上的 cookie。
3. 用于鉴别作者，设置页面格式，标注内容提要和关键字
4. 定义页面使用语言。
4. 设置页面时期根据你定义的时间刷新自己
5. 设置 RASC 内容等级等。
6. 实现页面转换术idea动态效果等

---

详细介绍

META 标签分两大部分：HTTP 标题信息 （http-equiv） 和页面描述信息（name）,不同属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

name 属性

name 属性主要用于描述网页，与之对应的属性为 content, content 中的内容主要是便于搜索引擎查找信息和分类信息用的。

<meta name="参数" content="具体的参数值">

name 属性有以下几种参数：

A、keywords (关键字)

说明：keywords 用来告诉搜索引擎页面的关键字是什么

举例：

<meta name="keywords" content="meta 总结，html meta,meta 属性，meta 跳转">

B、description (网站内容描述)

说明：description 用来告诉搜索引擎页面的主要内容

举例：

<meta name="description" content="html的meta总结，meta是html语言head区的一个辅助性标签">

C、robots (机器人向导)

说明：robots 用来告诉搜索机器人哪些页面需要引擎，哪些页面不需要引擎。

content 的参数有 all,none,index,noindex,follow,nofollow。默认为 all。

举例：

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

具体的参数如下：

- 信息参数为 all：文件索引，且页面上的链接可以被查询；
- 信息参数为 none：文件不索引，且页面上的链接不可以被查询；
- 信息参数为 index：文件索引。
- 信息参数为 noindex：文件将不被索引，但页面上的链接可以被查询；
- 信息参数为 follow：页面上的链接可以被查询；
- 信息参数为 nofollow：文件将被索引，但页面上的链接不可以被查询；

D、author (作者)

说明：author 用来标注网页的作者

举例：

<meta name="author" content="GCpigsic">

E、generator

说明：generator 代表说明网站采用的是什么软件制作

举例：

<meta name="generator" content="信息参数">

F、description (版权信息)

说明：description 用来说明网站版权信息

举例：

<meta name="COPYRIGHT" content="信息参数">

G、revisit-after (网站重访)

说明：revisit-after 代表网站重访，7days 代表7天。

举例：

<meta name="revisit-after" content="7days">

---

2、http-equiv 属性

相当于 HTTP 的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容。与之对应的属性值为 content ,content 中的内容其实就是各个参数的变量值。

<meta http-equiv="参数" content="参数变量值">

其中 http-equiv 的属性主要有以下几种参数

A、expires (期限)

说明：expires 可以用于设定网页的到期时间，一旦页面过期，必须到服务器上重新传输。

举例：

<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">

必须使用 GMT 的时间格式

B、pragma (cache 模式)

说明：pragma 禁止浏览器从本地计算机的缓存中访问页面内容

举例：

<meta http-equiv="pragma" content="no-cache">

这样设定访问者将无法脱机浏览

C、refresh (刷新)

说明：refresh 自动刷新并指向新页面。

举例：

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com"><!--注意后面的引号，分别在秒数的前面和网址的后面-->

其中的 2 是指停留 2 秒钟后自动刷新到 URL 网址。

D、set-cookie (cookie 设定)

说明：如果网页过期，那么存盘的 cookie 将被删除

举例：

<meta http-equiv="set-cookie" content="cookie value=xxx;expires=Fri,12Jan200118:18:18GMT;path=/">

必须使用 GMT 的时间格式

E、window-target (显示窗口的设定)

说明：强制页面在当前窗口以独立页面显示。

举例：

<meta http-equiv="window-target" content="_top">

用来放置别人在框架里调用自己的页面

F、content-Type (显示字符集的设定)

说明：设定页面使用的字符集。

举例：

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

具体如下：

• 当 charset 参数设置为 gb2312 时，代表说明网站采用的编码是 简体中文；
• 当 charset 参数设置为 big5 时，代表说明网站采用的编码是 繁体中文；
• 当 charset 参数设置为 iso-2022-jp 时，代表说明网站采用的编码是 日文；
• 当 charset 参数设置为 ks_c_5601 时，代表说明网站采用的编码是 韩文；
• 当 charset 参数设置为 iso-8859-1 时，代表说明网站采用的编码是 英文；
• 当 charset 参数设置为 utf- 时，代表世界通用的语言编码

G、content-language (显示语言的设定)

举例：

<meta http-equiv="content-language" content="zh-cn">

H、Cache-Control指定请求和响应遵循的缓存机制。

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下
- Public指示响应可被任何缓存区缓存
- Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
- no-cache指示请求或响应消息不能缓存
- no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
- max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
- min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
- max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

J、imagetoolbar

指定是否显示图片工具栏，当为 false 代表不显示，当为 true 代表显示

举例：

<meta http-equiv="imagetoolbar" content="false">

k、content-script-type

指定是否显示图片工具栏，当为 false 代表不显示，当为 true 代表显示

举例：

<meta http-equiv="content-script-tyoe" content="text/javascript">

w3c 网页规范，指明页面中脚本的类型。

L 页面跳转，只适用于 IE

举例：

<meta http-equiv="page-enter" content="revealTrans(duration=2.0,transition=12)">

http-equiv 的值可取如下几个值：

 - page-enter:进入页面
 - page-exit:离开页面
 - site-enter:进入网站
 - site-exit:离开网站

content 这里表示页面过渡的效果设置，有两个属性分别表示：

- duration : 过渡速度
- transition：可选项。整数值，设置或检索转换所使用的方式

具体数值介绍

0 : 矩形收缩转换。 
1 : 矩形扩张转换。
2 : 圆形收缩转换。
3 : 圆形扩张转换。 
4 : 向上擦除。 
5 : 向下擦除。 
6 : 向右擦除。 
7 : 向左擦除。 
8 : 纵向百叶窗转换。 
9 : 横向百叶窗转换。 
10 : 国际象棋棋盘横向转换。 
11 : 国际象棋棋盘纵向转换。 
12 : 随机杂点干扰转换。 
13 : 左右关门效果转换。 
14 : 左右开门效果转换。 
15 : 上下关门效果转换。 
16 : 上下开门效果转换。 
17 : 从右上角到左下角的锯齿边覆盖效果转换。 
18 : 从右下角到左上角的锯齿边覆盖效果转换。 
19 : 从左上角到右下角的锯齿边覆盖效果转换。 
20 : 从左下角到右上角的锯齿边覆盖效果转换。 
21 : 随机横线条转换。 
22 : 随机竖线条转换。 
23 : 随机使用上面可能的值转换。 

viewport(设置布局视口)

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

其中 minimum-scale 为最小的缩放比例，maximum-scale 为最大的缩放比例，user-scalable 为是否禁用用户缩放

属性名	备注
width	设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，为一个正整数，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为“no”或者 “yes”。no 代表不允许，yes 代表允许

实现响应式至少有以下标签

<meta name="viewport" content="width=device-width">