：外部资源链接元素

尝试一下

This text will be red as defined in the external stylesheet.

The style attribute can override it, though.

要链接一个外部的样式表，你需要像这样在你的 中包含一个 元素：

html

在这个简单的示例中，使用了 href 属性设置外部资源的路径，并设置 rel 属性的值为 stylesheet。rel 表示“关系”，它可能是 元素其中一个关键的特性——属性值表示 项的链接方式与包含它的文档之间的关系。

这里有一些你经常遇到的其他类型。例如，这里是一个网站图标的链接：

html

还有一些其他的与图标相关的 rel 值，主要用于表示不同移动平台上特殊的图标类型，例如：

html

rel="apple-touch-icon"

sizes="114x114"

href="apple-icon-114.png"

type="image/png" />

sizes 属性表示图标大小，type 属性包含了链接资源的 MIME 类型。这些属性为浏览器选择最合适的图标提供了有用的提示。

你也可以在 media 属性中提供媒体类型或查询；这种资源将只在满足媒体条件的情况下才会加载。例如：

html

href="mobile.css"

rel="stylesheet"

media="screen and (max-width: 600px)" />

也加入了一些新的有意思的性能和安全特性。举例如下：

html

rel="preload"

href="myFont.woff2"

as="font"

type="font/woff2"

crossorigin="anonymous" />

将 rel 设定为 preload，表示浏览器应该预加载该资源（參见 rel="preload" 以获得详细信息）。as 属性表示获取特定的内容类。crossorigin 属性表示该资源是否应该使用一个 CORS 请求来获取。

其他使用说明：

元素可以出现在 元素或 元素中，具体取决于它是否有一个 body-ok 的链接类型。例如，stylesheet 链接类型是 body-ok 的，因此 允许出现在 body 中。然而，这不是一种好的可遵循的实践方式；更合理的方式是，将你的 元素从你的 body 内容中分离出来，将其放在 中。

当使用 为网站创建一个 favicon 时，你的网站使用内容安全策略（CSP）来增强它的安全性，这种策略适用于 favicon。如果你遇到 favicon 未加载的问题，验证 Content-Security-Policy 标头的 img-src 指令没有在阻止对它的访问。

HTML 和 XHTML 规范为 元素定义了一些事件处理器，但是对于它们的使用方法不明确。

在 XHTML 1.0 下，像 这样的空元素需要一个尾斜杠：。

WebTV 支持 rel 使用 next 值，用于在一个文档系列中预加载下一页。

属性

这个元素包含使用全局属性。

as

当在 元素上设置了 rel="preload" 时，该属性为必填属性；当设置了 rel="modulepreload"时，该属性为可选属性，否则不应使用。它指定了 正在加载的内容类型，这对于匹配请求、应用正确的内容安全策略和设置正确的 Accept 请求标头都是必要的。此外，rel="preload" 将其用作请求优先级的信号。下表列出了该属性的有效值及其适用的元素或资源。

值

可应用于

audio

document