下载APP
关闭
讲堂
客户端下载
兑换中心
企业版
渠道合作
推荐作者

15 | HTML元信息类标签：你知道head里一共能写哪几种标签吗？

2019-02-21 winter
重学前端
进入课程

讲述：winter

时长12:26大小11.40M

你好，我是 winter。

我们在前面的 HTML 部分的课程中，已经学习了语义标签。这些标签涵盖了我们日常开发用到的多数标签，也是我们编写代码时最常用的一批标签。

但是我们今天要讲的标签，重要性丝毫不弱于语义类标签，这就是页面元信息类标签。

我们可以先来了解一下什么是元信息类标签。所谓元信息，是指描述自身的信息，元信息类标签，就是 HTML 用于描述文档自身的一类标签，它们通常出现在 head 标签中，一般都不会在页面被显示出来（与此相对，其它标签，如语义类标签，描述的是业务）。

元信息多数情况下是给浏览器、搜索引擎等机器阅读的，有时候这些信息会在页面之外显示给用户，有时候则不会。

元信息类标签数量不多，我在这里就逐一为你介绍一下。

head 标签

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

head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title，并且最多只能包含一个 base。如果文档作为 iframe，或者有其他方式指定了文档标题时，可以允许不包含 title 标签。

title 标签

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

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

heading 和 title 两个英文单词意义区分十分微妙，在中文中更是找不到对应的词汇来区分。但是实际使用中，两者确实有一定区别。

在 HTML 标准中，特意讨论了这个问题。我们思考一下，假设有一个介绍蜜蜂跳舞求偶仪式的科普页面，我们试着把以下两个文字分别对应到 title 和 h1。

  • 蜜蜂求偶仪式舞蹈
  • 舞蹈

在听 / 看正确答案前，你不妨先想想，自己的答案是什么呢？为什么？

好了，思考之后，我们来看看正确答案。正确答案是“蜜蜂求偶仪式舞蹈”放入 title，“舞蹈”放入 h1。

我来讲一讲为什么要这样放呢？这主要是考虑到 title 作为元信息，可能会被用在浏览器收藏夹、微信推送卡片、微博等各种场景，这时侯往往是上下文缺失的，所以 title 应该是完整地概括整个网页内容的。

而 h1 则仅仅用于页面展示，它可以默认具有上下文，并且有链接辅助，所以可以简写，即便无法概括全文，也不会有很大的影响。

base 标签

base 标签实际上是个历史遗留标签。它的作用是给页面上所有的 URL 相对地址提供一个基础。

base 标签最多只有一个，它改变全局的链接地址，它是一个非常危险的标签，容易造成跟 JavaScript 的配合问题，所以在实际开发中，我比较建议你使用 JavaScript 来代替 base 标签。

meta 标签

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

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

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

  <meta name=application-name content="lsForums">
复制代码

这个标签表示页面所在的 web-application，名为 IsForums。

这里的 name 是一种比较自由的约定，http 标准规定了一些 name 作为大家使用的共识，也鼓励大家发明自己的 name 来使用。

除了基本用法，meta 标签还有一些变体，主要用于简化书写方式或者声明自动化行为。下面我就挑几种重点的内容来分别讲解一下。

具有 charset 属性的 meta

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

  <meta charset="UTF-8" >
复制代码

charset 型 meta 标签非常关键，它描述了 HTML 文档自身的编码形式。因此，我建议这个标签放在 head 的第一个。

<html>
<head>
<meta charset="UTF-8">
……
复制代码

这样，浏览器读到这个标签之前，处理的所有字符都是 ASCII 字符，众所周知，ASCII 字符是 UTF-8 和绝大多数字符编码的子集，所以，在读到 meta 之前，浏览器把文档理解多数编码格式都不会出错，这样可以最大限度地保证不出现乱码。

一般情况下，http 服务端会通过 http 头来指定正确的编码方式，但是有些特殊的情况如使用 file 协议打开一个 HTML 文件，则没有 http 头，这种时候，charset meta 就非常重要了。

具有 http-equiv 属性的 meta

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

例如，下面一段代码，相当于添加了 content-type 这个 http 头，并且指定了 http 编码方式。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
复制代码

除了 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 的格式就可以了。

我们来介绍一个 meta 类型，它没有在 HTML 标准中定义，却是移动端开发的事实标准：它就是 name 为 viewport 的 meta。

这类 meta 的 name 属性为 viewport，它的 content 是一个复杂结构，是用逗号分隔的键值对，键值对的格式是 key=value。

例如：

<meta name="viewport" content="width=500, initial-scale=1">
复制代码

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

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

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

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
复制代码

其它预定义的 meta

在 HTML 标准中，还定义了一批 meta 标签的 name，可以视为一种有约定的 meta，我在这里列出来，你可以简单了解一下。

application-name：如果页面是 Web application，用这个标签表示应用名称。

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

结语

在本课，我们又学习了一批标签，它们是文档用于描述自身的元信息类标签。一些元信息标签可以产生实际的行为，掌握它们对于我们编写代码是必须的。

另一些元信息仅仅是对页面的描述，掌握它们可以使我们编写的页面跟各种浏览器、搜索引擎等结合地更好。

主要包括下面这些内容。

  • head：元信息的容器。
  • title：文档标题。
  • base：页面的基准 URL。
  • meta: 元信息通用标签。

我们还展开介绍了几种重要的 meta 标签，charset 表示页面编码，http-equiv 表示命令，还介绍了一些有约定的 meta 名称。

最后，给你留一个问题，你还见过哪些 meta 标签的用法？欢迎留言告诉我。

© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
上一篇
14 | 浏览器：一个浏览器是如何工作的？（阶段五）
下一篇
16 | JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行？
 写留言

精选留言(13)

  • 火云邪神00...
    2019-02-23
    79
    老师，我家的猫不让我给他剪指甲，怎么办？
    展开

    作者回复: 有三个思路，可供参考：
    1. 带去宠物医院剪
    2. 拿毛巾包上或者装进袋子里强行剪
    3. 忍着，被主子抓几道是一种赏赐

  • AICC
    2019-02-21
    54
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 默认使用最新浏览器 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- 不被网页(加速)转码 -->
    <meta name="robots" content="index,follow">
    <!-- 搜索引擎抓取 -->
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- 设置苹果工具栏颜色 -->
    展开

    作者回复: 赞

  • Carson
    2019-02-21
    10
    阅读完今天的文章，才感觉自己其实不懂 meta，之前对 meta 的细节缺少分类和整理。感谢老师。

    回到老师的问题，我平时还见过以下三种（组）标签：

    1. Open Graph 的标签组，包括 title, type, URL, site_name, description 和 image，是为 Facebook 分享提供信息；

    2. Twitter 的标签组，包括 card, title, description 和 image，是为 Twitter 分享提供信息；

    3. msapplication 的标签组，包括 TileColor 和 TileImage，是为 Windows 8 以及以上系统识别 favicons 用的。
    展开

    作者回复: 赞 这部分我也不了解 推荐给大家。

  • 丘丘
    2019-03-24
    8
    上面评论中的
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- 设置苹果工具栏颜色 -->
    这两条，我试着似乎没有效果。
    keywords这个属性，理论上对seo有作用，但是我随便进行了搜索，打开排名第一页的几个网站，都没有这么属性，是不是现在这种简单的seo打法已经被放弃了呢？
    展开
  • hiahias崔...
    2019-02-21
    5
    meta基本用法：
      <meta name=application-name content="lsForums">
    name = application-name 是不是少了 “”
    name = "applicaiton-name" ?

    作者回复: 属性可以不写引号 不过确实写了更好

  • LiH
    2019-03-01
    4
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">
    关闭iOS上的内容识别
    展开
  • 码屁
    2019-05-15
    2
    @丘丘 你难道忘了 竞价排名[滑稽]
    展开
  • July
    2019-02-28
    2
    老师好，keywords 现在对seo还有用吗？
    展开
  • Alen
    2019-05-08
    1
    http://www.alenqi.site/2018/03/04/complete-tags/ 之前总结的
    展开
  • 周姑娘
    2019-04-03
    1
    为什么我有的看不懂，不知道怎么学习
    展开
  • 靠人品去赢
    2019-02-21
    1
    突然想问一下，老是本尊是不是一个猫奴啊，感觉很喜欢那猫举例子做封面什么的。

    编辑回复: 是的呀 养了三只呢

  • 阿成
    2019-02-21
    1
    常见的还有
    format-detection 禁止 iPhone 的自动识别

    作者回复: 赞。

  • 有铭
    2019-02-23
    我是说为什么viewport在html标准里找不到，一直很疑惑是从哪里蹦出来的，搞了半天原来不是html标准是行业约定

    作者回复: 是的 但是这个东西太重要了 比标准上的很多细节都重要得多。

收藏