你真的了解meta标签的详细用途吗?
今天啊我们来好好缕一缕meta这个标签
接下来我们从四个方面来介绍meta标签
分别是:
meta是什么
meta的组成
meta能做什么
meta的属性与值
meta标签分两大部分: http标题信息(http-equiv)和页面描述信息(name)
meta能做什么
- 控制页面缓冲
- 自动刷新并指向新的页面
- SEO搜索引擎优化
- 定义页面使用语言
- 实现网页转换时的动态效果
- 网页定级评价
charset (首先我们来看下charset(HTML5新增))
* 规定 HTML 文档的字符编码 *
<meta charset="utf-8">
注意:
* charset属性是HTML5中的新属性,且替换了: *
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
meta的属性与值
首先我们来总览下都有哪些属性及对应的值
- name
- content
- http-equiv
name
* 网页描述的关键字、摘要、作者和定义robots(搜索引擎机器人)行为、为搜索引擎提供信息 *
主要参数有:
- format-detection
- robots
- revisit-after
- viewport
- apple-mobile-web-app-capable
format-detection
* 用来检测HTML中的一些格式的 *
<meta name="format-detection" content="telephone=no,email=no,adress=no">
telephone=no
禁止了把数字转化为拨号链接
email=no
禁止作为邮箱地址 告诉设备不识别邮箱
adress=no
禁止跳转至地图
robots
有时候会有一些站点内容,不希望被ROBOTS抓取而公开。为了解决这个问题,ROBOTS开发界提供了两个办法:一个是robots.txt,另一个是The Robots META标签。
<meta name="Robots" contect="all|none|index|noindex|follow|nofollow"> 默认是all
- all: 文件将被检索,且页面上的链接可以被查询
- none: 文件将不被检索,且页面上的链接不可以被查询
- index: 文件将被检索
- follow: 页面上的链接可以被查询
- noindex: 文件将不被检索,但页面上的链接可以被查询
- nofollow: 文件将不被检索,页面上的链接可以被查询
revisit-after
通知搜索引擎多少天访问一次
<meta name='revisit-after' content='7 days'>
viewport
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
width: 控制viewport的大小,可以指定一个值,或者特殊的值,如device-width为设备的宽度
height: 和width相对应,指定高度
initial-scale: 初始缩放比例,页面第一次加载时候缩放比例
maximum-scale: 允许用户缩放到的最大比例
minimum-scale: 允许用户缩放到的最小比例
user-scalable: 用户是否可以手动缩放
apple-mobile-web-app-capable
* 删除/显示 默认的苹果工具栏和菜单栏 *
<meta name="apple-mobile-web-app-capable" content="yes">
注意:
content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
content
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。
http-equiv
http-equiv相当于http的文件头作用,它可以向浏览器传回一些有用的信息,
以帮助正确地显示网页内容
主要的参数有:
- X-UA-Compatible
- expires
- pragma
- refresh
- set-cookie
- window-target
- content-type
- pics-label
- content-language
- cache-control
- content-script-type
X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=7">
以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=edge"
以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。
expires
* 可以用于设定网页到期时间,一旦网页过期必须到服务器上重新传输 *
<meta http-equiv="expires" content="Wed, 20 Jun 2016 22:33:00 GMT">
注意:
* 必须使用GMT的时间格式 *
pragma
* 禁止浏览器从本地计算机的缓存中访问页面内容用法 *
<meta http-equiv="pragma" content="no-cache">
注意:
* 访问者将无法脱机浏览 *
refresh
* 自动刷新并指向新页面 *
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com/">
注意:
* 其中2是指停留2秒后自动刷新到URL网址 *
set-cookie
* 如果网页过期,则存盘的cookie将被删除 *
<meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Wednesday,20-Jun-2017 24:00:00 GMT; path=/">
注意:
* 必须使用GMT的时间格式 *
window-target
* 强制页面在当前窗口以独立页面显示 *
<meta http-equiv="window-target" content="_top">
注意:
** 这个属性是用来防止别人在框架里调用自己的页面
content选项:
_blacnk 在新窗口显示
_top 当前整个窗口显示
_self 当前容器显示,比如框架嵌套
_parent 父容器显示,比如框架嵌套
**
content-type
* 设定页面使用的字符集 *
<meta http-equiv="content-type" content="">
注意:
* 需要放在head标签最前面 *
pics-label
* 网页等级评定说明:在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的。 *
<meta http-equiv="pics-label" content="">
content-language
* 显示语言的设定 *
<meta http-equiv="content-language" content="zh-cn">
cache-control
* HTTP 1.1 引入了 Cache-Control 响应头参数以给站长们更多控制网站内容的权力,同时弥补了 Expires的局限. *
<meta http-equiv="cache-control" content="no-cache">
cache-control的参数包括:
- max-age=[单位:秒 seconds] — 设置缓存最大的有效时间
- s-maxage=[单位:秒 seconds] — 类似于 max-age, 但是它只用于公享缓存 (e.g., proxy)
- public — 响应会被缓存,并且在多用户间共享。正常情况, 如果要求 HTTP 认证,响应会自动设置为 private
- private — 响应只能够作为私有的缓存(e.g., 在一个浏览器中),不能在用户间共享
- no-cache — 响应不会被缓存,而是实时向服务器端请求资源。这一点很有用,这对保证HTTP 认证能够严格地禁止缓存以保证安全性很有用(这是指页面与public结合使用的情况下).既没有牺牲缓存的效率,又能保证安全
- no-store — 在任何条件下,响应都不会被缓存,并且不会被写入到客户端的磁盘里,这也是基于安全考虑的某些敏感的响应才会使用这个
- must-revalidate — 响应在特定条件下会被重用,以满足接下来的请求,但是它必须到服务器端去验证它是不是仍然是最新的
- proxy-revalidate — 类似于 must-revalidate,但不适用于代理缓存
content-script-type
* W3C网页规范,指明页面中脚本的类型 *
<meta http-equiv="content-script-type" content="text/javascript">
其他
<meta http-equiv="page-enter" content="revealTrans(duration=1.0,transtion=12)">
在IE5.5及以上版本的浏览器中,增加了页面过渡效果,经过检查和实验,IE中是可以的,谷歌浏览器是不支持的
<meta http-equiv="page-exit" content="revealTrans(duration=1.0,transtion=12)">
设定离开页面时的特殊效果
Duration
值为网页动态过渡的时间,单位为秒Transition
是过渡方式,它的值为0到23,分别对应24种过渡方式- 盒状收缩
- 盒状放射
- 圆形收缩
- 圆形放射
- 由下往上
- 由上往下
- 从左至右
- 从右至左
- 垂直百叶窗
- 水平百叶窗
- 水平格状百叶窗
- 垂直格状百叶窗
- 随意溶解
- 从左右两端向中间展开
- 从中间向左右两端展开
- 从上下两端向中间展开
- 从中间向上下两端展开
- 从右上角向左下角展开
- 从右下角向左上角展开
- 从左上角向右下角展开
- 从左下角向右上角展开
- 水平线状展开
- 垂直线状展开
- 随机产生一种过渡方式