重学前端-总结：15、HTML元信息类标签：你知道head里一共能写哪几种标签吗？

末蓝、 2021-09-28 05:46 200阅读 0赞

# 重学前端-总结：15、HTML元信息类标签：你知道head里一共能写哪几种标签吗？ #

### 文章目录 ###

*  重学前端-总结：15、HTML元信息类标签：你知道head里一共能写哪几种标签吗？
 *  概念-页面元信息类标签
 *   *  head 标签
     *  title 标签
     *  base 标签
     *  meta 标签
     *   *  具有 charset 属性的 meta
         *  具有 http-equiv 属性的 meta
         *  name 为 viewport 的 meta
         *  其它预定义的 meta

# 概念-页面元信息类标签 #

所谓元信息，是指描述自身的信息，元信息类标签，就是 HTML 用于描述文档自身的一类标签，它们通常出现在 head 标签中，一般都不会在页面被显示出来（与此相对，其它标签，如语义类标签，描述的是业务）。  
元信息多数情况下是给浏览器、搜索引擎等机器阅读的，有时候这些信息会在页面之外显示给用户，有时候则不会。

## head 标签 ##

首先我们先来了解一下 head 标签，head 标签本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器使用。

## title 标签 ##

title 标签表示文档的标题，从字面上就非常容易理解。这里我就讲讲需要注意的地方。

你还记得吗，我们的语义类标签中也有一组表示标题的标签：h1-h6。

title和h1 但是实际使用区别：

*  title 应该是完整地概括整个网页内容的。
 *  而 h1 则仅仅用于页面展示，所以可以简写，一般无法概括全文。

## base 标签 ##

*  历史遗留标签。
 *  给页面上所有的 URL 相对地址提供一个基础。
 *  非常危险的标签， base 标签最多只有一个，它改变全局的链接地址，容易造成跟 JavaScript 的配合问题，慎用。

## meta 标签 ##

meta 标签是一组键值对，它是一种通用的元信息表示标签。

在 head 中可以出现任意多个 meta 标签。一般的 meta 标签由 name 和 content 两个属性来定义。name 表示元信息的名，content 则用于表示元信息的值。

它基本用法是下面这样的，你也可以自己动手尝试一下：

### 具有 charset 属性的 meta ###

从 HTML5 开始，为了简化写法，meta 标签新增了 charset 属性。添加了 charset 属性的 meta 标签无需再有 name 和 content。

*  charset 型 meta 标签非常关键，它描述了 HTML 文档自身的编码形式，建议这个标签放在 head 的第一个。
 *  http 服务端会通过 http 头来指定正确的编码方式，但是有些特殊的情况如使用 file 协议打开一个 HTML 文件，则没有 http 头，这时候charset meta 就非常重要。

### 具有 http-equiv 属性的 meta ###

具有 http-equiv 属性的 meta 标签，表示执行一个命令，这样的 meta 标签可以不需要 name 属性了。

除了 content-type，还有以下几种命令：

*  content-language 指定内容的语言；
 *  default-style 指定默认样式表；
 *  refresh 刷新；
 *  set-cookie 模拟 http 头 set-cookie，设置 cookie；
 *  x-ua-compatible 模拟 http 头 x-ua-compatible，声明 ua 兼容性；
 *  content-security-policy 模拟 http 头 content-security-policy，声明内容安全策略。

### name 为 viewport 的 meta ###

*  实际上，meta 标签可以被自由定义，只要写入和读取的双方约定好 name 和 content 的格式就可以了。
 *  name 为 viewport 的 meta ，没有在 HTML 标准中定义，却是移动端开发的事实标准

例如：

这里只指定了两个属性，宽度和缩放，实际上 viewport 能控制的更多，它能表示的全部属性如下：

*  width：页面宽度，可以取值具体的数字，也可以是 device-width，表示跟设备宽度相等。
 *  height：页面高度，可以取值具体的数字，也可以是 device-height，表示跟设备高度相等。
 *  initial-scale：初始缩放比例。
 *  minimum-scale：最小缩放比例。
 *  maximum-scale：最大缩放比例。
 *  user-scalable：是否允许用户缩放。

对于已经做好了移动端适配的网页，应该把用户缩放功能禁止掉，宽度设为设备宽度，一个标准的 meta 如下：

### 其它预定义的 meta ###

在 HTML 标准中，还定义了一批 meta 标签的 name，可以视为一种有约定的 meta，我在这里列出来，你可以简单了解一下。  
application-name：如果页面是 Web application，用这个标签表示应用名称。

*  author: 页面作者。
 *  description：页面描述，这个属性可能被用于搜索引擎或者其它场合。
 *  generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个 meta。
 *  keywords: 页面关键字，对于 SEO 场景非常关键。
 *  referrer: 跳转策略，是一种安全考量。
 *  theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的 UI（如窗口边框或者 tab 的颜色）。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/c4aa3a581f7d46fcb7dc78a8c45f941f.png