HTML<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
Head标签在我们的开发实践中最常用的大概是定义标题和网站小图标、引入CSS/JS、定义字符集，这篇文章将总结几个我所遇到的Head标签的几个高级用法。
一、SEO相关
-
1. 定义关键词 keywords:
<meta name="keywords" content="your keywords">
页面描述内容 description:
<meta name="description" content="your description"> -
2. 定义网页搜索引擎索引方式，通常有如下几种取值：none，noindex，nofollow，all，index和follow等。
<meta name="robots" content="index,follow">
其中的属性说明如下： -
设定为all：文件将被检索，且页面上的链接可以被查询；
-
设定为none：文件将不被检索，且页面上的链接不可以被查询；
-
设定为index：文件将被检索；
-
设定为follow：页面上的链接可以被查询；
-
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
-
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
-
3. 结构化数据
结构化，是通过网页特殊的标签将需要的数据提供给搜索引擎，并在搜索结果中按照既定的模版展现的实现形式，目的是为了提升搜索结果的体验，帮助站长提升搜索结果点击率。
** 如下时使用在head中设置结构化数据后的搜索引擎展示效果：**
Paste_Image.png
Paste_Image.png
Paste_Image.png
- 360结构化数据帮助文档： http://www.so.com/help/help_3_9.html
二、浏览器控制
-
一、页面刷新：
refresh示例
5秒之后刷新本页面:
<meta http-equiv="refresh" content="5" />
5秒之后转到wangbaiyuan.cn:
<meta http-equiv="refresh" content="5; url=http://wangbaiyuan.cn" /> -
**二、 控制页面与移动设备宽度相等 **
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
网页宽度默认等于屏幕宽度（width=device-width）， 初始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
三、缓存控制：cache-control
<meta http-equiv="pragma" content="no-cache">
pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.)
<meta http-equiv="cache-control" content="no-cache">
常见的取值有private、no-cache、max-age、must-revalidate等，默认为private,其作用根据不同的重新浏览方式分为以下几种情况：
- 1） 打开新窗口 值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。 而如果指定了max-age值，那么在此值内的时间里就不会重新访问服务器，例如： Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器)
- 2） 在地址栏回车 值为private或must-revalidate则只有第一次访问时会访问服务器，以后就不再访问。 值为no-cache，那么每次都会访问。 值为max-age，则在过期之前不会重复访问。
- 3） 按后退按扭 值为private、must-revalidate、max-age，则不会重访问， 值为no-cache，则每次都重复访问4） 按刷新按扭 无论为何值，都会重复访问 Cache-control值为“no-cache”时，访问此页面不会在Internet临时文件夹留下页面备份。
<meta http-equiv="expires" content="0">
指定Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问： Expires: Fri, 31 Dec 1999 16:00:00 GMT 比如：禁止页面在IE中缓存 http响应消息头部设置： CacheControl = no-cache Pragma=no-cache Expires = -1 Expires是个好东东，如果服务器上的网页经常变化，就把它设置为0，表示立即过期。
网友评论