Skip to content

Commit 69aaa9d

Browse files
jaywcjlovejaywcjlove
committed
doc: add a_download,a_href,a_hreflang,a_media,a_ping,a_referrepolicy,a_rel,a_target,a_type
1 parent 2b0efa4 commit 69aaa9d

File tree

10 files changed

+509
-12
lines changed

10 files changed

+509
-12
lines changed

‎docs/reference/urlencode.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
HTML URL 编码
22
===
33

4-
5-
## ASCII 编码参考手册
4+
ASCII 编码参考手册
65

76
浏览器将根据页面中使用的字符集对输入进行编码。HTML5 中的默认字符集为 UTF-8。
87

‎docs/tags/a_download.md‎

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,58 @@
1-
HTML `<a>` 标签的 download 属性
2-
===
1+
HTML \<a> download 标签
2+
===
3+
4+
## 示例
5+
6+
单击链接时下载文件（而不是导航到文件）：
7+
8+
```html idoc:preview:iframe
9+
<a href="../assets/edge.svg" download>
10+
下载 edge.svg 图标
11+
</a>
12+
```
13+
14+
## 定义和用法
15+
16+
`download` 属性指定当用户单击超链接时将下载目标（[`href`](./a_href.md) 属性中指定的文件）。
17+
18+
`download` 属性的可选值将是文件下载后的新名称。 对允许值没有限制，浏览器会自动检测正确的文件扩展名并将其添加到文件中（.img、.pdf、.txt、.html 等）。
19+
20+
## 浏览器支持
21+
22+
表中的数字指定了完全支持该属性的第一个浏览器版本。
23+
24+
| 属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
25+
| ---- | ---- | ---- | ---- | ---- | ---- |
26+
| download | 14.0\* | 18.0 | 20.0\* | 10.1 | 15.0 |
27+
<!--rehype:style=width: 100%; display: inline-table;-->
28+
29+
\* Chrome 65+ 和 Firefox 仅支持同源下载链接。
30+
31+
## 语法
32+
33+
```html
34+
<a download="filename">
35+
```
36+
37+
## 属性值
38+
39+
| 值 | 描述 |
40+
| ---- | ---- |
41+
| *filename* | 可选的。 指定下载文件的新文件名 |
42+
<!--rehype:style=width: 100%; display: inline-table;-->
43+
44+
## 更多示例
45+
46+
为下载属性指定一个值，它将是下载文件的新文件名（“chrome.svg”而不是“edge.svg”）：
47+
48+
```html idoc:preview:iframe
49+
<a href="../assets/edge.svg" download="chrome">
50+
下载 svg 图标
51+
</a>
52+
```
53+
54+
[1]: ../assets/chrome.svg
55+
[2]: ../assets/edge.svg
56+
[3]: ../assets/firefox.svg
57+
[4]: ../assets/safari.svg
58+
[5]: ../assets/opera.svg

‎docs/tags/a_href.md‎

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,83 @@
11
HTML `<a>` 标签的 href 属性
2-
===
2+
===
3+
4+
## 示例
5+
6+
`href` 属性指定链接的目的地：
7+
8+
```html idoc:preview
9+
<a target="_blank" href="https://github.com/jaywcjlove/html-tutorial">
10+
HTML Tutorial
11+
</a>
12+
```
13+
14+
## 定义和用法
15+
16+
`href` 属性指定链接到的页面的 URL。
17+
18+
如果 `href` 属性不存在，则 [`<a>`](./a.md) 标记将不是超链接。
19+
20+
**提示：** 您可以使用 `href="#top"` 或 `href="#"` 链接到当前页面的顶部！
21+
22+
## 浏览器支持
23+
24+
| 属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
25+
| ---- | ---- | ---- | ---- | ---- | ---- |
26+
| href | Yes | Yes | Yes | Yes | Yes |
27+
<!--rehype:style=width: 100%; display: inline-table;-->
28+
29+
## 语法
30+
31+
```html
32+
<a href="URL">
33+
```
34+
35+
## 属性值
36+
37+
| 值 | 描述 |
38+
| ---- | ---- |
39+
| *URL* | 链接的 URL。可能的值：<br>* 绝对 URL - 指向另一个网站（如 `href="http://www.example.com/default.htm"`）<br>* 相对 URL - 指向网站内的文件（如 `href="default.htm"`）<br>* 链接到页面内具有指定 id 的元素（如 `href="#section2"`）<br>* 其他协议（如 `https://`、`ftp://`、`mailto:`、`file:` 等）<br>* 一个脚本（比如 `href="javascript:alert('Hello');"`） |
40+
<!--rehype:style=width: 100%; display: inline-table;-->
41+
42+
## 更多示例
43+
44+
如何使用图片作为链接：
45+
46+
```html idoc:preview
47+
<a href="https://github.com/jaywcjlove/html-tutorial">
48+
<img
49+
alt="HTML Tutorial"
50+
width="100" height="100"
51+
src="https://avatars1.githubusercontent.com/u/1680273?s=460&v=4">
52+
</a>
53+
```
54+
55+
如何链接到电子邮件地址：
56+
57+
```html idoc:preview
58+
<a href="mailto:someone@example.com">Send email</a>
59+
```
60+
61+
如何链接到电话号码：
62+
63+
```html idoc:preview
64+
<a href="tel:+4733378901">+47 333 78 901</a>
65+
```
66+
67+
如何链接到同一页面上的另一个部分：
68+
69+
```html idoc:preview
70+
<a href="#更多示例">跳转到 #更多示例</a>
71+
```
72+
73+
如何链接到 JavaScript：
74+
75+
```html idoc:preview
76+
<a href="javascript:alert('Hello World!');">执行 JavaScript</a>
77+
```
78+
79+
[1]: ../assets/chrome.svg
80+
[2]: ../assets/edge.svg
81+
[3]: ../assets/firefox.svg
82+
[4]: ../assets/safari.svg
83+
[5]: ../assets/opera.svg

‎docs/tags/a_hreflang.md‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,46 @@
11
HTML `<a>` 标签的 hreflang 属性
2-
===
2+
===
3+
4+
## 示例
5+
6+
`hreflang` 属性指定链接中文档的语言：
7+
8+
```html idoc:preview
9+
<a target="_blank" href="https://github.com/jaywcjlove/html-tutorial">
10+
HTML Tutorial
11+
</a>
12+
```
13+
14+
## 定义和用法
15+
16+
`hreflang` 属性指定链接文档的语言。
17+
18+
此属性仅在设置了 `href` 属性时使用。
19+
20+
**注意：** 此属性仅供参考。
21+
22+
## 浏览器支持
23+
24+
| 属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
25+
| ---- | ---- | ---- | ---- | ---- | ---- |
26+
| hreflang | Yes | Yes | Yes | Yes | Yes |
27+
<!--rehype:style=width: 100%; display: inline-table;-->
28+
29+
## 语法
30+
31+
```html
32+
<a hreflang="language_code">
33+
```
34+
35+
## 属性值
36+
37+
| 值 | 描述 |
38+
| ---- | ---- |
39+
| *language\_code* | 一个由两个字母组成的语言代码，用于指定链接文档的语言。 要查看所有可用的语言代码，请访问我们的 [语言代码参考](../reference/language_codes.md)。 |
40+
41+
42+
[1]: ../assets/chrome.svg
43+
[2]: ../assets/edge.svg
44+
[3]: ../assets/firefox.svg
45+
[4]: ../assets/safari.svg
46+
[5]: ../assets/opera.svg

‎docs/tags/a_media.md‎

Lines changed: 86 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,87 @@
11
HTML `<a>` 标签的 media 属性
2-
===
2+
===
3+
4+
## 示例
5+
6+
带有媒体属性的链接：
7+
8+
```html idoc:preview
9+
<a href="a_hreflang.html?output=print"
10+
media="print and (resolution:300dpi)">
11+
打开媒体属性页面进行打印。</a>
12+
```
13+
14+
## 定义和用法
15+
16+
`media` 属性指定链接文档针对什么媒体或设备进行优化。
17+
18+
此属性用于指定目标 URL 是为特殊设备（如 iPhone）、语音或印刷媒体设计的。
19+
20+
该属性可以接受多个值。
21+
22+
仅在存在 `href` 属性时使用。
23+
24+
**注意：** 此属性仅供参考。
25+
26+
## 浏览器支持
27+
28+
| 属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
29+
| ---- | ---- | ---- | ---- | ---- | ---- |
30+
| media | Yes | Yes | Yes | Yes | Yes |
31+
<!--rehype:style=width: 100%; display: inline-table;-->
32+
33+
## 语法
34+
35+
```html
36+
<a media="value">
37+
```
38+
39+
## 可能的运算符
40+
41+
| 值 | 描述 |
42+
| ---- | ---- |
43+
| and | 指定 AND 运算符 |
44+
| not | 指定 NOT 运算符 |
45+
| , | 指定 OR 运算符 |
46+
<!--rehype:style=width: 100%; display: inline-table;-->
47+
48+
## 设备
49+
50+
| 值 | 描述 |
51+
| ---- | ---- |
52+
| all | 默认。 适用于所有设备 |
53+
| aural | 语音合成器 |
54+
| braille | 盲文反馈装置 |
55+
| handheld | 手持设备（小屏幕，有限带宽） |
56+
| projection | 投影仪 |
57+
| print | 打印预览模式/打印页面 |
58+
| screen | 电脑屏幕 |
59+
| tty | 使用固定间距字符网格的电传打字机和类似媒体 |
60+
| tv | 电视类型的设备（低分辨率，有限的滚动能力） |
61+
<!--rehype:style=width: 100%; display: inline-table;-->
62+
63+
## 值
64+
65+
| 值 | 描述 |
66+
| ---- | ---- |
67+
| width | 指定目标显示区域的宽度。可以使用“min-”和“max-”前缀。示例：media="screen and (min-width:500px)" |
68+
| height | 指定目标显示区域的高度。可以使用“min-”和“max-”前缀。示例：media="screen and (max-height:700px)" |
69+
| device-width | 指定目标显示器/纸张的宽度。可以使用“min-”和“max-”前缀。示例：media="screen and (device-width:500px)" |
70+
| device-height | 指定目标显示器/纸张的高度。可以使用“min-”和“max-”前缀。示例：media="screen and (device-height:500px)" |
71+
| orientation | 指定目标显示器/纸张的方向。可能的值：“portrait”或“landscape” 示例：media="all and (orientation:landscape)" |
72+
| aspect-ratio | 指定目标显示区域的宽高比。可以使用“min-”和“max-”前缀。示例：media="screen and (aspect-ratio:16/9)" |
73+
| device-aspect-ratio | 指定目标显示器/纸张的设备宽度/设备高度比率。可以使用“min-”和“max-”前缀。示例：media="screen and (aspect-ratio:16/9)" |
74+
| color | 指定目标显示器的每种颜色的位数。可以使用“min-”和“max-”前缀。示例：media="screen and (color:3)" |
75+
| color-index | 指定目标显示器可以处理的颜色数。可以使用“min-”和“max-”前缀。示例：media="screen and (min-color-index:256)" |
76+
| monochrome | 指定单色帧缓冲区中每像素的位数。可以使用“min-”和“max-”前缀。示例：media="screen and (monochrome:2)" |
77+
| resolution | 指定目标显示器/纸张的像素密度（dpi 或 dpcm）。可以使用“min-”和“max-”前缀。示例：media="打印和（分辨率：300dpi）" |
78+
| scan | 指定电视显示器的扫描方法。可能的值是“渐进式”和“隔行式”。示例：media="tv and (scan:interlace)" |
79+
| grid | 指定输出设备是网格还是位图。网格的可能值为“1”，否则为“0”。示例：media="handheld and (grid:1)" |
80+
<!--rehype:style=width: 100%; display: inline-table;-->
81+
82+
83+
[1]: ../assets/chrome.svg
84+
[2]: ../assets/edge.svg
85+
[3]: ../assets/firefox.svg
86+
[4]: ../assets/safari.svg
87+
[5]: ../assets/opera.svg

‎docs/tags/a_ping.md‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,48 @@
11
HTML `<a>` 标签的 ping 属性
2-
===
2+
===
3+
4+
## 示例
5+
6+
当用户点击链接时通知 `example.com/trackpings`：
7+
8+
```html
9+
<a href="https://www.example.com/html" ping="https://www.example.com/trackpings">
10+
点击链接时通知 `example.com/trackpings`
11+
</a>
12+
```
13+
14+
## 定义和用法
15+
16+
`ping` 属性指定了在用户点击超链接时要通知的 URL 列表。
17+
18+
当用户点击超链接时，`ping` 属性会向指定的 URL 发送一个简短的 HTTP POST 请求。
19+
20+
此属性对于监视/跟踪很有用。
21+
22+
## 浏览器支持
23+
24+
表中的数字指定了完全支持该属性的第一个浏览器版本。
25+
26+
| 属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
27+
| ---- | ---- | ---- | ---- | ---- | ---- |
28+
| ping | Yes | No | Yes | No | Yes |
29+
<!--rehype:style=width: 100%; display: inline-table;-->
30+
31+
## 语法
32+
33+
```html
34+
<a ping="*URL"*>
35+
```
36+
37+
## 属性值
38+
39+
| 值 | 描述 |
40+
| ---- | ---- |
41+
| *URL* | 指定用户点击超链接时要通知的 URL。 必须是一个或多个有效 URL 的空格分隔列表 |
42+
<!--rehype:style=width: 100%; display: inline-table;-->
43+
44+
[1]: ../assets/chrome.svg
45+
[2]: ../assets/edge.svg
46+
[3]: ../assets/firefox.svg
47+
[4]: ../assets/safari.svg
48+
[5]: ../assets/opera.svg

0 commit comments

Comments
 (0)