立诚勿怠,格物致知
It's all about connecting the dots

meta标签

<meta>元素可提供有关页面的元信息(meta-information),该标签永远位于文档的头部(head元素内部),不包含任何内容

必须的属性
属性 描述
content some_text 定义与http-equiv或name属性相关的元信息(content属性始终要和name属性或http-equiv属性一起使用)
可选的属性
属性 描述
http-equiv content-type
expires
refresh
set-cookie
其他
把content属性关联到HTTP头部。(如果没有提供name属性,那么会采用http-equiv属性的值)。
name author
description
keywords
generator
revised
其他
把content属性关联到一个名称。
scheme some_text 定义用于翻译content属性值的格式,如<meta name=”date” content=”2012-01-01″ scheme=”YYYY-MM-DD” />和<meta name=”identifier” content=”0-1234-5678-9″ scheme=”ISBN” />。

下面是一些例子和说明

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
这将告诉浏览器准备接收一个字符集为gb2312的HTML文档。注意,在HTML5中,上面的内容可以直接缩写为<meta charset=”utf-8″>
<meta http-equiv=”expires” content=”Fri,31 Dec 2008 18:18:18 GMT” />
设定网页的到期时间,一旦网页过期,必须到服务器上重新传输。注意,必须使用GMT的时间格式。
<meta http-equiv=”Refresh” content=”5;url=http://www.orzzone.com” />
将在5秒后重定向到指定的网址(http://www.orzzone.com),注意这里的URL可为空。
<meta http-equiv=”Pragma” content=”no-cache” />
禁止浏览器从本地计算机的缓存(cache)中访问页面内容。注意,这样设定后,访问者将无法脱机浏览。
<meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/” />
设定cookie,如果网页过期,那么存盘的cookie将被删除。注意,必须使用GMT时间格式。
<meta http-equiv=”Window-target” content=”_top” />
强制页面在当前窗口以独立页面显示。用来防止别人在框架里调用自己的页面。
<meta http-equiv=”Content-Language” content=”zh-cn” />
设定显示语言。
&meta http-equiv=”Page-Enter” content=”revealTrans(duration=5.0,transition=20)” />
进出页面的时候会看到一些特殊的效果。在RevealTrans动态滤镜中,duration白哦是滤镜特效的持续时间(单位为秒);transition滤镜类型标明使用哪一种特效,取值为0~23,这些值的意义分别为:0矩形缩小、1矩形扩大、2圆形缩小、3圆形扩大、4下到上刷新、5上到下刷新、6左到右刷新、7右到左刷新、8竖百叶窗、9横百叶窗、10错位横百叶窗、11错位竖百叶窗、12点扩散、13左右到中间刷新、14中间到左右刷新、15中间到上下、16上下到中间、17右下到左上、18右上到左下、19左上到右下、20左下到右上、21横条、22竖条、23以上22种随机选择一种。
<meta http-equiv=”imagetoolbar” content=”false” />
指定是否显示图片工具栏,false代表不显示,true代表显示。
<meta http-equiv=”Content-Script-Type” content=”text/javascript” />
指明页面中脚本的类型。
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
这是一个非标准的报头,它的值是chrome=1和IE=edge,如果IE用户安装了Chrome Frame插件,则可以使用这个插件,如果没有安装,则使用IE浏览器最新、最好的引擎呈现,而不是以传统模式呈现。
<meta name=”author” content=”Yakima Teng” />
注明网页的作者为Yakima Teng
<meta name=”revised” content=”Yakima Teng, 8/5/2015″ />
指定了修订信息。
<meta name=”generator” content=”WordPress” />
指定了编辑软件
<meta name=”description” content=”HTML examples” />
对文本的描述信息,可能对SEO有好处
<meta name=”keywords” content=”keyword1, keyword2, keyword3, …” />
定义文本的关键字信息,可能对SEO有好处
<meta name=”robots” content=”all” />
robots告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。content的参数有all, none, index, noindex, follow, nofollow。all是默认值。它们对应的含义如下,all:文件将被检索,且页面上的链接可以被查询;none:文件将不被检索,且页面上的链接不可以被查询;index:文件将被检索;follow:页面上的链接可以被查询;noindex:文件将不被检索,但页面上的链接可以被查询;nofollow:文件将被检索,但页面撒花姑娘的链接不可以被查询。
<meta name=”Copyright” content=”信息”
说明网站的版权信息
<meta name=”revisit-after” content=”7 days” />
7天后重访网站。
<meta name=”viewport” content=”width=device-width”>
这个meta属性称为viewport,它目前仅适用于触屏设备,将它设置正确是非常重要的。在PC上可以在屏幕上一个一个地数出像素点,但在移动设备的屏幕上看到的像素与桌面设备上的像素并不一样,在一个没有viewport元信息的页面上,视图会默认设定宽度为980px,则宽度为300px的元素表示的宽度为300虚拟像素宽。viewport就是一个虚拟的窗口,viewport的边缘代替浏览器的边缘,成为了窗口的边缘。viewport的宽度和高度除了可以使用像素值,还可以接受两个关键字:device-width和device-height——这显然是根据设备屏幕的像素返回实际的尺寸。viewport属性对应的content中,可以设定的属性除了width,还有height、initial-scale、maximum-scale和user-scaleable,它们的含义分别为:width:设置viewport的宽度,默认值为980,允许的取值范围为200~10000;height:设置viewport的高度,默认值是通过宽度和设备宽高比计算出来的,允许的取值范围为223~10000;initial-scale:设置viewport的初始比例。默认值是通过计算使得整个页面在可见区域内。范围由minimum-scale和maximum-scale属性决定;maximum-scale:设置viewport的最大比例。默认值是5.0.允许的取值范围为0~10.0;user-scaleable:决定用户是否可以缩放视图。还可以防止文本开始输入时的滚动。
赞(0) 打赏
文章名称:《meta标签》
文章链接:https://www.orzzone.com/meta%e6%a0%87%e7%ad%be.html
商业联系:yakima.public@gmail.com

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册