欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

meta标签的常见用法

程序员文章站 2022-04-14 21:56:56
一、定义和用法 标签始终位于 head 元素中。 元素可提供有关页面的元信息(meta-information),元数据不会显示在页面上,但是对于机器是可读的。比如针对搜索引擎和更新频度的描述和关键词。 元数据(metadata)是关于数据的信息。元数据总是以名称/值的形式 ......

一、定义和用法

<meta> 标签始终位于 head 元素中。<meta> 元素可提供有关页面的元信息(meta-information),元数据不会显示在页面上,但是对于机器是可读的。比如针对搜索引擎和更新频度的描述和关键词。

元数据(metadata)是关于数据的信息。元数据总是以名称/值的形式被成对传递的。

典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

二、可选的属性

属性 描述
  • content-type
  • expires
  • refresh
  • set-cookie
把 content 属性关联到 http 头部。
  • author
  • description
  • keywords
  • generator
  • revised
  • others
把 content 属性关联到一个名称。
some_text 定义用于翻译 content 属性值的格式。

 

注意:当有http-equiv或者name属性时,必须要有content属性,content 属性提供了名称/值对中的值,content属性定义与 http-equiv 或 name 属性相关的元信息。content始终要和 name 属性或 http-equiv 属性一起使用

 1、http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 mime 文档头部包含名称/值对。

http-equiv属性是添加http头部内容,对一些自定义的,或者需要额外添加的http头部内容,需要发送到浏览器中,我们就可以是使用这个属性。

使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。

常用的有:

1、content-type(显示字符集的设定):设定页面使用的字符集。

用法:<meta http-equiv="content-type" content="text/html;charset=utf-8">
注意:charset是声明文档使用的字符编码,解决乱码问题主要用的就是它,charset一定要写第一行,不然就可能会产生乱码了。

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

两个都是等效的。
2、expires(期限):可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。 

用法: <meta http-equiv="expires" content="fri,12jan200118:18:18gmt">
注意:必须使用gmt的时间格式。

3、refresh(刷新):自动刷新并指向新页面。

用法: <meta http-equiv="refresh" content="2; url=http://www.baidu.com"> //(注意后面的引号,分别在秒数的前面和网址的后面) 注意:其中的2是指停留2秒钟后自动刷新到url网址。

4、set-cookie(cookie设定):如果网页过期,那么存盘的cookie将被删除。

用法: <meta http-equiv="set-cookie" content="cookie value=xxx; expires=friday,12-jan-200118:18:18gmt;path=/">
注意:必须使用gmt的时间格式。

 2、name 属性

name 属性提供了名称/值对中的名称。通常情况下,您可以*使用对自己和源文档的读者来说富有意义的名称。

如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。

常用的有:

分成两部分:
一个是seo部分(搜索引擎优化) 1、keywords(关键字):keywords用来告诉搜索引擎你网页的关键字是什么。 举例: <meta name="keywords" content="xxxx"> 2、description(网站内容描述):description用来告诉搜索引擎你的网站主要内容。 举例: <meta name="description" content="xxx"> 3、author(作者):标注网页的作者 举例: <meta name="author" content="github.com/lihuijuan"> 另一部分是viewport viewport:主要是影响移动端页面布局的 举例: <meta name="viewport" content="width=device-width, initial-scale=1.0"> content 有参数: width viewport 宽度(数值/device-width);height viewport 高度(数值/device-height); initial-scale 初始缩放比例;maximum-scale 最大缩放比例; minimum-scale 最小缩放比例;user-scalable 是否允许用户缩放(yes/no)

3、scheme 属性(没用过)

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。