Skip to content

Commit

Permalink
[zh-cn]: create docs for HTMLAnchorElement (#24678)
Browse files Browse the repository at this point in the history
Co-authored-by: A1lo <[email protected]>
  • Loading branch information
fuchunhui and yin1999 authored Nov 28, 2024
1 parent a8f2a70 commit 304f680
Show file tree
Hide file tree
Showing 23 changed files with 745 additions and 100 deletions.
74 changes: 74 additions & 0 deletions files/zh-cn/web/api/htmlanchorelement/attributionsrc/index.md
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)
10 changes: 6 additions & 4 deletions files/zh-cn/web/api/htmlanchorelement/download/index.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
---
title: HTMLAnchorElement.download
title: HTMLAnchorElementdownload 属性
slug: Web/API/HTMLAnchorElement/download
l10n:
sourceCommit: e9e2ec643ac69c132f31427a0b586ab2cf83ed58
---

{{APIRef("HTML DOM")}}

**`HTMLAnchorElement.download`** 属性是一个{{jsxref("DOMString")}} ,表明链接的资源将被下载,而不是显示在浏览器中。该值表示下载文件的建议名称。如果该名称不是基础操作系统的有效文件名,浏览器将对其进行调整
**`HTMLAnchorElement.download`** 属性是一个字符串,表示链接的资源旨在被下载而非在浏览器中显示。如果该属性有值,则指定了在本地文件系统中标记资源时使用的默认文件名。如果名称在底层操作系统中不是有效的文件名,浏览器将会对其进行调整

> [!NOTE]
> 该值对于下载行为来说不一定是有用的,同时也不能决定下载行为是否发生
> 这个值可能不会被用于下载。这个值不能用来确定下载是否会发生
##

Expand All @@ -18,6 +20,6 @@ slug: Web/API/HTMLAnchorElement/download

{{Specifications}}

## 浏览器的兼容性
## 浏览器兼容性

{{Compat}}
18 changes: 10 additions & 8 deletions files/zh-cn/web/api/htmlanchorelement/hash/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,36 @@
title: HTMLAnchorElement:hash 属性
slug: Web/API/HTMLAnchorElement/hash
l10n:
sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
sourceCommit: 3e301467a02808e9fc488d7012f1f49eb66a5980
---

{{ APIRef("HTML DOM") }}

**`HTMLHyperlinkElementUtils.hash`** 属性返回一个字符串,其中包含一个 `'#'`,后面是 URL 的片段标识符。
**`HTMLAnchorElement.hash`** 属性返回一个字符串,该字符串包含一个 `'#'` 符号,后面跟着 URL 的片段标识符。

片段没有经过[百分号编码](https://zh.wikipedia.org/wiki/百分号编码)。如果 URL 没有包含片段标识符,这个属性为一个空的字符串,`""`
片段是[百分号编码](/zh-CN/docs/Glossary/Percent-encoding)。如果 URL 没有片段标识符,则此属性包含一个空字符串,即 `""`

##

一个字符串。

## 示例

### 从锚点链接获取 hash 值
### 从锚点链接中获取哈希值

给定 HTML 代码如下:
给定 HTML

```html
<a id="myAnchor" href="/zh-CN/docs/HTMLAnchorElement#示例">示例</a>
<a id="myAnchor" href="/zh-CN/docs/Web/API/HTMLAnchorElement/hash#示例">
示例
</a>
```

你可以像这样获取锚点的 hash 值
你可以像这样获取锚点哈希值

```js
const anchor = document.getElementById("myAnchor");
anchor.hash; // 返回 '#示例'
anchor.hash; // “#%E7%A4%BA%E4%BE%8B”
```

## 规范
Expand Down
42 changes: 42 additions & 0 deletions files/zh-cn/web/api/htmlanchorelement/host/index.md
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")}}。
34 changes: 34 additions & 0 deletions files/zh-cn/web/api/htmlanchorelement/hostname/index.md
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")}}。
12 changes: 7 additions & 5 deletions files/zh-cn/web/api/htmlanchorelement/href/index.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
---
title: HTMLAnchorElement.href
title: HTMLAnchorElementhref 属性
slug: Web/API/HTMLAnchorElement/href
l10n:
sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
---

{{ApiRef("HTML DOM")}}

**`HTMLAnchorElement.href`** 属性是一个返回包含整个 URL 的字符串的 {{Glossary("stringifier")}},且允许 href 被更新
**`HTMLAnchorElement.href`** 属性是一个{{Glossary("stringifier", "字符串化器")}},它返回一个包含完整 URL 的字符串,并且允许更新 `href` 属性

##

Expand All @@ -14,9 +16,9 @@ slug: Web/API/HTMLAnchorElement/href
## 示例

```js
// 假设 <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLAnchorElement"> 元素在文档内
// 文档中有一个 <a id="myAnchor" href="https://developer.mozilla.org/zh-CN/HTMLAnchorElement"> 元素
const anchor = document.getElementById("myAnchor");
anchor.href; // 返回 'https://developer.mozilla.org/en-US/HTMLAnchorElement'
anchor.href; // 返回https://developer.mozilla.org/zh-CN/HTMLAnchorElement
```

## 规范
Expand All @@ -29,4 +31,4 @@ anchor.href; // 返回 'https://developer.mozilla.org/en-US/HTMLAnchorElement'

## 参见

- 所属的 {{domxref("HTMLAnchorElement")}} 接口
- 所属接口 {{domxref("HTMLAnchorElement")}}。
56 changes: 56 additions & 0 deletions files/zh-cn/web/api/htmlanchorelement/hreflang/index.md
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")}} 属性
Loading

0 comments on commit 304f680

Please sign in to comment.