-
Notifications
You must be signed in to change notification settings - Fork 8.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[zh-cn]: create docs for HTMLAnchorElement (#24678)
Co-authored-by: A1lo <[email protected]>
- Loading branch information
Showing
23 changed files
with
745 additions
and
100 deletions.
There are no files selected for viewing
74 changes: 74 additions & 0 deletions
74
files/zh-cn/web/api/htmlanchorelement/attributionsrc/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
--- | ||
title: HTMLAnchorElement:attributionSrc 属性 | ||
slug: Web/API/HTMLAnchorElement/attributionSrc | ||
l10n: | ||
sourceCommit: e9e2ec643ac69c132f31427a0b586ab2cf83ed58 | ||
--- | ||
|
||
{{APIRef("Attribution Reporting API")}}{{securecontext_header}}{{SeeCompatTable}} | ||
|
||
{{domxref("HTMLAnchorElement")}} 接口的 **`attributionSrc`** 属性用于以编程方式获取和设置 {{htmlelement("a")}} 元素上的 [`attributionsrc`](/zh-CN/docs/Web/HTML/Element/a#attributionsrc) 属性,反映该属性的值。`attributionsrc` 指定你希望浏览器发送 {{httpheader("Attribution-Reporting-Eligible")}} 标头。在服务器端,这用于触发在响应中发送 {{httpheader("Attribution-Reporting-Register-Source")}} 标头,以注册一个[基于导航的归因来源](/zh-CN/docs/Web/API/Attribution_Reporting_API/Registering_sources#基于导航的归因来源)。 | ||
|
||
当浏览器接收到导航响应时,它会存储与基于导航的归因来源相关联的源数据(如 {{httpheader("Attribution-Reporting-Register-Source")}} 响应标头中所提供的数据)。 | ||
|
||
参见[归因报告 API](/zh-CN/docs/Web/API/Attribution_Reporting_API) 以获取更多详细信息。 | ||
|
||
> **备注:** `<a>` 元素不能用作归因触发器,只能用作归因来源。 | ||
## 值 | ||
|
||
一个字符串。此属性有两个版本可供获取和设置: | ||
|
||
- 空字符串,即 `aElem.attributionSrc=""`。这表示你希望将 {{httpheader("Attribution-Reporting-Eligible")}} 标头发送到 `href` 属性所指向的同一服务器。当你在同一服务器上处理归因来源注册时,这是合适的。 | ||
- 包含一个或多个 URL 的值,例如: | ||
|
||
```js | ||
aElem.attributionSrc = | ||
"https://a.example/register-source https://b.example/register-source"; | ||
``` | ||
|
||
当请求的资源不在你控制的服务器上,或者你只是想在不同的服务器上处理归因来源注册的情况下非常有用。在这种情况下,你可以指定一个或多个 URL 作为 `attributionSrc` 的值。当资源请求发生时,除了资源来源之外,还会向 `attributionSrc` 中指定的 URL 发送 {{httpheader("Attribution-Reporting-Eligible")}} 标头。然后,这些 URL 可以通过回复 {{httpheader("Attribution-Reporting-Register-Source")}} 来注册来源。 | ||
|
||
> [!NOTE] | ||
> 指定多个 URL 意味着可以在同一功能上注册多个归因来源。例如,你可能有不同的营销活动需要衡量其成功效果,这些活动涉及基于不同数据生成不同的报告。 | ||
## 示例 | ||
|
||
### 设置空的 attributionSrc | ||
|
||
```html | ||
<a href="https://shop.example"> 点击访问我们的商店 </a> | ||
``` | ||
|
||
```js | ||
const aElem = document.querySelector("a"); | ||
aElem.attributionSrc = ""; | ||
``` | ||
|
||
### 设置包含 URL 的 attributionSrc | ||
|
||
```html | ||
<a href="https://ourshop.example"> 点击访问我们的商店 </a> | ||
``` | ||
|
||
```js | ||
// 对 URL 进行编码,以防它们包含特殊字符 | ||
// 例如“=”,这种字符可能会被错误地解析。 | ||
const encodedUrlA = encodeURIComponent("https://a.example/register-source"); | ||
const encodedUrlB = encodeURIComponent("https://b.example/register-source"); | ||
|
||
const aElem = document.querySelector("a"); | ||
aElem.attributionSrc = `${encodedUrlA} ${encodedUrlB}`; | ||
``` | ||
|
||
## 规范 | ||
|
||
{{Specifications}} | ||
|
||
## 浏览器兼容性 | ||
|
||
{{Compat}} | ||
|
||
## 参见 | ||
|
||
- [归因报告 API](/zh-CN/docs/Web/API/Attribution_Reporting_API) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
--- | ||
title: HTMLAnchorElement:host 属性 | ||
slug: Web/API/HTMLAnchorElement/host | ||
l10n: | ||
sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 | ||
--- | ||
|
||
{{ApiRef("HTML DOM")}} | ||
|
||
**`HTMLAnchorElement.host`** 属性是一个字符串,包含主机名,即 _hostname_,并且如果 URL 的*端口号*不为空,则后面会跟一个 `':'` 和 URL 的*端口号*。 | ||
|
||
## 值 | ||
|
||
一个字符串。 | ||
|
||
## 示例 | ||
|
||
```js | ||
const anchor = document.createElement("a"); | ||
|
||
anchor.href = "https://developer.mozilla.org/zh-CN/HTMLAnchorElement"; | ||
anchor.host === "developer.mozilla.org"; | ||
|
||
anchor.href = "https://developer.mozilla.org:443/zh-CN/HTMLAnchorElement"; | ||
anchor.host === "developer.mozilla.org"; | ||
// 不包含端口号,因为 443 是该方案的默认端口 | ||
|
||
anchor.href = "https://developer.mozilla.org:4097/zh-CN/HTMLAnchorElement"; | ||
anchor.host === "developer.mozilla.org:4097"; | ||
``` | ||
|
||
## 规范 | ||
|
||
{{Specifications}} | ||
|
||
## 浏览器兼容性 | ||
|
||
{{Compat}} | ||
|
||
## 参见 | ||
|
||
- 所属接口 {{domxref("HTMLAnchorElement")}}。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
--- | ||
title: HTMLAnchorElement:hostname 属性 | ||
slug: Web/API/HTMLAnchorElement/hostname | ||
l10n: | ||
sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 | ||
--- | ||
|
||
{{ApiRef("HTML DOM")}} | ||
|
||
**`HTMLAnchorElement.hostname`** 属性是一个包含 URL 域名的字符串。 | ||
|
||
## 值 | ||
|
||
一个字符串。 | ||
|
||
## 示例 | ||
|
||
```js | ||
// 文档中有一个 <a id="myAnchor" href="/zh-CN/docs/HTMLAnchorElement"> 元素 | ||
const anchor = document.getElementById("myAnchor"); | ||
anchor.hostname; // 返回“developer.mozilla.org” | ||
``` | ||
|
||
## 规范 | ||
|
||
{{Specifications}} | ||
|
||
## 浏览器兼容性 | ||
|
||
{{Compat}} | ||
|
||
## 参见 | ||
|
||
- 所属接口 {{domxref("HTMLAnchorElement")}}。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
--- | ||
title: HTMLAnchorElement:hreflang 属性 | ||
slug: Web/API/HTMLAnchorElement/hreflang | ||
l10n: | ||
sourceCommit: 5948500efb7d63d514966013adc8ed925ce28f69 | ||
--- | ||
|
||
{{ApiRef("HTML DOM")}} | ||
|
||
{{domxref("HTMLAnchorElement")}} 接口的 **`hreflang`** 属性是一个表示链接资源的语言的字符串。 | ||
|
||
它反映 {{HTMLElement("a")}} 元素的 `hreflang` 属性,如果没有 `hreflang` 属性,则为空字符串(`""`)。 | ||
|
||
Web 浏览器和搜索引擎可能会使用此信息来更好地理解链接内容的语言,但它们并不一定要遵循此信息。为 `hreflang` 属性提供的值应遵循 {{RFC(5646, "用于标识语言的标记(也被称为 BCP 47)")}}中定义的格式。如果不符合该格式,则会被忽略。 | ||
|
||
在获取链接资源后,Web 浏览器并不完全依赖于 `hreflang` 属性。相反,它们会使用与资源直接关联的语言信息(例如,通过 HTTP 标头)来确定资源的语言。 | ||
|
||
## 值 | ||
|
||
一个包含语言标签的字符串,如果没有 `hreflang` 属性,则为空字符串(`""`)。 | ||
|
||
## 示例 | ||
|
||
```html | ||
<a id="exampleLink" href="https://example.com" hreflang="en-IN">示例链接</a> | ||
<p class="hreflang"></p> | ||
``` | ||
|
||
```css | ||
#exampleLink { | ||
font-size: 1.5rem; | ||
} | ||
``` | ||
|
||
```js | ||
const anchorElement = document.getElementById("exampleLink"); | ||
const pTag = document.querySelector(".hreflang"); | ||
console.log(anchorElement.hreflang); // 输出:“en-IN” | ||
pTag.textContent = anchorElement.hreflang; | ||
``` | ||
|
||
## Result | ||
|
||
{{EmbedLiveSample("示例",100,100)}} | ||
|
||
## 规范 | ||
|
||
{{Specifications}} | ||
|
||
## 浏览器兼容性 | ||
|
||
{{Compat}} | ||
|
||
## 参见 | ||
|
||
- {{domxref("HTMLLinkElement.hreflang")}} 属性 |
Oops, something went wrong.