HTML 属性

无序列表 <ul>

<ul> 元素用来将没有数字顺序的一组数据进行分组，并且它们的数字顺序是没有意义的。举个例子，无序列表的列表项通常通过一个字符进行装饰，这些字符的形式可以是点，圆乃至方形。虽然这个字符没有直接在页面上定义，但是可以用与之相关的 CSS 对其进行操作，例如使用 list-style-type 属性。

标签属性	作用
type	用于设置列表的着重号样式。请使用 CSS 的 list-style-type 属性作为代替 已弃用
	- circle：圆-空心 默认值
	- disc：圆-实心
	- square：方块-实心
compact	此布尔属性提示列表是否需要被渲染为更紧凑的样式 已弃用
	- 用户代理决定如何解释这个属性，且并非所有浏览器都支持它
	- 请使用 CSS 属性 line-height 并将它的值设为 80% 来替代该属性

有序列表 <ol>

标签属性	作用
reversed	此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注
start	一个整数值属性，指定了列表编号的起始值
type	设置编号的类型：编号类型适用于整个列表，除非在 <ol> 元素的 <li> 元素中使用不同的 type 属性
	- 1 表示数字编号 默认值
	- a 表示小写英文字母编号
	- A 表示大写英文字母编号
	- i 表示小写罗马数字编号
	- I 表示大写罗马数字编号

列表项元素 <li>

<li> 元素用于表示列表中的项目。它必须包含在一个父元素中：无序列表（<ul>）、有序列表（<ol>）或菜单（<menu>）。在无序列表和菜单中，列表项通常使用项目符号显示。在有序列表中，通常在左侧显示一个升序计数器，如数字或字母。

标签属性	作用
value	这个整数属性指示由 ol 标签定义的列表项当前序数值
type	该字符属性表示编号类型。该类型会覆盖其父元素 ol 标签使用的类型（如果有的话） 已弃用
	- 1 表示数字编号 默认值
	- a 表示小写英文字母编号
	- A 表示大写英文字母编号
	- i 表示小写罗马数字编号
	- I 表示大写罗马数字编号

列表项目 <dl> <dt> <dd>

• <dl> 元素是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据（键 - 值对列表）。它可以包括零组或多组 dom 结构，每组 dom 结构中包含一个或多个 dt 标签，以及一个或多个 dd 标签。
• <dt> 元素用于在一个定义列表中声明一个术语。该元素仅能作为 dl 标签的子元素出现，通常在该元素后面会跟着 dd 标签。然而，多个连续出现的 dt 标签都将由出现在它们后面的第一个 dd 标签定义。
• <dd> 元素用来指明一个描述列表 dl 标签中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 dt 标签。

<dl>
  <dt>术语1</dt>
  <dd>描述1</dd>
  <dt>术语2</dt>
  <dd>描述2-1</dd>
  <dd>描述2-2</dd>
</dl>

超链接：<a>

<a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。<a> 中的内容应该指明链接的目标。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。该元素的属性包含全局属性。

::: tabs == download download 属性——导致浏览器将链接的 URL 视为下载资源。可以使用或不使用 filename 值：

• 如果没有指定值，浏览器会从多个来源决定文件名和扩展名：
  • Content-Disposition HTTP 标头
  • URL 路径 的最后一段
  • 媒体类型。来自 Content-Type 标头、data: URL 的开头、或 blob: URL 的 Blob.type
• filename：决定文件名的值。/ 和 \ 被转化为下划线（_）。文件系统可能会阻止文件名中其他的字符，因此浏览器会在必要时适当调整文件名。

备注：

• download 只在同源 URL 或 blob:、data: 协议起作用。
• 浏览器对待下载的方式因浏览器、用户设置和其他因素而异。在下载开始之前，可能会提示用户，或者自动保存文件，或者自动打开。自动打开要么在外部应用程序中，要么在浏览器本身中。
• 如果 Content-Disposition 标头的信息与 download 属性不同，产生的行为可能不同：
  • 如果文件头指定了一个 filename，它将优先于 download 属性中指定的文件名。
  • 如果标头指定了 inline 的处置方式，Chrome 和 Firefox 会优先考虑该属性并将其视为下载资源。旧的 Firefox 浏览器（版本 82 之前）优先考虑该标头，并将内联显示内容。

== href href 属性——超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议：

• 使用文档片段链接到页面的某一段
• 使用文本片段链接到某一段文字
• 使用媒体片段链接到某个媒体文件
• 使用 tel: URL 链接到一个电话号码
• 使用 mailto: URL 链接到一个邮箱地址
• 如果 web 浏览器不能支持其他 URL 协议，网站可以使用 registerProtocolHandler()

== hreflang hreflang 属性：该属性用于指定所链接到的文档的人类语言。其仅提供建议，并没有内置的功能。其允许的值与全局的 lang 属性一致。 == ping ping 属性：包含一个以空格分隔的 URL 列表，当跟随超链接时，浏览器会发送带有正文 PING 的 POST 请求。通常用于跟踪。 == referrerpolicy referrerpolicy 属性——在跟随链接时，referrer 需要发送多少内容：

• no-referrer：Referer 标头 将不会被发送。
• no-referrer-when-downgrade：如果没有 TLS（HTTPS），Referer 头将不会被发送到源上。
• origin：发送的 referrer 将被限制在其页面的来源：协议、主机和端口。
• origin-when-cross-origin：发送到其他源的 referrer 将只包含协议、主机和端口，而导航到相同的源仍将包括路径
• same-origin：将向同源地址发送 referrer，但跨源请求不包含 referrer 信息。
• strict-origin：当协议安全级别保持不变（HTTPS→HTTPS）时，只将文档的来源作为 referrer 发送，但不要将其发送到安全性较低的目的地（HTTPS→HTTP）。
• strict-origin-when-cross-origin 默认值：在执行同源请求时发送完整的 URL，在协议安全级别保持不变时只发送源（HTTPS→HTTPS），对安全性较低的目的地不发送标头（HTTPS→HTTP）。
• unsafe-url：表示 referrer 将会包含源和路径（但是不包含片段、密码或用户名）。此值是不安全的，因为它可能会将受 TLS 保护的资源的源和路径泄露到不安全的源中。

== rel rel 属性：该属性指定了目标对象到链接对象的关系。 == target target 属性——该属性指定在何处显示链接的 URL，作为浏览上下文的名称（标签、窗口或 iframe）。以下关键词对加载 URL 的位置有特殊含义：

• _self：默认值 当前页面加载。
• _blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。
• _parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同。
• _top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。

备注

在 <a> 元素上使用 target="_blank" 隐式提供了与使用 rel="noopener" 相同的 rel 行为，即不会设置 window.opener。

== type type 属性：该属性指定在一个 MIME 类型链接目标的形式的媒体类型。没有内置的功能。 == charset charset 属性：已弃用 此属性定义链接资源的字符编码。

备注

该属性已作废，不应使用。请在链接的 URL 上使用 HTTP Content-Type 标头。

== name name 属性：已弃用 在定义一个可能的目标位置时曾经是必需的。在 HTML 4.01 规范中，<a> 元素可以同时使用 id 和 name，只要它们有相同的值。

备注

使用全局属性 id 来代替。

== shape shape 属性：已弃用 图像映射（image map）中超链接区域的形状。

备注

使用 <area> 元素来代替图像映射。

== 查看示例

<!-- 1. 链接到绝对地址 -->
<a href="https://www.google.com/">Google</a>

<!-- 2. 链接到相对地址 -->
<a href="//example.com">相对于协议的 URL</a>
<a href="/zh-CN/docs/Web/HTML">相对于源的 URL</a>
<a href="./p">相对于路径的 URL</a>

<!-- 3. 链接到相同页面的元素上 -->
<!-- <a> 元素链接到下面部分 -->
<a href="#Section_further_down">跳转到下方标题</a>
<!-- 要链接到的标题 -->
<h2 id="Section_further_down">更下面的部分</h2>
<!-- 链接到当前页面的顶部 -->
<a href="#">跳转到页面顶部</a>

<!-- 4. 链接到 email 地址 -->
<!-- 要创建在用户的电子邮件程序中打开的链接，让他们发送一个新的信息，请使用 mailto: 协议 -->
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

<!-- 5. 链接到电话号码 -->
<a href="tel:+49.157.0156">+49 157 0156</a>

图像标签：<img>

<img> 元素将一张图像嵌入文档。从技术上讲 img 标签并不会在网页中插入图像，而是从网页上链接图像。img 标签创建的是被引用图像的占位空间。

• src 属性是必须的，它包含了你想嵌入的图片的路径。
• alt 属性包含一条对图像的文本描述，这不是强制性的，但对无障碍而言，它难以置信地有用。

还有很多其他属性，可以实现各种不同的目的：

• 使用 width 和 height 设置图像的固有尺寸（intrinsic size）：这将设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。
• 使用 sizes 和 srcset 设置响应式图像（参见 <picture> 元素和响应式图像教程）。
• Referrer/CORS 控制，保证安全与隐私：详见 crossorigin 和 referrerpolicy 属性。

::: tabs == alt alt 属性：定义了图像的备用文本描述。

如果把这个属性设置为空字符串（alt=""），则表明该图像不是内容的关键部分（这是一种装饰或者一个追踪像素点），非可视化浏览器在渲染的时候可能会忽略它。而且，如果图片加载失败，可视化浏览器会隐藏表示图片损坏的图标。

将图像复制并粘贴为文本，或是将图像的链接保存为浏览器书签时，也会用到此属性。

备注

浏览器并非总是会显示图像。比如：

• 非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器）
• 用户选择不显示图像（比如为了节省带宽，或出于隐私考虑）
• 图像文件无效，或是使用了不支持的格式

在这些情况下，浏览器很可能会将图像替换为图像所属 <img> 元素的 alt 属性所提供的文本。基于上面罗列的原因，建议尽可能地通过 alt 属性提供一些有用的信息。 == crossorigin crossorigin 属性：这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用 CORS 的图像可以在 <canvas> 元素中重复使用，而不会被标记为“污染（tainted）”。

如果未指定 crossorigin 属性，则会发送不启用 CORS 的请求（不会携带 Origin 请求标头），且浏览器会将图像标记为“被污染”并拒绝对图像数据的访问，阻止其在 <canvas> 元素中的使用。

如果指定了 crossorigin 属性，则会发送启用 CORS 的请求（会携带 Origin 请求标头）；但是如果服务器不选择允许源站点对图像数据进行跨源访问（不发送任何 Access-Control-Allow-Origin 响应标头，或发送的 Access-Control-Allow-Origin 标头中不包含源站点），浏览器则会阻止图像的加载，并在开发者工具的控制台中记录 CORS 错误。

允许的值有：

• anonymous：发送忽略凭据的跨源请求（即，不携带 cookie、X.509 证书或 Authorization 请求标头）。
• use-credentials：发送携带凭据的跨源请求（比如 cookie、X.509 证书和 Authorization 请求标头）。如果服务器不选择与源站共享凭据（通过返回 Access-Control-Allow-Credentials: true 响应标头） ，则浏览器会将图像标记为被污染且限制对其图像数据的访问。

如果属性是无效值，浏览器默认将其当做 anonymous 关键字。更多信息，请查看 CORS 属性设置。 == decoding decoding 属性：为浏览器提供图像解码方式上的提示。允许的值：

• sync：同步解码图像，实现与其他内容互斥的原子渲染
• async：异步解码图像，以减少其他内容的渲染延迟
• auto：默认值 不指定解码方式，由浏览器决定哪一种对用户来说是最合适的

== fetchpriority fetchpriority 属性——提供获取图像时要使用的相对的优先级提示。允许的值：

• high：表示其获取优先级相对其他图像要高。
• low：表示其获取优先级相对其他图像要低。
• auto：默认值：表示自动确定其相对其他图像的获取优先级。

== height height 属性：图像的固有高度，以像素为单位。必须是没有单位的整数值。

备注

同时包括 height 和 width 使浏览器在加载图像之前计算图像的长宽比。此长宽比用于保留显示图像所需的空间，减少甚至防止在下载图像并将其绘制到屏幕上时布局的偏移。减少布局偏移是良好用户体验和 Web 性能的主要组成部分。 == ismap ismap 属性：这个布尔属性表示图像是否是服务器端图像映射的一部分。如果是，那么点击图片的精准坐标将会被发送到服务器。

备注

只有在 <img> 元素是一个拥有有效 href 属性的 <a> 元素的后代元素的情况下，这个属性才会被允许使用。 == loading loading 属性——指示浏览器应当如何加载该图像。允许的值：

• eager：默认值 立即加载图像，不管它是否在可视视口（visible viewport）之外
• lazy：延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。

备注

仅在启用 JavaScript 时才会延迟加载。这是一种反跟踪的措施，因为，如果用户代理在禁用脚本的情况下支持延迟加载，网站可以在会话中策略性地放置图像，通过服务器跟踪请求了多少图像以及请求在何时发起，来跟踪用户在整个会话期间的大致滚动位置。 == referrerpolicy referrerpolicy 属性——一个字符串，指示在获取资源时使用的来源地址（referrer）：

• no-referrer：不会发送 Referer 标头
• no-referrer-when-downgrade：若未使用 TLS（HTTPS）导航到源站，则不发送 Referer 标
• origin：发送到源站的来源地址将被限制为：协议、主机和端口
• origin-when-cross-origin：发送到其他来源的来源地址会被限制为协议、主机和端口。同源导航仍将包含路径
• same-origin：仅同源请求发送来源地址，而跨源请求则不包含来源地址信息
• strict-origin：仅在协议安全级别保持不变（HTTPS→HTTPS）的情况下将文档的来源作为来源地址发送。而在目标的安全性降低（HTTPS→HTTP）时则不发送来源地址
• strict-origin-when-cross-origin：默认值 执行同源请求时发送完整的 URL，且仅在协议安全级别保持不变（HTTPS→HTTPS）时发送来源（origin），在目标安全性降低（HTTPS→HTTP）时则不发送来源
• unsafe-url：来源地址包括来源（origin）和路径（path）（但不包括片段、密码或用户名）。这个值是不安全的，因为它将来源和路径从受 TLS 保护的资源泄露到不安全的来源

== sizes sizes 属性——表示资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包括：

• 一个媒体条件。最后一项一定是被忽略的
• 一个资源大小的值

媒体条件描述视口的属性，而不是图像的属性。例如，如果视口不高于 500px，则建议使用 1000px 宽的资源：(max-height: 500px) 1000px。

资源尺寸的值被用来指定图像的预期尺寸。当 srcset 中的资源使用了宽度描述符 w 时，用户代理会使用当前图像大小来选择 srcset 中合适的一个图像 URL。被选中的尺寸影响图像的显示大小（如果没有影响大小的 CSS 样式被应用的话）。如果没有设置 srcset 属性，或者没有属性值，那么 sizes 属性也将不起作用。 == src src 属性：必需 图像的 URL，这个属性对 <img> 元素来说是必需的。在支持 srcset 的浏览器中，src 被当做拥有一个像素密度的描述符 1x 的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在 srcset 或者 srcset 包含 w 描述符中定义了。 == srcset srcset 属性——以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：

• 指向图像的 URL
• 可选地，再加一个空格之后，附加以下的其一：
  • 一个宽度描述符（一个正整数，后面紧跟 w 符号）。该整数宽度除以 sizes 属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和 x 描述符等价的值。
  • 一个像素密度描述符（一个正浮点数，后面紧跟 x 符号）。

如果没有指定源描述符，那它会被指定为默认的 1x。

在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源在相同的 srcset 两个源都是 2x）也是无效的。

用户代理自行决定选择任何可用的来源。这位它们提供了一个很大的选择余地，可以根据用户偏好或带宽条件等因素来进行选择。有关示例，可以参阅响应式图像教程。 == width width 属性：图像的宽度，以像素为单位。必须是没有单位的整数。 == usemap usemap 属性：与元素相关联的图像映射（image map）的部分 URL（以 # 开始的部分）。

备注

如果 <img> 元素是 <a> 或 <button> 元素的后代元素则不能使用这个属性。 == align align 属性：已弃用图像相对于它周围上下文的对齐。使用 float 和/或 vertical-align 这两个 CSS 属性作为代替。允许的值：

• top：等价于 vertical-align: top 或 vertical-align: text-top
• middle：等价于 vertical-align: -moz-middle-with-baseline
• bottom：默认值 等价于 vertical-align: unset 或 vertical-align: initial
• left：等价于 float: left
• right：等价于 float: right

== border border 属性：已弃用 图像周围的边框宽度。使用 CSS 属性 border 代替此废弃属性。 == hspace hspace 属性：已弃用 插入到图像的左侧和右侧的空白像素的值。使用 CSS 属性 margin 代替此废弃属性。 == longdesc longdesc 属性：已弃用 一个指向更详细的图像描述的链接。可能的值是一个 URL 或一个页面上其他元素的 id。 == name name 属性：已弃用 元素的名字。使用 id 属性代替此废弃属性。 == vspace vspace 属性：已弃用 插入到图像的上方和下方的空白像素的数组。使用 CSS 属性 margin 代替此废弃属性。

画布元素 <canvas>

图像映射 <map>

map 标签定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

• area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
• img 中的 usemap 属性可引用 map 中的 id 或 name 属性。

标签属性	作用
id	为 map 标签定义唯一的名称
name	为 image-map 规定的名称

区域元素 <area>

area 标签定义图像映射中的区域

标签属性	作用
alt	定义此区域的替换文本 必需
coords	定义可点击区域（对鼠标敏感的区域）的坐标
shape	定义区域的形状
href	定义此区域的目标 URL
target	规定在何处打开 href 属性指定的目标 URL

代码案例

<!-- 带有可点击区域的图像映射 -->
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href="sun.html" alt="Sun" />
</map>

框架集 <frameset>

已弃用

不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请注意，该特性随时可能无法正常工作。现在不鼓励使用 frame，而是用 <iframe>。

<frameset> 是一个用于包含 <frame> 的 HTML 元素。

标签属性	作用
cols	这个属性指定一个框架集中列的数目和尺寸。单位：pixels、%、*
rows	这个属性指定一个框架集中行的数目和尺寸。单位：pixels、%、*

<html>
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

  <noframes>
  <body>您的浏览器无法处理框架！</body>
  </noframes>
</frameset>
</html>

框架窗口 <frame>

已弃用

不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请注意，该特性随时可能无法正常工作。

<frame> 定义了一个特定区域，另一个 HTML 文档可以在里面展示。帧应该在 <frameset> 中使用。

标签属性	作用
src	规定在框架中显示的文档的 URL
name	规定框架的名称
noresize	规定用户无法调整框架的大小
scrolling	规定是否在框架中显示滚动条
	- yes：用于展示滚动条
	- no：用于不展示滚动条，即使它是必要的
marginheight	定义框架之间的边距有多高
marginwidth	定义框架之间的边距有多宽
frameborder	规定是否显示框架周围的边框
	- 1：默认值 有边框
	- 0：无边框

<!-- 不带边框的双框架页面 -->
<frame src="frame_a.htm" frameborder="0" />

<!-- 第一个框架的上边距和下边距是 50 像素，第二个框架的上边距和下边距是 0 -->
<frame src="/example/html/frame_a.html" marginheight="50" />
<frame src="/example/html/frame_b.html" marginheight="0" />

<!-- 第一个框架的左边距和右边距是 50 像素，第二个框架的左边距和右边距是0  -->
<frame src="frame_a.htm" marginwidth="50" />
<frame src="frame_b.htm" marginwidth="0" />
<!-- 被命名的框架 -->
<frame src="frame_a.htm" name="frame_a" />
<!-- 无法调整大小的框架 -->
<frame src="frame_a.htm" noresize="noresize" />
<!-- 总是显示滚动条的框架 -->
<frame src="frame_a.htm" scrolling="yes" />

内联框架元素 <iframe>

<iframe> 内联框架元素，它能够将另一个 HTML 页面嵌入到当前页面中。

每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录 (session history) 和 DOM 树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。

警告

页面上的每个 <iframe> 都需要增加内存和其他计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的 <iframe>，但是你最好还是先看看这么做会不会导致某些性能问题。

<iframe src="https://example.org" width="400" height="300"> </iframe>

::: tabs == allow allow 属性：用于为 <iframe> 指定其特征策略 == allowfullscreen allowfullscreen 属性：设置为 true 时，可以通过调用 <iframe> 的 requestFullscreen() 方法激活全屏模式。

备注

这是一个历史遗留属性，已经被重新定义为 allow="fullscreen"。 == allowpaymentrequest allowpaymentrequest 属性：设置为 true 时，跨域的 <iframe> 就可以调用 Payment Request API。

备注

这是一个历史遗留属性，已经被重新定义为 allow="payment" == csp csp 属性：实验性 对嵌入的资源配置内容安全策略。查看 HTMLIFrameElement.csp 获取详情。 == height height 属性：以 CSS 像素格式，或像素格式，或百分比格式指定 frame 的高度。默认值为 150。 == importance importance 属性 实验性——表示 <iframe> 的 src 属性指定的资源的加载优先级。允许的值有：

• auto：默认值 不指定优先级。浏览器根据自身情况决定资源的加载顺序
• high：资源的加载优先级较高
• low：资源的加载优先级较低

== name name 属性：用于定位嵌入的浏览上下文的名称。该名称可以用作 <a> 标签与 <form> 标签的 target 属性值，也可以用作 <input> 标签和 <button> 标签的 formtarget 属性值，还可以用作 window.open() 方法的 windowName 参数值。 == referrerpolicy referrerpolicy 属性——表示在获取 iframe 资源时如何发送 referrer 首部：

• no-referrer：不发送 Referer 首部。
• no-referrer-when-downgrade：默认值 向不受 TLS (HTTPS) 保护的 origin 发送请求时，不发送 Referer 首部。
• origin：referrer 首部中仅包含来源页面的源。换言之，仅包含来源页面的 scheme, host, 以及 port。
• origin-when-cross-origin：发起跨域请求时，仅在 referrer 中包含来源页面的源。发起同源请求时，仍然会在 referrer 中包含来源页面在服务器上的路径信息。
• same-origin：对于 same origin（同源）请求，发送 referrer 首部，否则不发送。
• strict-origin：仅当被请求页面和来源页面具有相同的协议安全等级时才发送 referrer 首部（比如从采用 HTTPS 协议的页面请求另一个采用 HTTPS 协议的页面）。如果被请求页面的协议安全等级较低，则不会发送 referrer 首部（比如从采用 HTTPS 协议的页面请求采用 HTTP 协议的页面）。
• strict-origin-when-cross-origin：当发起同源请求时，在 referrer 首部中包含完整的 URL。当被请求页面与来源页面不同源但是有相同协议安全等级时（比如 HTTPS→HTTPS），在 referrer 首部中仅包含来源页面的源。当被请求页面的协议安全等级较低时（比如 HTTPS→HTTP），不发送 referrer 首部。
• unsafe-url：始终在 referrer 首部中包含源以及路径（但不包括 fragment，密码，或用户名）。这个值是不安全的，因为这样做会暴露受 TLS 保护的资源的源和路径信息。

== sandbox sandbox 属性——控制应用于嵌入在 <iframe> 中的内容的限制。该属性的值可以为空以应用所有限制，也可以为空格分隔的标记以解除特定的限制：

• allow-downloads-without-user-activation：实验性 允许在没有征求用户同意的情况下下载文件。
• allow-forms：允许嵌入的浏览上下文提交表单。如果没有使用该关键字，则无法提交表单。
• allow-modals：允许嵌入的浏览上下文打开模态窗口。
• allow-orientation-lock：允许嵌入的浏览上下文锁定屏幕方向（译者注：比如智能手机、平板电脑的水平朝向或垂直朝向）。
• allow-pointer-lock：允许嵌入的浏览上下文使用 Pointer Lock API.
• allow-popups：允许弹窗 (例如 window.open, target="_blank", showModalDialog)。如果没有使用该关键字，相应的功能将自动被禁用。
• allow-popups-to-escape-sandbox：允许沙箱化的文档打开新窗口，并且新窗口不会继承沙箱标记。例如，安全地沙箱化一个广告页面，而不会在广告链接到的新页面中启用相同的限制条件。
• allow-presentation：允许嵌入的浏览上下文开始一个 presentation session。
• allow-same-origin：如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 same-origin policy 同源检查失败。
• allow-scripts：允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。
• allow-storage-access-by-user-activation：实验性 允许嵌入的浏览上下文通过 Storage Access API 使用父级浏览上下文的存储功能。
• allow-top-navigation：允许嵌入的浏览上下文导航（加载）内容到顶级的浏览上下文。
• allow-top-navigation-by-user-activation：允许嵌入的浏览上下文在经过用户允许后导航（加载）内容到顶级的浏览上下文。

备注

当被嵌入的文档与主页面同源时，强烈建议不要同时使用 allow-scripts 和 allow-same-origin。如果同时使用，嵌入的文档就可以通过代码删除 sandbox 属性，如此，就安全性而言还不如不用 sandbox。

• 如果攻击者可以在沙箱化的 iframe 之外展示内容，例如用户在新标签页中打开内联框架，那么沙箱化也就没有意义了。建议把这种内容放置到独立的专用域中，以减小可能的损失。
• 沙箱属性 (sandbox) 在 Internet Explorer 9 及更早的版本上不被支持。

== src src 属性：被嵌套的页面的 URL 地址。使用 about:blank 值可以嵌入一个遵从同源策略的空白页。在 Firefox（version 65 及更高版本）、基于 Chromium 的浏览器、Safari/iOS 中使用代码移除 iframe 的 src 属性（例如通过 Element.removeAttribute() ）会导致 about:blank 被载入 frame。 == srcdoc srcdoc 属性：该属性是一段 HTML 代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 srcdoc 属性，则会渲染 src 属性表示的内容。 == width width 属性：以 CSS 像素格式，或以像素格式，或以百分比格式指定的 frame 的宽度。默认值是 300。 == align align 属性：已弃用 此元素相对于周围元素的对齐方式。 == frameborder frameborder 属性：已弃用 值为 1（默认值）时，显示此框架的边框。值为 0 时移除边框。此属性已不赞成使用，请使用 CSS 属性 border 代替。 == longdesc longdesc 属性：已弃用 表示框架内容的长描述的 URL。由于广泛的误用，该属性对于无图形界面的浏览器不起作用。 == marginheight marginheight 属性：已弃用 这个属性定义了框架的内容距其上边框与下边框的距离，单位是像素。 == marginwidth marginwidth 属性：已弃用 这个属性定义了框架的内容距其左边框和右边框的距离，单位是像素。 == scrolling scrolling 属性已弃用——这个属性控制是否要在框架内显示滚动条，允许的值包括：

• auto：仅当框架的内容超出框架的范围时显示滚动条
• yes：始终显示滚动条
• no：从不显示滚动条

音频 <audio>

<audio> 元素用于在文档中嵌入音频内容。<audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者 <source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。在浏览器不支持该元素时，会显示 <audio></audio> 标签之间的内容作为回退。

标签属性	作用
autoplay="autoplay"	如果出现该属性，则音频在就绪后马上播放
controls="controls"	如果出现该属性，则向用户显示控件，比如播放按钮、暂停、音量等
loop="loop"	如果出现该属性，则每当音频结束时重新开始播放
muted="muted"	规定视频输出应该被静音
preload	规定是否在页面加载后载入音频；如果设置了 autoplay 属性，则忽略该属性 （1）auto：当页面加载后载入整个音频 （2）meta：当页面加载后只载入元数据 （3）none：当页面加载后不载入音频
src="URL"	要播放的音频的 URL

<!-- 多浏览器支持的方案 -->
<audio controls="controls" autoplay="autoplay" loop="loop" muted preload="auto">
  <source src="/i/song.ogg" type="audio/ogg" />
  <source src="/i/song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

视频 <video>

标签属性	作用
src	要播放的视频的 URL
width	设置视频播放器的宽度
height	设置视频播放器的高度
controls	如果出现该属性，则向用户显示控件，比如播放按钮、音量等
autoplay	如果出现该属性，则视频在就绪后马上播放
loop	如果出现该属性，则当媒介文件完成播放后再次开始播放
muted	规定视频的音频输出应该被静音
poster	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
preload	规定是否在页面加载后载入音频；如果设置了 autoplay 属性，则忽略该属性 （1）auto：当页面加载后载入整个音频 （2）meta：当页面加载后只载入元数据 （3）none：当页面加载后不载入音频

<!-- 多浏览器支持的方案 -->
<video
  controls="controls"
  autoplay="autoplay"
  width="320"
  height="240"
  loop="loop"
  muted
  poster="/img/w3school.gif"
  preload="auto"
>
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese" />
  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English" />
  Your browser does not support the video tag.
</video>

字幕 <track>

标签属性	作用
default	规定该轨道是默认的，假如没有选择任何轨道
src	轨道的 URL
label	轨道的标签或标题
srclang	轨道的语言，若 kind 属性值是 "subtitles"，则该属性必需的
kind	表示轨道属于什么文本类型 （1）captions：该轨道定义将在播放器中显示的简短说明 （2）chapters：该轨道定义章节，用于导航媒介资源 （3）descriptions：该轨道定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见 （4）metadata：该轨道定义脚本使用的内容 （5）subtitles：该轨道定义字幕，用于在视频中显示字幕

<track kind="subtitles" default src="chisubs.srt" srclang="zh" />
<track kind="subtitles" src="subschi.srt" srclang="zh" label="Chinese" />
<track kind="subtitles" src="subseng.srt" srclang="en" label="English" />

内置元素 <embed>

embed 可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3 等等。url 为音频或视频文件及其路径，可以是相对路径或绝对路径

标签属性	作用
src	嵌入内容的 URL
type	定义嵌入内容的类型
width	设置嵌入内容的宽度
height	设置嵌入内容的高度

<embed src="helloworld.swf" />
<embed src="tulip.jpg" width="300" height="300" />
<embed src="helloworld.swf" type="application/x-shockwave-flash" />
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

对象元素 <object>

<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>

度量元素 <meter>

meter 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）；例子：磁盘用量、查询结果的相关性等等。

注意：meter 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 progress 标签。

标签属性	作用
value	规定度量的当前值 必需
max	规定范围的最大值
min	规定范围的最小值
high	规定被视作高的值的范围
low	规定被视作低的值的范围
optimum	规定度量的优化值

<meter value="3" min="0" max="10">3/10</meter><br />
<meter value="0.6">60%</meter>
<meter min="0" low="40" high="90" max="100" value="95"></meter>
<meter value="0.3" high="0.9" low="0.1" optimum="0.5"></meter>

进度元素 <progress>

标签属性	作用
max	规定任务一共需要多少工作
value	规定已经完成多少任务

<progress value="22" max="100"></progress><br />
<progress></progress>