极客时间已完结课程限时免费阅读

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

HTML元信息类标签：你知道head里一共能写哪几种标签吗？-极客时间

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

2019-02-21 winter 来自北京
《重学前端》
课程介绍

讲述：winter

时长12:29大小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 标签的用法？欢迎留言告诉我。
分享给需要的人，Ta购买本课程，你将得18元
生成海报并分享

赞 15

提建议

© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
上一篇
CSS语法：除了属性和选择器，你还需要知道这些带@的规则
下一篇
CSS 选择器：如何选中svg里的a元素？
 写留言

精选留言(21)

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

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

    共 6 条评论
    199
  • AICC
    2019-02-21
    <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"> <!-- 设置苹果工具栏颜色 -->
    展开

    作者回复: 赞

    146
  • CC
    2019-02-21
    阅读完今天的文章，才感觉自己其实不懂 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 用的。
    展开

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

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

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

    8
  • 码屁
    2019-05-15
    @丘丘 你难道忘了 竞价排名[滑稽]
    5
  • Alen
    2019-05-08
    http://www.alenqi.site/2018/03/04/complete-tags/ 之前总结的
    5
  • 靠人品去赢
    2019-02-21
    突然想问一下，老是本尊是不是一个猫奴啊，感觉很喜欢那猫举例子做封面什么的。

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

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

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

    4
  • Geek_fc1551
    2019-12-04
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 添加到主屏后的标题 --> <meta name="apple-mobile-web-app-title" content="标题" /> <!-- 忽略数字自动识别为电话号码 --> <meta content="telephone=no" name="format-detection" /> <!-- 忽略识别邮箱 --> <meta content="email=no" name="format-detection" /> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />
    展开
    2
  • July
    2019-02-28
    老师好，keywords 现在对seo还有用吗？
    2
  • 阿成
    2019-02-21
    常见的还有 format-detection 禁止 iPhone 的自动识别

    作者回复: 赞。

    2
  • 渴望做梦
    2019-07-08
    <meta name="renderer" content="webkit|ie-comp|ie-stand"> 对于多核浏览器，控制浏览器以哪种类型内核来显示，好像是 360 浏览器首先主导的
    1
  • 周姑娘
    2019-04-03
    为什么我有的看不懂，不知道怎么学习
    1
  • 蹦哒
    2022-09-28 来自北京
    加上这样的meta，页面依然可以缩放，目前还没有发现能够成功禁止缩放的浏览器，是这个过时了不被浏览器支持了吗？ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  • 疯狂的石头
    2022-07-25
    看了MDN，meta标签支持网站提供可使用的特定信息，如Facebook编写的元数据协议，Twitter自己的元数据协议 ``` <meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> <meta property="og:description" content="The Mozilla Developer Network (MDN) provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> <meta property="og:title" content="Mozilla Developer Network"> ```
    展开
  • 老纪程序
    2021-12-03
    style script link 平时还看到有这几个
  • 　Burning
    2020-04-15
    禁止百度转码 <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> 申明页面适配那一端 <meta name="applicable-device" content="mobile">
    展开
  • 杨越
    2020-03-26
    <head> <base href="http://www.w3school.com.cn/i/" /> <base target="_blank" /> </head> <body> <img src="eg_smile.gif" /> <a href="http://www.w3school.com.cn">W3School</a> </body> https://www.w3school.com.cn/tags/tag_base.asp 老师，这个教程里用了两个base标签也没事啊？
    展开
    共 1 条评论