head

元素 一组元数据

title

文档对外的标题 窗口标题 / 历史记录 / 搜索结果标题

lang

语言

meta

name / http-equiv / charset

name、http-equiv 指定属性，content 指定内容

标准属性

name

• description 网站内容描述

• keywords 关键字

• author 作者

• robots （HTTP 请求头 X-robots-tag 使用相同规则）

  <meta name="robots" content="index,follow" />
  

  all, none, index, noindex, follow, nofollow

  • noindex：不要索引本页面
  • nofollow：不要跟踪本页面上的链接

• viewport 视图模式

  <!-- PC -->
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"
  />
  <!-- 刘海屏 -->
  <meta name="viewport" content="viewport-fit=cover" />
  <!-- 移动端 -->
  <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 
  

  • width

    控制视口的宽度。device-width，100vw，100% 的视口宽度

  • initial-scale

    控制页面首次加载时显示的缩放倍数。

  • maximum-scale

    控制页面允许放大的倍数

  • user-scalable

    控制是否允许页面上的放大和缩小操作。有效值为  0、1、yes  或  no

  • viewport-fit

    页面内容完全覆盖整个窗口

• renderer 渲染模式

  webkit

扩展属性

• Baidu: mobile-agent, baiduspider
• Twitter: twitter:card, twitter:image, twitter:creator
• Google: application-url, google-site-verification, googlebot
• 360: renderer (未注册)

http-equiv

• X-UA-Compatible IE=edge,chrome=1 浏览模式

  • IE 使用最高版本渲染
  • 使用 Google Chrome Frame (谷歌内嵌浏览器框架 GCF) 渲染

• 缓存

  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  

  • pragma http 1.0/1.1 no-cache

  • cache-control http 1.1 优先

    • public: 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存

    • private: 表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）。私有缓存可以缓存响应内容，比如：对应用户的本地浏览器。

    • no-cache: 在发布缓存副本之前，强制要求缓存把请求提交给原始服务器进行验证 (协商缓存验证)。

    • no-store: 缓存不应存储有关客户端请求或服务器响应的任何内容，即不使用任何缓存。

  • expires

    • GMT

    • 日期/时间，即在此时候之后，响应过期

    • 无效的日期表示该资源已经过期

• refresh 自动刷新并指向新页面

• Set-Cookie 如果网页过期，那么存盘的 cookie 将被删除

• content-Type 字符集

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />