❕HTML 元数据

描述数据的数据

在 HTML 中，HTML 文档是数据，而它里面的 <head> 元素包含着描述这份文档的数据，比如作者、摘要。所以我们常说，<head> 元素包含着元数据，即关于文档的机器可读的信息（machine-readable information）。

属于元数据内容的 HTML 元素有 <meta>, <title>, <base>, <link>, <style>, <script> 和 <noscript>。它们有的是修改文档的显示方式和行为，有的是设置到其它文档的链接，有的是传达了其它信息。

其中，<meta>, <base>, <link> 属于空元素（empty element）。空元素是 HTML, SVG 和 MathML 里不能带有任何子节点（包括嵌套元素和文本节点）的元素。在 HTML 中，空元素通常是不带结束标签的，也不自闭合，就直接写一个纯粹的开始标签就行。如下：

<meta charset="utf-8">
<base href="https://www.example.com">
<link href="main.css" rel="stylesheet">

其余 4 个都是由一个开始标签和一个结束标签组成的。

1. `<meta>`

<meta> 元素表示其它元相关（meta-related）元素没法表示的元数据，它能提供以下类型的元数据：

如果设置了 charset 属性，则 <meta> 元素是一个 charset 声明，将给出文档的字符编码
如果设置了 name 属性，则 <meta> 元素提供文档级的元数据，将应用于整个页面
如果设置了 http-equiv 属性，则 <meta> 元素是一个 pragma 指令，将提供类似 HTTP 头的信息
如果设置了 itemprop 属性，则 <meta> 元素提供用户定义的元数据

<meta charset="utf-8">
<meta name="theme-color" content="#4F4F4F">
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

<meta> 元素可以有全局属性。其中：

name 属性：在 <meta> 元素上有特定含义，详见下方
itemprop 属性：如果 <meta> 元素上已经有了 charset, name 或 http-equiv 属性，那就不能再设 itemprop 属性了

下面介绍 4 个比较重要的属性。

1.1 `charset` 属性

这个属性声明文档的字符编码。如果存在该属性，其值必须是字符串“utf-8”（不区分大小写），因为 UTF-8 是 HTML5 文档的唯一有效编码。声明字符编码的 <meta> 元素必须完全在文档的前 1024 个字节内。

<meta charset="utf-8">

1.2 `name` 属性

name 属性和 content 属性一起使用，以 name-value 对的形式提供文档元数据。name 给出元数据的名称，content 给出元数据的值。

<meta name="description" content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.">
<meta name="theme-color" content="#4F4F4F">
<meta name="application-name" content="Google 翻译">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

1.2.1 HTML 标准

name 名称

content 值

说明

application-name

简单的网页不应该定义此项不同于 <title> 元素

author generator

作者生成页面的软件

description keywords

简短而准确的总结. eg.用于书签的默认描述关键词, 以逗号分隔

referrer

no-referrer

控制 HTTP 请求头的 Referer 字段. no-referrer 表示不发

origin

发 origin

no-referrer-when-downgrade

若目标至少与当前页一样安全时发完整的 URL, ie. HTTP(S) → HTTPS. 若目标不安全时则不发, ie. HTTPS → HTTP. 这是浏览器的默认行为

strict-origin

若目标至少与当前页一样安全时发 origin. 若目标不安全时不发.

unsafe-URL

为同源和跨源请求发完整 URL (去除参数)

origin-when-cross-origin

若同源则发完整 URL (去除参数), 否则只发 origin

same-origin

若同源则发完整 URL (去除参数), 跨域请求则不发

strict-origin-when-cross-origin

若同源则发完整 URL (去除参数). 若目标至少与当前页一样安全时发 origin. 否则不发

theme-color

color-scheme

normal [light | dark]+ only light

指定文档兼容的一种或多种颜色方案, eg.浅/深色模式的兼容性和优先顺序

origin = scheme + hostname + port 或 origin = protocol + domain + port

1.2.2 W3C 标准

name 名称

content 值

说明

viewport

width height（没浏览器用）

正整数或以下字符串 device-width,

device-height

initial-scale maximum-scale minimum-scale

正数 [0.0, 10.0]

user-scalable

yes 或 no

viewport-fit

auto, contain, cover

1.2.3 尚未标准化的

name 名称

content 值

说明

creator

创建者 eg.组织/机构可使用多个 <meta creator="xxx">

publisher

发布者

robots

index（默认） noindex follow（默认） nofollow

所有浏览器

noarchive nosnippet

all ~ index, follow

none ~ noindex, nofollow

noimageindex

Google

nocache ~ noarchive

Bing

googlebot

robots 的同义词

1.3 `http-equiv` 属性

http-equiv 属性定义一个 pragma 指令。

该属性之所以被命名为 http-equiv 是因为所有允许的值都是特定的 HTTP 头。

equiv，equivalent，相等的

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="x-dns-prefetch-control" content="on">

1.3.1 `http-equiv = "content-security-policy"`

content policy 可指定允许的服务 origins 和脚本端点，以防止跨站点脚本攻击。

content 属性的值

说明

script-src

script-src-elem

script-src-attr style-src

style-src-elem

style-src-attr img-src, media-src, font-src frame-src, worker-src, child-src prefetch-src, manifest-src connect-src, default-src object-src（已废弃）

Fetch 指令特定资源类型的加载位置

base-uri sandbox

Document 指令策略应用的文档/worker的属性

form-action navigate-to frame-ancestors

Navigation 指令

report-to report-uri（即将废弃）

Reporting 指令

upgrade-insecure-requests（HTTP→HTTPS） trusted-types require-trusted-types-for require-sri-for

其它指令

referrer（用 Referrer-Policy 替代） block-all-mixed-content plugin-types

已废弃

1.3.2 `http-equiv = "content-type"`

若指定了 content 属性，则内容必须含有字符串 "text/html; charset=utf-8"，它声明了文档的 MIME type 和字符编码。

1.3.3 `http-equiv = "x-ua-compatible"`

若指定了 content 属性，则内容必须含有字符串 "IE=edge"。

1.3.4 `http-equiv = "refresh"`

表示页面重新加载的秒数，即页面重定向之前的秒数。

1.3.5 `http-equiv = "default-style"`

暂无。

1.4 `content` 属性

这个属性包含着 name 或 http-equiv 属性的值，取决于上下文。

2. `<base>`

<base> 元素指定文档中所有相对 URL 的 base URL。

我们可以通过 Node 的 baseURI 属性访问到页面的 base URL。如果没有设置 <base> 元素，那么 baseURI 的默认值就是 location.href。

该元素可以有全局属性。此外：

属性

值

说明

href

绝对/相对 URL

相对 URL 的 base URL

target

可选的 keywords： _self _blank _parent _top

keyword 或 author-defined 当 <a>, <area>, <form> 元素没有显式指定 target 属性时

说明：

如果指定了 href 或 target 属性，则该元素必须位于其它具有 URL 属性值的元素之前，比如 <link href="">
一个文档只能有一个 <base> 元素，如果写了多个，那只取第一个 href 和第一个 target 属性
文档中的锚点 <a href="#xxx"> 是基于 <base> 解析的（会触发一个 HTTP 请求）

3. `<link>`

<link> 元素可指定外部资源，比如最常用的样式表、站点图标（favicon/主屏幕/移动端的应用程序）等。

该元素可以有全局属性。其中，title 属性有特殊的语义，当在 <link rel="stylesheet"> 上使用时表示定义了默认或备用样式表/替代样式表（但它的浏览器兼容性不好，建议同功能的使用 CSS 媒体查询）。

还可以有以下属性。

3.1 标准化属性

3.1.1 `rel` 属性

该属性指明元素和当前文档的 relationship（关系），值是以空格分隔的 link type。

rel 属性可以用在 <link>, <a>, <area>, <form>等元素上。

当在 <link> 中使用时，rel 属性的值可以是：

stylesheet, icon, manifest, license
prefetch, preconnect, preload, prerender, dns-prefetch, modulepreload
shortlink 短链接
search 相关搜索页
author 包含联系方式的页面
help 帮助页
pingback 网页的评论/引用页
canonical 规范链接, SEO
next 下一个资源
prev 上一个资源
alternate 替代样式表
已废弃的
- archives
- first
- last
- index
- sidebar
- up

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)">

<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" href="apple-icon-114.png" type="image/png" sizes="114x114">
<link rel="apple-touch-icon-precomposed" href="favicon72.png" type="image/png" sizes="72x72">

<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

3.1.2 `type` 属性

该属性指明资源的 MIME 类型，也称内容类型或媒体类型。

Multipurpose Internet Mail Extensions

格式是 type/subtype, type/subtype;parameter=value。

其中 type 的值可以是 text, application, image, audio, video, font, example, model。

<link rel="apple-touch-icon-precomposed" href="apple-icon-114.png" type="image/png" sizes="114x114">
<link rel="apple-touch-icon-precomposed" href="favicon72.png" type="image/png" sizes="72x72">
<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

3.1.3 其余属性

属性

值

说明

href

hreflang

href 的语言

media

媒体类型/查询

sizes

仅当 rel 中包含 icon 时

disabled

布尔属性（是否存在）

仅对 rel="stylesheet"

imagesizes imagesrcset

仅对 rel="preload" as="image"

as

script, style, font image, video, audio, track object, embed, document worker fetch

仅对 rel="preload|prefetch" 指定了 <link> 正在加载的内容类型

crossorigin

anonymous use-credentials

跨域

integrity

包含内联元数据 eg.base64 编码的文件

referrerpolicy

no-referrer origin unsafe-url no-referrer-when-downgrade origin-when-cross-origin

当获取资源时用哪个 referrer

prefetch

标识下次导航可能需要的资源

3.2 非标准化属性

分类

属性

非标准（不推荐）

methods target

已废弃

charset rev

4. `<title>`

<title> 元素定义文档的标题，显示在浏览器标题栏上或页面选项卡中。

它只包含文本，如果内部有标签则会被忽略。

该元素只包含全局属性。

4.1 标题和 SEO

页面的标题内容在一定程度上会影响搜索引擎算法对于本页面的搜索排序。

一般来说，较长的描述性标题比短标题或通用标题表现更好。此外，好的标题也能在搜索结果页面更好地吸引用户的注意。

SEO, Search Engine Optimization

4.2 注意事项

关于标题的一些建议和注意事项：

使用描述性短语或 term-definition 对，尽量避免使用一个或者两个词作为标题
搜索引擎通常会显示页面标题的前 55-60 个字符，所以尽量不要让标题过长或者确保重要的部分在最前面
避免使用单词列表作为标题，因为算法会降低页面在搜索结果中的位置。
尽量确保标题的独特性，因为重复/接近的标题有可能会导致搜索结果不准确。

5. `<style>`

该元素可以有全局属性，此外还可以有以下属性：

属性

说明

media title

同 <link> 元素的

nonce

加密随机数（只使用一次）

type（已废弃） scoped（已废弃）

6. `<script>`

该元素可以有全局属性，此外还可以有以下属性：

属性

值

说明

type

无（忽略） JavaScript MIME type

HTML5 规范建议直接忽略该属性, 默认就是 JavaScript

module

模块

其它值

会被当成数据块

src

async defer nomodule

布尔属性

referrerpolicy crossorigin integrity nonce

Referer header 跨域, window.onerror 子资源完整性, 内联元数据内容安全策略, 随机加密数字

charset（已废弃） language（已废弃）

<script src="javascript.js"></script>

<script>
  console.log("Hello World!");
</script>

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

<!-- 嵌入数据（服务器生成）-->
<script id="data" type="application/json">{"userId":111, "userName":"Li" "memberSince":"2000-01-01T00:00:00.000Z"}</script>

7. `<noscript>`

<noscript> 定义的 HTML 内容会显示在页面上，当脚本的 type 不支持时，或者当浏览器禁用脚本功能时。

该元素只能有全局属性。

总结

这部分介绍了 HTML 元数据，共有 7 个 HTML 元素，内容包括：

<meta> 内容很多
- <meta charset="">
- <meta name="" content="">
- <meta http-equiv="" content="">
- <meta itemprop=""
<base>
- href, target
<link> 外部资源
- type, rel, href, hreflang
- media
- sizes, disabled, imagesizes, imagesrcset, as
- crossorigin, integrity, referrerpolicy, prefetch
<title>（与 SEO）
<style>
- media, title
- nonce
<script> 脚本/亦可内联
- src, type
- async, defer, nomodule
- crossorigin, integrity, referrerpolicy, nonce
<noscript>

Previous<iframe>NextHTML 属性一览表

Last updated 1 year ago

1. <meta>

1.1 charset 属性

1.2 name 属性

1.2.1 HTML 标准

1.2.2 W3C 标准

1.2.3 尚未标准化的

1.3 http-equiv 属性

1.3.1 http-equiv = "content-security-policy"

1.3.2 http-equiv = "content-type"

1.3.3 http-equiv = "x-ua-compatible"

1.3.4 http-equiv = "refresh"

1.3.5 http-equiv = "default-style"

1.4 content 属性

2. <base>

3. <link>

3.1 标准化属性

3.1.1 rel 属性

3.1.2 type 属性

3.1.3 其余属性

3.2 非标准化属性

4. <title>

4.1 标题和 SEO

4.2 注意事项

5. <style>

6. <script>

7. <noscript>

总结

1. `<meta>`

1.1 `charset` 属性

1.2 `name` 属性

1.3 `http-equiv` 属性

1.3.1 `http-equiv = "content-security-policy"`

1.3.2 `http-equiv = "content-type"`

1.3.3 `http-equiv = "x-ua-compatible"`

1.3.4 `http-equiv = "refresh"`

1.3.5 `http-equiv = "default-style"`

1.4 `content` 属性

2. `<base>`

3. `<link>`

3.1.1 `rel` 属性

3.1.2 `type` 属性

4. `<title>`

5. `<style>`

6. `<script>`

7. `<noscript>`