外观
Skip to content
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" />。 |
下面是一些例子和说明
html
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />这将告诉浏览器准备接收一个字符集为gb2312的HTML文档。注意，在HTML5中，上面的内容可以直接缩写为****
html
<meta http-equiv="expires" content="Fri,31 Dec 2008 18:18:18 GMT" />设定网页的到期时间，一旦网页过期，必须到服务器上重新传输。注意，必须使用GMT的时间格式。
html
<meta http-equiv="Refresh" content="5;url=http://www.orzzone.com" />将在5秒后重定向到指定的网址（http://www.orzzone.com），注意这里的URL可为空。
html
<meta http-equiv="Pragma" content="no-cache" />禁止浏览器从本地计算机的缓存(cache)中访问页面内容。注意，这样设定后，访问者将无法脱机浏览。
html
<meta
http-equiv="Set-Cookie"
content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/"
/>设定cookie，如果网页过期，那么存盘的cookie将被删除。注意，必须使用GMT时间格式。
html
<meta http-equiv="Window-target" content="\_top" />强制页面在当前窗口以独立页面显示。用来防止别人在框架里调用自己的页面。
html
<meta http-equiv="Content-Language" content="zh-cn" />设定显示语言。
html
<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种随机选择一种。
html
<meta http-equiv="imagetoolbar" content="false" />指定是否显示图片工具栏，false代表不显示，true代表显示。
html
<meta http-equiv="Content-Script-Type" content="text/javascript" />指明页面中脚本的类型。
html
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />这是一个非标准的报头，它的值是chrome=1和IE=edge，如果IE用户安装了Chrome Frame插件，则可以使用这个插件，如果没有安装，则使用IE浏览器最新、最好的引擎呈现，而不是以传统模式呈现。
html
<meta name="author" content="Yakima Teng" />注明网页的作者为Yakima Teng
html
<meta name="revised" content="Yakima Teng, 8/5/2015" />指定了修订信息。
html
<meta name="generator" content="WordPress" />指定了编辑软件
html
<meta name="description" content="HTML examples" />对文本的描述信息，可能对SEO有好处
html
<meta name="keywords" content="keyword1, keyword2, keyword3, ..." />定义文本的关键字信息，可能对SEO有好处
html
<meta name="robots" content="all" />robots告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all, none, index, noindex, follow, nofollow。all是默认值。它们对应的含义如下，all：文件将被检索，且页面上的链接可以被查询；none：文件将不被检索，且页面上的链接不可以被查询；index：文件将被检索；follow：页面上的链接可以被查询；noindex：文件将不被检索，但页面上的链接可以被查询；nofollow：文件将被检索，但页面撒花姑娘的链接不可以被查询。
html
<meta name="Copyright" content="信息"说明网站的版权信息
html
<meta name="revisit-after" content="7 days" />7天后重访网站。
html
<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：决定用户是否可以缩放视图。还可以防止文本开始输入时的滚动。