mdn · jasonren0403 · Dec 2, 2024 · Nov 22, 2024 · Nov 26, 2024 · Nov 26, 2024
@@ -0,0 +1,26 @@
+---
+title: HTMLLinkElement：as 属性
+slug: Web/API/HTMLLinkElement/as
+l10n:
+  sourceCommit: c30827dea447e33d0d875cb3e7e1632b56148e5f
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLLinkElement")}} 接口的 **`as`** 属性返回一个字符串，该字符串表示将由链接元素预加载的内容类型。
+
+当链接元素的 [`rel="preload"`](/zh-CN/docs/Web/HTML/Attributes/rel/preload) 时，`as` 属性必须有一个值，否则资源将不会被获取。它也可以应用于 [`rel="modulepreload"`](/zh-CN/docs/Web/HTML/Attributes/rel/preload) 的链接元素，但如果省略，将默认值为 `script`。对于其他类型的链接元素，如 `rel="prefetch"`，则不应设置此属性。
+
+此属性反映 HTML [`<link>`](/zh-CN/docs/Web/HTML/Element/link) 元素的 [`as` 属性](/zh-CN/docs/Web/HTML/Element/link#as) 的值。
+
+## 值
+
+一个字符串，允许以下值：`"audio"`、`"document"`、`"embed"`、`"fetch"`、`"font"`、`"image"`、`"object"`、`"script"`、`"style"`、`"track"`、`"video"`、`"worker"`。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
@@ -0,0 +1,48 @@
+---
+title: HTMLLinkElement：blocking 属性
+slug: Web/API/HTMLLinkElement/blocking
+l10n:
+  sourceCommit: 7cd4706990ab95794415aee05ba0a9662e742a17
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLLinkElement")}} 接口的 **`blocking`** 属性是一个字符串，表示在获取外部资源时应阻塞某些操作。
+
+它反映 {{HTMLElement("link")}} 元素的 `blocking` 属性。
+
+## 值
+
+一个字符串，必须是以下列出的用空格分隔的阻塞标记列表，这些标记指示应被阻塞的操作：
+
+- `render`
+  - : 屏幕上的内容渲染被阻塞。
+
+## 示例
+
+```html
+<link
+  id="el"
+  rel="stylesheet"
+  href="/example.css"
+  blocking="render"
+  crossorigin />
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.blocking); // 输出：“render”
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLScriptElement.blocking")}}
+- {{domxref("HTMLStyleElement.blocking")}}
@@ -0,0 +1,37 @@
+---
+title: HTMLLinkElement：crossOrigin 属性
+slug: Web/API/HTMLLinkElement/crossOrigin
+l10n:
+  sourceCommit: 0a9c10fc67901972221dc7b3d006334fbfa73dce
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLLinkElement")}} 接口的 **`crossOrigin`** 属性指定了在检索资源时要使用的跨源资源共享 {{Glossary("CORS")}} 设置。
+
+## 值
+
+一个指定在获取资源时要使用的 CORS 模式的关键词字符串。可能的值包括：
+
+- `anonymous` 或空字符串 (`""`)
+  - : 由 {{domxref("HTMLLinkElement")}} 发送的请求将使用 `cors` {{domxref("Request.mode", "mode", "", "nocode")}} 模式和 `same-origin` {{domxref("Request.credentials", "credentials", "", "nocode")}} 模式。这意味着如果资源是从加载文档的相同源获取的，则将启用 CORS 并发送凭据。
+- `use-credentials`
+  - : 由 {{domxref("HTMLLinkElement")}} 发送的请求将使用 `cors` {{domxref("Request.mode", "mode", "", "nocode")}} 模式和 `include` {{domxref("Request.credentials", "credentials", "", "nocode")}} 模式。该元素请求的所有资源都将使用 CORS，无论获取来自哪个域。
+
+如果为 `crossOrigin` 属性指定了任何其他值，则它与指定为 `anonymous` 的效果相同。
+
+如果未指定 `crossOrigin` 属性，则资源将在没有 CORS 的情况下被获取（即使用 `no-cors` {{domxref("Request.mode", "mode", "", "nocode")}} 模式和 `same-origin` {{domxref("Request.credentials", "credentials", "", "nocode")}} 模式）。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLImageElement.crossOrigin")}}
+- {{domxref("HTMLMediaElement.crossOrigin")}}
+- {{domxref("HTMLScriptElement.crossOrigin")}}
@@ -0,0 +1,52 @@
+---
+title: HTMLLinkElement：disabled 属性
+slug: Web/API/HTMLLinkElement/disabled
+l10n:
+  sourceCommit: 3b5e12e7abd1204735c35aa760294c907e4159cb
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLLinkElement")}} 接口的 **`disabled`** 属性是一个布尔值，表示链接是否被禁用。该属性仅在样式表链接（`rel` 属性设置为 `stylesheet`）时有效。
+
+如果在加载 HTML 时指定了 `disabled` 属性，则在页面加载期间不会加载该样式表。相反，只有当 `disabled` 属性被设置为 `false` 或被移除时，样式表才会被加载。使用 JavaScript 设置 `disabled` 属性会导致样式表从文档的 {{domxref("Document.styleSheets")}} 列表中移除。
+
+它反映 {{HTMLElement("link")}} 元素的 `disabled` 属性。
+
+## 值
+
+一个布尔值。
+
+## 示例
+
+```html
+<link
+  id="el"
+  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+  rel="stylesheet"
+  disabled
+  crossorigin="anonymous" />
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.disabled); // 输出：true
+
+// 设置 disabled 属性为 true 以启动样式表
+
+el.disabled = false;
+console.log(el.disabled); // 输出：false
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLScriptElement.integrity")}}
+- [Subresource Integrity](/zh-CN/docs/Web/Security/Subresource_Integrity)
@@ -0,0 +1,54 @@
+---
+title: HTMLLinkElement：fetchPriority 属性
+slug: Web/API/HTMLLinkElement/fetchPriority
+l10n:
+  sourceCommit: 0598721ab3f672c66a8357d9e6b27ec8644a2b21
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLLinkElement")}} 接口的 **`fetchPriority`** 属性为浏览器提供了一个提示，指示它应如何相对于同类型的其他资源来优先获取特定资源。它反映了对应 {{htmlelement("link")}} 元素的 [`fetchpriority`](/zh-CN/docs/Web/HTML/Element/link#fetchpriority) 属性。
+
+该属性允许开发人员向浏览器发出信号，表明在加载过程中早期获取特定资源对用户体验的影响，这种影响可能比浏览器在分配内部优先级时能够合理推断出的影响更大或更小，特别是在预加载资源时。
+这反过来又使浏览器能够提高或降低优先级，并可能使资源比原本更早或更晚地加载。应谨慎使用该属性，因为过度或错误的优先级设置可能会降低性能。
+
+获取优先级可用于补充[预加载](/zh-CN/docs/Web/HTML/Attributes/rel/preload)功能，允许开发人员提高某些资源的优先级，使其优先于默认以较高优先级预加载但影响较小的资源。例如，如果某张特定图片对网站的 {{glossary("Largest Contentful Paint", "LCP（最大内容绘制）")}}有显著贡献，那么可以将其设置为预加载，并赋予高获取优先级。
+
+请注意，任何获取操作的内部优先级以及 `fetchPriority` 对优先级的影响都完全取决于浏览器。
+
+## 值
+
+一个表示优先级提示的字符串。可能的值包括：
+
+- `high`
+  - : 相对于同类型资源和内部优先级划分，以高优先级获取该资源。
+- `low`
+  - : 相对于同类型资源和内部优先级划分，以低优先级获取该资源。
+- `auto`
+  - : 不为获取优先级设置偏好。这是默认值。如果未设置值或设置了无效值，则使用此选项。
+
+## 示例
+
+```js
+const preloadLink = document.createElement("link");
+preloadLink.href = "my-image.jpg";
+preloadLink.rel = "preload";
+preloadLink.as = "image";
+preloadLink.fetchPriority = "high";
+document.head.appendChild(preloadLink);
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLImageElement.fetchPriority")}}
+- {{domxref("HTMLScriptElement.fetchPriority")}}
+- HTTP {{httpheader("Link")}} header
+- [Optimize resource loading with the Fetch Priority API](https://web.dev/articles/fetch-priority?hl=en#browser_priority_and_fetchpriority) for information about how this API affects priorities on Chrome.
@@ -0,0 +1,43 @@
+---
+title: HTMLLinkElement：href 属性
+slug: Web/API/HTMLLinkElement/href
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLLinkElement")}} 接口的 **`href`** 属性包含一个字符串，该字符串是与链接相关联的 URL。
+
+它反映 {{HTMLElement("link")}} 元素的 `href` 属性。如果元素没有 `href` 属性，则此属性的值为空字符串（`""`）。
+
+> [!NOTE]
+> 每个 `<link>` 元素都必须包含 `href` 属性或 [`imagesrcset`](/zh-CN/docs/Web/HTML/Element/link#imagesrcset) 属性中的一个或两个。这意味着，对于每个有效的 `<link>`，此属性或 {{domxref("HTMLLinkElement.imageSrcset", "imageSrcset")}} 都不会为空。
+
+## 值
+
+包含 URL 的字符串，如果没有 `href` 元素，则为空字符串（`""`）。
+
+## 示例
+
+```html
+<link rel="stylesheet" href="example.css" />
+```
+
+```js
+const link = document.getElementsByTag("link")[0];
+console.log(link.href); // 'example.css'
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLLinkElement.imageSrcset")}} 属性
+- {{domxref("HTMLAnchorElement.href")}} 属性
@@ -0,0 +1,58 @@
+---
+title: HTMLLinkElement：hreflang 属性
+slug: Web/API/HTMLLinkElement/hreflang
+l10n:
+  sourceCommit: 1a790d83cbfcd76ac05a1b18697597f8d110d2cf
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLLinkElement")}} 接口的 **`hreflang`** 属性用于指示页面的语言和地理定位。浏览器可以利用这一提示来选择更合适的页面或提高{{Glossary("SEO", "搜索引擎优化")}}。
+
+它反映 {{HTMLElement("link")}} 元素的 `hreflang` 属性，如果没有 `hreflang` 属性，则该属性的值为空字符串（`""`）。
+
+## 值
+
+包含语言标签的字符串，如果没有 `hreflang` 属性，则为空字符串（`""`）。
+
+## 示例
+
+```html
+<link
+  rel="alternate"
+  href="www.example.com/fr/html"
+  hreflang="fr"
+  type="text/html"
+  title="French HTML" />
+<p class="tag"></p>
+```
+
+```css
+.tag {
+  margin-left: 20px;
+  font: bold;
+  font-size: 24px;
+}
+```
+
+```js
+const myLink = document.querySelector("link");
+const pTag = document.querySelector(".tag");
+pTag.textContent = myLink.hreflang;
+```
+
+### 结果
+
+{{EmbedLiveSample("示例",100,100)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLAnchorElement.hreflang")}} 属性