HTML <meta>汇总

最近刷面试题，发现有很多知识点遗漏、遗忘，遂总结记录于此。

---

HTML

meta

定义和用法

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

属性 值 描述 是否必须 conten some_text 定义与 http-equiv 或 name 属性相关的元信息 必须 http-equiv content-type、expires、refresh、set-cookie、X-UA-Compatible、windows-target、cache-control 把 content 属性关联到 HTTP 头部。 content-type 设定页面使用的字符集。 expires 可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 refresh 自动刷新并指向新页面。 set-cookie 如果网页过期，那么存盘的cookie将被删除。 X-UA-Compatible IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题。 windows-target 强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用 cache-control 缓存机制，Public：指示响应可被任何缓存区缓存。Private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。no-cache：指示请求或响应消息不能缓存。no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。max-age：指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。min-fresh：指示客户机可以接收响应时间小于当前时间加上指定时间的响应。max-stale：指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。 name author、description、keywords、generator、revised、viewport、renderer、robots、copyright 把 content 属性关联到一个名称，便于搜索引擎机器人查找、分类。 auto 作者 description 描述 keywords 关键词 generator 说明网站的采用的什么软件制作 revised 网页文档的修改时间 viewport 用于控制页面缩放 renderer 指定双核浏览器默认以何种方式渲染页面。 robots 用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 copyright 网站版权信息 scheme some_text 定义用于翻译 content 属性值的格式。

用法

基本标签

• 声明文档使用的字符编码：
  <meta charset="utf-8" />
  
  • 点此查询所有可用字符集
• 声明文档的兼容模式：
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  指示IE以目前可用的最高模式显示内容
• 定义对页面的描述：
  <meta name="description" content="HTML5COL学院提供高质量HTML5教学" />
• 定义页面的最新版本：
  <meta name="revised" content="Frank, 2016/3/1" />

SEO优化

• 页面描述
  <meta name="description" content="不超过850个字符"/>
• 定义针对搜索引擎的关键词：
  <meta name="keywords" content="HTML5COL学院, HTML5, CSS3, JavaScript" />
• 定义网页作者：
  <meta name="author" content="HTML5COL" />
• 定义网页搜索引擎索引方式，使用英文逗号「,」分隔，常有如下几种取值：none,noindex,nofollow,all,index和follow：
  <meta name="robots" content="index,follow" />
• 为移动设备添加 viewport
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  参数说明
  
  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)

ISO 设备

• 添加到主屏后的标题（iOS 6开始）：
  <meta name="apple-mobile-web-app-title" content="标题" />
• 设置状态栏的背景颜色：
  <meta name="apple-mobile-web-app-title" content="yes" />
• 是否启用 WebApp 全屏模式：
  <meta name="apple-mobile-web-app-capable" content="yes" />
• 设置状态栏的背景颜色：
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  注：只有在 "apple-mobile-web-app-capable" content="yes"时生效
  参数说明
  
  • default 默认值，网页内容从状态栏底部开始
  • black 状态栏背景是黑色，网页内容从状态栏底部开始
  • black-translucent 状态栏背景是黑色半透明，网页内容充满整个屏幕，顶部会被状态栏遮挡

Windows 8

• Windows 8 磁贴颜色：
  <meta name="msapplication-TileColor" content="#000" />
• Windows 8 磁贴图标：
  <meta name="msapplication-TileImage" content="icon.png" />

其他

• 禁止数字识自动别为电话号码：
  <meta name="format-detection" content="telephone=no" />
• 不让android识别邮箱：
  <meta name="format-detection" content="email=no" />
• 每 8 秒刷新一次页面：
  <meta http-equiv="refresh" content="8" />