meta标记的主要功能是定义页面中的信息,这些信息并不会显示在浏览器中,而只在源代码中显示。meta标记通过属性定义文件信息的名称、内容等,能够提供文档的关键字、作者及描述等多种信息,在HTML头部可以包括任意数量的meta标记。
格式:<meta name="属性名称" content="属性内容" />
1.定义页面关键字(属性名称为:keywords):是为了向搜索引擎说明网页的关键词,从而帮助搜索引擎对该网页进行查找和分类,它可以提高被搜索到的概率,有时搜索引擎在检索时限制关键字的数量,因此在设置关键字时不要过多,关键字之间用逗号隔开。
语法:<meta name="keywords" content="关键字的内容" />
例如:<meta name="keywords" content="网页,教程" />
2.定义页面描述(属性名称为:description):用来描述网页的主题,与关键字一样,是为了便于搜索引擎的查找。
语法:<meta name="description" content="定义页面描述内容" />
例如:<meta name="description" content="网页制作教程网站" />
疑问:是否可以同1中的一样,有多个页面描述,然后用逗号隔开?
3.定义编辑工具(属性名称为:generator):越来越多的可视化软件也可以制作网页,在源代码的头部中可以设置网页编辑软件的名称。
语法:<meta name="generator" content="定义编辑工具的名称" />
例如:<meta name="generator" content="Dreamwaver" />
疑问:是否可以同1中的一样,有多个编辑工具, 然后用逗号隔开?
4.定义作者信息(属性名称为:author):可以定义作者的姓名及个人信息。
语法:<meta name="author" content="作者的姓名" />
例如:<meta name="author" content="风叶" />
疑问:是否可以同1中的一样,有多个作者, 然后用逗号隔开?
5.限制搜索方式(属性名称为:robots):可以限制搜索引擎搜索当前网页的方式。
语法:<meta name="robots" content="搜索方式" />
属性值 | 说明 |
all | 能搜索当前网页及其链接的网页 |
index | 能搜索当前网页 |
nofollow | 不能搜索与当前网页链接的网页 |
noindex | 不能搜索当前网页 |
none | 不能搜索当前网页及与其链接的网页 |
例如:<meta name="robots" content="index" />
疑问:是否可以同1中的一样,有多个多个取值方式, 然后用逗号隔开?还有index下,是否不能搜索与当前网页链接的网页?
6.定义网页文字及语言(无属性名称,这个比较特殊~):可以设置语言的编码方式,这样浏览器可以正确地选择语言,而不需要人工选取。
语法:<meta http-equiv="content-type" content="text/html;charset=字符集类型" />
说明:http-equiv用于传送HTTP通信协议的标头,而在content中才是具体的属性值。charset用于设置网页的内码语系,也就是字符集的类型,国内常用的是GB码,charset往往设置为gb2312,即简体中文。英文是ISO-8859-1字符集,此外还有其他的字符集。
例如:<meta http-equiv="content-type" content="text/html;charset=gb2312" />
疑问:content里的设置是什么意思呢?这里为什么没有属性名称的设置呢?
7.定义网页的定时跳转(无属性名称,这个也比较特殊~):就是在经过一段时间后,会自动转到其他网页中,这就是网页的跳转。
语法:<meta http-equiv="refresh" content="跳转时间;URL=跳转到的地址" />
说明:refresh表示设置网页的刷新,而在content中给出了刷新的时间和刷新后的地址,时间和链接地址之间用分号。默认情况下,跳转时间以秒为单位。(不仅可以实现页面之间的跳转,而且可以完成页面自身的自动刷新,但为想效果不会很好的吧~)
例如:<meta http-equiv="refresh" content="5;URL=index.html" />
疑问:为什么没有属性名称的设置呢?
8.定义网页的过渡效果(无属性名称,这个也比较特殊~):是指当进入或离开网站时,页面具有不同的切换效果,添加此功能可以使网页看起来更具动感。(好像就ie支持的样子,测试起来有些麻烦)
语法:<meta http-equiv="过渡事件" content="revealtrans(duration=过渡效果的持续时间,transition=过渡方式)" />
说明:过渡事件可以是进入页面或者离开页面,进入页面的http-equiv值为page-enter,离开的页面的http-equiv值为page-exist。过渡效果的持续时间默认情况下以秒为单位,过渡方式取值如不表所示。
编号 | 过渡方式 | 编号 | 过渡方式 |
0 | 盒状收缩 | 12 | 随意溶解 |
1 | 盒状放射 | 13 | 从左右两端向中间展开 |
2 | 圆形收缩 | 14 | 从中间两端向左右展开 |
3 | 圆形放射 | 15 | 从上下两端向中间展开 |
4 | 由下往上 | 16 | 从中间两端向上下展开 |
5 | 由上往下 | 17 | 从右下角向左下角展开 |
6 | 从左至右 | 18 | 从右下角向左上角展开 |
7 | 从右至左 | 19 | 从左上角向右下角展开 |
8 | 垂直百叶窗 | 20 | 从左上角向右上角展开 |
9 | 水平百叶窗 | 21 | 水平线状展开 |
10 | 水平格状百叶窗 | 22 | 垂直线状展开 |
11 | 垂直格状百叶窗 | 23 | 随机产生一种过渡方式 |
例如:<meta http-equiv="page-enter" content="revealtrans(duration=5,transition=8)" />
疑问:content里的设置是什么意思呢,revealtrans是什么呢,是否就ie支持的?