Skip to content

Commit 59c3845

Browse files
jaywcjlovejaywcjlove
committed
doc: add area_alt, area_coords, area_download, area_hreflang, area_href, area_media, area_referrepolicy, area_rel document.
1 parent 69aaa9d commit 59c3845

File tree

10 files changed

+466
-16
lines changed

10 files changed

+466
-16
lines changed

‎docs/tags/a_hreflang.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ HTML `<a>` 标签的 hreflang 属性
3737
| 值 | 描述 |
3838
| ---- | ---- |
3939
| *language\_code* | 一个由两个字母组成的语言代码，用于指定链接文档的语言。 要查看所有可用的语言代码，请访问我们的 [语言代码参考](../reference/language_codes.md)。 |
40+
<!--rehype:style=width: 100%; display: inline-table;-->
4041

4142

4243
[1]: ../assets/chrome.svg

‎docs/tags/a_rel.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ HTML `<a>` 标签的 rel 属性
2222
| 属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
2323
| ---- | ---- | ---- | ---- | ---- | ---- |
2424
| rel | Yes | Yes | Yes | Yes | Yes |
25+
<!--rehype:style=width: 100%; display: inline-table;-->
2526

2627
## 语法
2728

@@ -46,6 +47,7 @@ HTML `<a>` 标签的 rel 属性
4647
| prev | 选择中的上一个文档 |
4748
| search | 指向文档搜索工具的链接 |
4849
| tag | 当前文档的标签（关键字） |
50+
<!--rehype:style=width: 100%; display: inline-table;-->
4951

5052

5153

‎docs/tags/area_alt.md‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,50 @@
1-
area_alt.md
1+
HTML \<area> alt 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/area_alt.md">docs/tags/area_alt.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
使用 alt 属性为图像映射中的每个区域指定替代文本：
7+
8+
```html idoc:preview
9+
<img src="../assets/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
10+
<map name="workmap">
11+
<area shape="rect" coords="34,44,270,350" alt="Computer" href="a.html">
12+
<area shape="rect" coords="290,172,333,250" alt="Phone" href="abbr.html">
13+
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="address.html">
14+
</map>
15+
```
16+
<!--rehype:style=min-height: 280px;-->
17+
18+
## 定义和用法
19+
20+
如果图像无法显示，`alt` 属性指定区域的替代文本。
21+
22+
如果用户由于某种原因无法查看图像（由于连接速度慢、src 属性中的错误或用户使用屏幕阅读器），`alt` 属性会为图像提供替代信息。
23+
24+
如果存在 `href` 属性，则需要 `alt` 属性。
25+
26+
## 浏览器支持
27+
28+
| 属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
29+
| ---- | ---- | ---- | ---- | ---- | ---- |
30+
| alt | Yes | Yes | Yes | Yes | Yes |
31+
<!--rehype:style=width: 100%; display: inline-table;-->
32+
33+
## 语法
34+
35+
```html
36+
<area alt="text">
37+
```
38+
39+
## 属性值
40+
41+
| 值 Value | 描述 Description |
42+
| ----- | ----- |
43+
| *text* | 如果图像无法显示，则指定该区域的替代文本 |
44+
<!--rehype:style=width: 100%; display: inline-table;-->
45+
46+
[1]: ../assets/chrome.svg
47+
[2]: ../assets/edge.svg
48+
[3]: ../assets/firefox.svg
49+
[4]: ../assets/safari.svg
50+
[5]: ../assets/opera.svg

‎docs/tags/area_coords.md‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,53 @@
1-
area_coords.md
1+
HTML \<area> coords 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/area_coords.md">docs/tags/area_coords.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
使用 `coords` 属性指定图像映射中每个区域的坐标：
7+
8+
```html idoc:preview
9+
<img src="https://user-images.githubusercontent.com/1680273/165700877-949e520a-c085-40ce-abd4-2996da31f33b.png" width="145" height="126" alt="Planets"
10+
usemap="#planetmap">
11+
12+
<map name="planetmap">
13+
<area shape="rect" coords="0,0,82,126" href="a.html" alt="Sun">
14+
<area shape="circle" coords="90,58,3" href="address.html" alt="Mercury">
15+
<area shape="circle" coords="124,58,8" href="applet.html" alt="Venus">
16+
</map>
17+
```
18+
19+
## 定义和用法
20+
21+
`coords` 属性指定图像地图中某个区域的坐标。
22+
23+
`coords` 属性与 `shape` 属性一起使用来指定区域的大小、形状和位置。
24+
25+
**提示：** 区域左上角的坐标为 `0,0`。
26+
27+
## 浏览器支持
28+
29+
| 属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
30+
| ---- | ---- | ---- | ---- | ---- | ---- |
31+
| coords | Yes | Yes | Yes | Yes | Yes |
32+
<!--rehype:style=width: 100%; display: inline-table;-->
33+
34+
## 语法
35+
36+
```html
37+
<area coords="value">
38+
```
39+
40+
## 属性值
41+
42+
| 值 Value | 描述 Description |
43+
| ----- | ----- |
44+
| *x1,y1,x2,y2* | 指定矩形左上角和右下角的坐标（shape="rect"） |
45+
| *x,y,radius* | 指定圆心坐标和半径（shape="circle"） |
46+
| *x1,y1,x2,y2,..,xn,yn* | 指定多边形边缘的坐标。 如果第一个和最后一个坐标对不相同，浏览器会添加最后一个坐标对来闭合多边形（shape="poly") |
47+
<!--rehype:style=width: 100%; display: inline-table;-->
48+
49+
[1]: ../assets/chrome.svg
50+
[2]: ../assets/edge.svg
51+
[3]: ../assets/firefox.svg
52+
[4]: ../assets/safari.svg
53+
[5]: ../assets/opera.svg

‎docs/tags/area_download.md‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,70 @@
1-
area_download.md
1+
HTML \<area> download 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/area_download.md">docs/tags/area_download.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
使用 `download` 属性指定当用户单击超链接时将下载目标：
7+
8+
```html idoc:preview
9+
<img src="https://user-images.githubusercontent.com/1680273/165700877-949e520a-c085-40ce-abd4-2996da31f33b.png" width="145" height="126" alt="Planets"
10+
usemap="#planetmap">
11+
12+
<map name="planetmap">
13+
<area download shape="rect" coords="0,0,82,126" href="a.html" alt="Sun">
14+
<area download shape="circle" coords="90,58,3" href="address.html" alt="Mercury">
15+
<area download shape="circle" coords="124,58,8" href="applet.html" alt="Venus">
16+
</map>
17+
```
18+
19+
## 定义和用法
20+
21+
`download` 属性指定当用户单击超链接时将下载目标（`href` 属性中指定的文件）。
22+
23+
`download` 属性的可选值将是文件下载后的新名称。 对允许值没有限制，浏览器会自动检测正确的文件扩展名并将其添加到文件中（`.img`、`.pdf`、`.txt`、`.html` 等）。
24+
25+
如果省略该值，则使用原始文件名。
26+
27+
## 浏览器支持
28+
29+
表中的数字指定了完全支持该属性的第一个浏览器版本。
30+
31+
| 属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
32+
| ---- | ---- | ---- | ---- | ---- | ---- |
33+
| download | 14.0\* | 18.0 | 20.0\* | 10.1 | 15.0 |
34+
<!--rehype:style=width: 100%; display: inline-table;-->
35+
36+
\* Chrome 65+ 和 Firefox 仅支持同源下载链接。
37+
38+
## 语法
39+
40+
```html
41+
<area download="filename">
42+
```
43+
44+
## 属性值
45+
46+
| 值 Value | 描述 Description |
47+
| ----- | ----- |
48+
| *filename* | 可选的。 指定下载文件的新文件名 |
49+
<!--rehype:style=width: 100%; display: inline-table;-->
50+
51+
## 更多示例
52+
53+
为下载属性指定一个值，它将是下载文件的新文件名（`sun.html` 而不是 `a.html` 等）：
54+
55+
```html idoc:preview
56+
<img src="https://user-images.githubusercontent.com/1680273/165700877-949e520a-c085-40ce-abd4-2996da31f33b.png" width="145" height="126" alt="Planets"
57+
usemap="#planetmap">
58+
59+
<map name="planetmap">
60+
<area download="sun" shape="rect" coords="0,0,82,126" href="a.html" alt="Sun">
61+
<area download shape="circle" coords="90,58,3" href="address.html" alt="Mercury">
62+
<area download shape="circle" coords="124,58,8" href="applet.html" alt="Venus">
63+
</map>
64+
```
65+
66+
[1]: ../assets/chrome.svg
67+
[2]: ../assets/edge.svg
68+
[3]: ../assets/firefox.svg
69+
[4]: ../assets/safari.svg
70+
[5]: ../assets/opera.svg

‎docs/tags/area_href.md‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,49 @@
1-
area_href.md
1+
HTML \<area> href 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/area_href.md">docs/tags/area_href.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
使用 href 属性为图像映射中的每个区域指定链接目标：
7+
8+
```html idoc:preview
9+
<img src="https://user-images.githubusercontent.com/1680273/165700877-949e520a-c085-40ce-abd4-2996da31f33b.png" width="145" height="126" alt="Planets"
10+
usemap="#planetmap">
11+
12+
<map name="planetmap">
13+
<area hreflang="en" shape="rect" coords="0,0,82,126" href="a.html" alt="Sun">
14+
<area hreflang="en" shape="circle" coords="90,58,3" href="address.html" alt="Mercury">
15+
<area hreflang="en" shape="circle" coords="124,58,8" href="applet.html" alt="Venus">
16+
</map>
17+
```
18+
19+
## 定义和用法
20+
21+
`href` 属性指定区域的超链接目标。
22+
23+
如果 `href` 属性不存在，则 `<area>` 标签不是超链接。
24+
25+
## 浏览器支持
26+
27+
| 属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
28+
| ---- | ---- | ---- | ---- | ---- | ---- |
29+
| href | Yes | Yes | Yes | Yes | Yes |
30+
<!--rehype:style=width: 100%; display: inline-table;-->
31+
32+
## 语法
33+
34+
```html
35+
<area href="URL">
36+
```
37+
38+
## 属性值
39+
40+
| 值 Value | 描述 Description |
41+
| ----- | ----- |
42+
| *URL* | 指定区域的超链接目标。可能的值：* 绝对 URL - 指向另一个网站（如 `href="http://www.example.com/sun.htm"`）<br>* 相对 URL - 指向网站内的文件（如 `href="sun.htm"`）<br> * 链接到页面内具有指定 id 的元素（如 `href="#top"`）<br>* 其他协议（如 `https://`、`ftp://`、`mailto:`、`file:` 等）<br>* 一个脚本（比如 `href="javascript:alert('Hello');"`） |
43+
<!--rehype:style=width: 100%; display: inline-table;-->
44+
45+
[1]: ../assets/chrome.svg
46+
[2]: ../assets/edge.svg
47+
[3]: ../assets/firefox.svg
48+
[4]: ../assets/safari.svg
49+
[5]: ../assets/opera.svg

‎docs/tags/area_hreflang.md‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,51 @@
1-
area_hreflang.md
1+
HTML \<area> hreflang 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/area_hreflang.md">docs/tags/area_hreflang.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
使用 `hreflang` 属性为图像映射中的每个区域指定目标 `URL` 的语言：
7+
8+
```html idoc:preview
9+
<img src="https://user-images.githubusercontent.com/1680273/165700877-949e520a-c085-40ce-abd4-2996da31f33b.png" width="145" height="126" alt="Planets"
10+
usemap="#planetmap">
11+
12+
<map name="planetmap">
13+
<area hreflang="en" shape="rect" coords="0,0,82,126" href="a.html" alt="Sun">
14+
<area hreflang="en" shape="circle" coords="90,58,3" href="address.html" alt="Mercury">
15+
<area hreflang="en" shape="circle" coords="124,58,8" href="applet.html" alt="Venus">
16+
</map>
17+
```
18+
19+
## 定义和用法
20+
21+
`hreflang` 属性指定区域中目标 URL 的语言。
22+
23+
此属性仅在设置了 `href` 属性时使用。
24+
25+
**注意：** 此属性仅供参考。
26+
27+
## 浏览器支持
28+
29+
| 属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
30+
| ---- | ---- | ---- | ---- | ---- | ---- |
31+
| hreflang | Yes | Yes | Yes | Yes | Yes |
32+
<!--rehype:style=width: 100%; display: inline-table;-->
33+
34+
## 语法
35+
36+
```html
37+
<area hreflang="language_code">
38+
```
39+
40+
## 属性值
41+
42+
| 值 Value | 描述 Description |
43+
| ----- | ----- |
44+
| *language\_code* | 一个由两个字母组成的语言代码，用于指定链接文档的语言。 要查看所有可用的语言代码，请访问我们的 [语言代码参考](../reference/language_codes.md)。 |
45+
<!--rehype:style=width: 100%; display: inline-table;-->
46+
47+
[1]: ../assets/chrome.svg
48+
[2]: ../assets/edge.svg
49+
[3]: ../assets/firefox.svg
50+
[4]: ../assets/safari.svg
51+
[5]: ../assets/opera.svg

0 commit comments

Comments
 (0)