重学 HTML —— 元数据

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

在 html 顶部我们会定义一些页面的元信息，这部分通常会放在 head 标签中（上一篇验证过，不放在 head 标签中也可以，但是通常不要这样做），这些元数据内容是不会被渲染到页面上的，它们可以用来描述页面的相关信息，包括样式、脚本及数据等，除了 head 标签本身，与元数据相关的标签有下面几个：

base

base 标签用来指定相对路径的基准 url，一个页面只能有一个 base，设置多个后面的会被忽略。

举个例子，页面中有一个 a 标签，href 值是相对路径 /page，如果不指定 base，那么点击 a 访问的是相对当前页面的 page，一旦指定了 base 路径就变成了相对 base 的 href 值。

base 还有另一个属性 target，这个属性和 a 标签的 target 一样指定打开方式，不过它指定的是整页面所有内容的打开方式。target 有四个取值：默认值是 _self，在当前页面打开。我们比较熟悉的是 _blank，在新页面打开。还有两个不常用的值 _parent 和 _top，当没有发生页面嵌套时这两个属性没有效果，当发生嵌套时前者表示在父页面打开，后者表示在最顶层打开。

link

link 可以用来饮用外部资源，最常用法是使用 link 引用来自外部的 css 文件资源，link 是不受浏览器同源策略限制的（即允许访问跨域资源），因此我们可以加载部署在 CDN 域名下的外部 css 资源。

除了 css，link 还可以用来加载其他类型资源，这是由它的 rel 属性指定的，link 上两个最终重要的属：href 指定资源链接，rel 指定资源类型，rel 添加多个值时使用空格分隔。

rel 取值有很多，除去已经废弃的取值外主要有下面几个：

• stylesheet：这个是最常见的，加载 css 资源，当不设置 rel 时浏览器也会优先按照 css 处理。
• shortlink：指定短链接，方便用于分享。
• search：可以在浏览器上添加快捷搜索工具（只有 firefox 和 IE 支持）。
• prev、next：在分页关系中指定上一页、下一页内容，方便 SEO（类似作用的还有 first、last，已经废弃）。
• canonical：标记相同资源，在 SEO 处理时会用到。
• pingback：这是用来处理引用的一种机制，页面 B 引用页面 A 时，如果 A 添加了 pingback，B 会向此 pingback 链接发通知，pingback 在 WordPress 中有用到，该兴趣可以详细了解。
• manifest：添加 webmanifest 类型文件，如果开发过 PWA 对此应该很熟悉，这里不额外展开介绍了。
• icon：这个也比较常用，添加 favicon 图标，在浏览器 tab 上会显示在 title 左侧。
• help：链接帮助资源。
• license：链接到 license 资源内容。
• author：链接到作者页面。
• alternate：意思是替换，可以结合媒体查询做一些事情，这里有一个一键换肤的例子可以参考。
• preload：在页面渲染之前预加载资源，如果预加载资源 3 秒没有使用浏览器会出现警告。
• prefetch：预获取资源，与 preload 的区别在于 prefetch 是在空闲时加载，可以用来加载其他页面所需资源。
• prerender：预渲染，在 prefetch 基础上进一步处理。
• preconnect：提前连接不下载，适用场景较少，更多时候还是需要 preload。
• modulepreload：预加载 js module，由于
• dns-prefetch：DNS 域解析，可以提前查找 DNS。

上面简单介绍了一些 rel 的含义，其中很大一部分使用场景较少，更多时候根据需要进行查询即可。

除了 rel 和 href 之外，link 还有一些其他属性：

• as：用于 preload 或 prefetch 时指定内容的类型，详细类型可以参考文档。

• crossorigin：请求时添加 cors 请求头，其取值 anonymous（不带认证信息）和 use-credentials（带认证信息）。

• disabled：仅对于 stylesheet 类型，禁用样式表。

• hreflang：指定 href 的语言。

• importance：在 preload 或 prefetch 时自定优先级。

• integrity：用来校验资源完整性，这个属性在对安全要求比较高的场景下还是很有必要的，详细介绍可以了解一下 SRI。

• media：值为媒体查询，添加后会在符合媒体查询条件下应用资源。

• sizes：指定 favicon 的大小。

• referrerpolicy：指定获取资源时的 Referer 信息。

• title：link 标签添加 title 后会影响样式加载，这个在前面的换肤例子中有介绍，这里引用一下那篇文章的内容：

  • 没有 title属性，rel 属性值仅仅是stylesheet的<link>无论如何都会加载并渲染。
  • 有 title 属性，rel 属性值仅仅是stylesheet的<link>作为默认样式CSS文件加载并渲染。
  • 有 title 属性，rel 属性值同时包含alternate stylesheet的<link>作为备选样式CSS文件加载，默认不渲染。

  这里有个非常有趣的特性，那就是rel="stylesheet"的<link>如果有title属性并有值，性质上就变成了一个可以控制其渲染或者不渲染的特殊元素了。

• type：指定 mime 类型。

以上算是 link 标签的一个比较详细的功能介绍，其中很多内容使用的并不多，也有一些与 SEO 或者内容安全 SRI 相关，这里作为储备知识可以在有需要的时候适当选用。还有一些性能优化相关的 preload、prefetch、dns-prefetch 等也可以应用到自己的网站中。

style

style 标签大家应该都很熟悉了，里面写 CSS 代码，用来给页面添加样式。

这里涉及一个重要的知识点：为什么我们把 css 样式写在页面上方而 js 脚本写在页面下方？

这与浏览器的页面解析和渲染逻辑有关，不考虑异步内容，浏览器在解析 HTML 是是从上到下的，而 CSS 会影响页面布局，提前加载好 CSS 再渲染 DOM 内容可以减少布局计算次数，页面不会发生更多重绘，提升加载效率。

title

title 描述页面标题，这个大家都比较熟悉了，标题信息会显示在浏览器 tab 上，此外一些页面分享等需要使用页面名称的地方也都会用到 title 信息，title 只能有一个，设置多个后面的也不会生效，不设置 title 会显示无标题或者 url 信息（取决于浏览器实现）。title 信息对 SEO 和 a11y 都有重要的意义，通常情况我们都需要为网站添加标题。

meta

页面的其他元数据都是通过 meta 来设置的，因此 meta 的能力很强，先看一下 meta 的属性：

• charset：这个很常见，指定字符编码，通常使用 utf-8。

• content：meta 内容，这里要注意一下，meta 是以 key-value 的形式设置的，content 中是值内容，对应的 key 是通过 http-equiv 或 name 属性来设置的。

• http-equiv：它的几个值都和 http header 有关，有下面几个：

  • content-security-policy：这个还是指定内容安全策略（CSP）信息。
  • content-type：指定 mime 类型，由于在 html 文件中，通常是 text/html; charset=utf-8。
  • default-style：指定默认样式组名，在添加多组可选样式时会使用到。
  • x-ua-compatible：设置 ua 兼容，通常处理 ie 会用到，具体介绍可以参考这个文章。
  • refresh：设置自动刷新时间或重定向时间及 url。

  网上搜到的文章中还有提到 expires，pragma、cache-control 等，但是这几个亲测无效，MDN 文档上也没有写，不知道这些文章的来源是什么，可能旧版本曾经支持过吧。

• name：name 的值相对多一些：

  • application-name：应用名，与 title 有一些区别，这个是整个应用的名字，与具体哪个页面没关系，当然对于简单页面 MDN 上面的建议是不需要设置 application-name。
  • author：作者名。
  • keywords：内容关键词，对 SEO 很有用。
  • description：页面描述信息，对 SEO 很有用。
  • referrer：控制发送请求的 referrer 请求头信息。
  • generator：指定该网站的制作工具。
  • color-scheme：指定颜色是浅色模式还是深色模式，这个现在使用的越来越多。
  • viewport：设置 viewport 大小，开发移动端页面一定见过这个。
  • creator、publisher：指定文档创建者、发布者。
  • googlebot、robots：指定搜索引擎爬取策略，区别在于前者是 google 专用。

以上是一些标准的 meta 定义，还有很多非标准的 meta，这一部分与各个浏览器定义的实现有关，没有办法全部列出，主要是在移动端开发中使用。

这里可以查看一些 IOS 的 meta 定义：developer.apple.com/library/arc…

还有一些网上可以找到的，我没使用过，不确定是否有效，有需要可以尝试一下：

zhwangart.com/2019/04/26/…

本篇元数据相关的内容就这么多，其中涉及到 SEO、CSP 等关联的知识点这里没有展开，有机会在其他文章详细介绍。