对于meta的理解一直很模糊，今天做一个详细拆解
定义
<meta>元素提供有关页面元信息，比如针对搜索引擎，提供关键词和更新频度。
<meta> 标签位于文档的头部，不包含任何内容。
<meta> 标签的属性定义了与文档相关联的名称/值对。
在 HTML 中，<meta> 标签没有结束标签。
在 XHTML 中，<meta> 标签必须被正确地关闭。
注释：<meta> 标签永远位于 head 元素内部。
注释：元数据总是以名称/值的形式被成对传递的。
拆解
meta标签有以下属性：
- http-equiv（可选）
- name（可选）
- scheme（可选）
- content（必选，定义与 http-equiv 或 name 属性相关的元信息）
| 属性 |
值 |
描述 |
| http-equiv |
content-type / expire / refresh / set-cookie |
把content属性关联到HTTP头部 |
| name |
author / description / keywords / generator / revised / others |
把 content 属性关联到一个名称 |
| scheme |
任意字符 |
定义用于翻译 content 属性值的格式 |
| 属性 |
值 |
描述 |
| http-equiv |
content-type / expire / refresh / set-cookie |
把content属性关联到HTTP头部 |
| content |
任意字符 |
定义与 http-equiv 或 name 属性相关的元信息 |
实验
使用name
viewport(视窗大小)
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
1
2
3
4
5
6
7
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
keywords(关键字)
keywords用来告诉搜索引擎你网页的关键字是什么。
1
| <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
|
description(网站内容描述)
description用来告诉搜索引擎你的网站主要内容。
1
| <meta name="description" content="haorooms博客,html的meta总结，meta是html语言head区的一个辅助性标签。">
|
robots(爬虫向导)
说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
1
2
3
4
5
6
7
8
9
|
<meta name="robots" content="index,follow" />
|
author(作者)
1
| <meta name="author" content="root,root@xxxx.com">
|
generator
1
2
|
<meta name="generator" content="hexo" />
|
copyright
1
2
|
<meta name="copyright" content="All Rights Reserved" />
|
revisit-after
revisit-after代表网站重访,7days代表7天，依此类推。
1
| <meta name="revisit-after" content="7days">
|
revised
表示该网页文档最后修改的时间
1
2
|
<meta name="revised" content="谁谁谁,2015/07/22" />
|
使用http-equiv
expires(期限)
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
1
2
|
<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">
|
cache-control指定请求和响应遵循的缓存机制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
|
pragma(cache模式)
说明：禁止浏览器从本地计算机的缓存中访问页面内容。
1
2
|
<meta http-equiv="pragma" content="no-cache">
|
refresh(刷新)
说明：自动刷新并指向新页面。
1
2
|
<meta http-equiv="refresh" content="0,URL='https://www.baidu.com'" />
|
set-cookie(cookie设定)
说明：如果网页过期，那么存盘的cookie将被删除。
1
2
|
<meta http-equiv="set-cookie" content="cookiename value=xxx;expires=Wed,22-Jul-201511:11:11GMT；path=/" />
|
content-type(显示字符集的设定)
说明：设定页面使用的字符集。
1
2
3
4
|
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta charset="utf-8" />
|
window-target(显示窗口的设定)
说明：强制页面在当前窗口以独立页面显示。
1
| <meta http-equiv="window-target" content="_top">
|
content-language
1
| <meta http-equiv="content-language" content="zh-cn"/>
|
指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。
1
| <meta http-equiv="imagetoolbar" content="false"/>
|
content-script-type
1
2
|
<meta http-equiv="content-script-type" content="text/javascript">
|
手机端常用设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-orientation" content="portrait"/>
<meta name="full-screen" content="yes"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="browsermode" content="application"/>
<meta name="x5-page-mode" content="app"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="标题"/>
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="telephone=no,email=no,address=no">
|
