html头部meta标签详解

来源：互联网发布：薛之谦的淘宝女装店编辑：程序博客网时间：2024/05/23 23:56

<!DOCTYPE HTML><html>    <head>    <meta charset="utf-8">    <meta name="keywords" content="关键词">    <meta name="description" content="对网页的描述">    <meta name="author" content="网页作者">    <meta http-equiv="content-type" content="text/html">    <meta http-equiv="expires" content="31 Dec 2008">    <meta http-equiv="refresh" content="30">    <meta http-equiv="set-cookie" content="3434hgh3vv4433dg3g43">    </head>    <body>    </body></html>

一、name属性（键值对，只列出常用的）

1、keywords（关键词，用于搜索引擎优化）

<meta name="keywords" content="i石大APP,i石大,i石大APP官网">

这样搜索引擎在抓取此页面时，会把关键词收录进去。以后在百度上搜索关键词 i石大APP i石大 i石大APP官网三个关键词任何一个，会直接作为搜索记录的第一条进行展示。注意关键词中间用英文状态下的逗号隔开。
2、description（用于网页描述）

<meta name="description" content="石大立体化校园学习生活平台">

告诉搜索引擎对于此网页的描述是石大立体化校园学习生活平台
3、author（网页作者，可以留自己的联系方式）

<meta name="author" content="深山老鸭">

二、charset属性

<meta charset="utf-8">

中文网页一定要写上这句话，否则在某些浏览器网页会出现乱码

三、http-equiv属性（此属性值针对服务器端）

服务器端给客户端发送带有http-equiv属性的html文档时，会把http-equiv属性转化成http响应的头部，例如：

<meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">

服务器把这两个属性转化成http请求的头部，发给客户端浏览器（只有浏览器可以理解这些键值对含义，一般app的api请求作用无效）

content-type: text/htmlcharset:iso-8859-1expires:31 Dec 2008

1、content-type（内容类型）

<meta http-equiv="content-type" content="text/html">

文档类型，事实上，不写这句，服务器端也会在http响应头部加入content-type:text/html，因为这表明是一个html文档
2、expires（缓存时间）

<meta http-equiv="expires" content="31 Dec 2008">

代表此文档有效缓存在2008.12.31，在此时间前都不会再次请求服务器下载网页，而是从缓存中读取。以前一直以为只有js、css、image这些静态文件才可以设置缓存（需要在nginx、apache配置文件中修改），现在明白html文件也可以这样缓存。
3、refresh（间隔刷新时间）

<meta http-equiv="refresh" content="30">

浏览器将会每隔30秒刷新网页。用的不多，即使有这样的需求，我们一般是用jquery的ajax请求来不断刷新网页的局部内容。
4、set-cookie（设置浏览器的cookie，用于标示客户端身份）

<meta http-equiv="set-cookie" content="3434hgh3vv4433dg3g43">

根本用不到，因为服务器已经做好了一切了，会自动在http响应中放入cookie，浏览器接收到cookie时，会把cookie保存到本地，下次再次访问此站点时，会自动把cookie放入http请求的头部，服务器根据cookie来标识客户端身份。

0 0