基础 - HTML 实现 header 效果

  1. Content-Type
  2. Cache-Control
  3. 就是 http-equiv 这个属性

  • 作者：KK

  • 发表日期：2020.06.04

浏览器到底会如何跟服务器通讯，走怎样的流程，而获取到响应数据后又如何解析，这一切都受到响应头（header）的影响，然而表达这些信息的方式在网页里不仅有 header 这一招，还有 meta 标签呢。

Content-Type

比如说Content-Type: text/html; charset=GBK那么浏览器就会把响应内容当作HTML代码来解析，而里面的文字就按 GBK 编码来显示。

而如果在页面里加入<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，浏览器就会优化按照这个标签所声明的去覆盖 header 所声明的 Content-Type 。

Cache-Control

相信大家也是很熟悉了，这是缓存控制的：

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="expires" content="3600">

相当于 header：

Cache-Control: no-cache
expires: 3600

就是 http-equiv 这个属性

meta 标签的 http-equiv 属性指定了一个名称去覆盖 http 的该名称报头，要求浏览器优先按照标签的声明去处理页面。但是下面这个

<meta name="keywords" content="家居装修 装修建材 墙面油漆 户外工程">
<meta name="description" content="XXX装修公司是全国三大装修公司之一，致力于为客户提供……">

就是我们平时做页面 SEO 会用到的　keywords 和 description 是放在name属性里的，而不是 http-equiv 属性，这其实就不是覆盖 http 报头的意思，而且 http 的 header 里也没有 keywords、description。它们只是以 meta 标签的形式设置了一些页面配置，让别人读取到这个页面时，从这里配置里获取一些值来知道有什么信息而已。因此你还会看到诸如<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">这样告诉浏览器要怎么显示页面排版的，其实也不是覆盖 header 的意思。现在是越来越少新的控制项会使用http-equiv了，基本上常见的就是上面那些。