Skip to content

Commit 0e118ba

Browse files
jaywcjlovejaywcjlove
committed
doc: add img_alt,img_height,img_ismap,img_loading,img_longdesc,img_referrepolicy,img_src,img_usemap,img_width document.
1 parent 95621b7 commit 0e118ba

File tree

11 files changed

+407
-21
lines changed

11 files changed

+407
-21
lines changed

‎docs/tags/img.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ HTML \<img> 标签
3030
| Element | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
3131
| ------- | --- | --- | --- | --- | --- |
3232
| \<img> | Yes | Yes | Yes | Yes | Yes |
33+
<!--rehype:style=width: 100%; display: inline-table;-->
3334

3435
## 属性 Attributes
3536

@@ -47,6 +48,7 @@ HTML \<img> 标签
4748
| srcset | *URL-list* | 指定在不同情况下使用的图像文件列表|
4849
| [usemap](./img_usemap.md) | *#mapname* | 将图像指定为客户端图像映射|
4950
| [width](./img_width.md) | *pixels* | 指定图像的宽度|
51+
<!--rehype:style=width: 100%; display: inline-table;-->
5052

5153
## 全局属性
5254

‎docs/tags/img_alt.md‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,46 @@
1-
img_alt.md
1+
HTML \<img> alt 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/img_alt.md">docs/tags/img_alt.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
指定替代文本的图像，下图图片不存在显示 `alt` 中的文本内容：
7+
8+
```html idoc:preview
9+
<img src="../assets/editors-001xxx.png" alt="这是一个截图" width="500" height="600">
10+
```
11+
<!--rehype:style=min-height: 120px;-->
12+
13+
## 定义和用法
14+
15+
如果图像无法显示，则必需的 `alt` 属性指定图像的替代文本。
16+
17+
如果用户由于某种原因无法查看图像（由于连接速度慢、`src` 属性中的错误或用户使用屏幕阅读器），`alt` 属性会为图像提供替代信息。
18+
19+
**提示：** 要为图像创建工具提示，请使用 `title` 属性！
20+
21+
## 浏览器支持
22+
23+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
24+
| ------- | --- | --- | --- | --- | --- |
25+
| alt | Yes | Yes | Yes | Yes | Yes |
26+
<!--rehype:style=width: 100%; display: inline-table;-->
27+
28+
## 语法
29+
30+
```html
31+
<img alt="text">
32+
```
33+
34+
## 属性值
35+
36+
| 值 Value | 描述 Description |
37+
| ----- | ----- |
38+
| *text* | 指定图像的替代文本。替代文本的准则：<br>* 如果图像包含信息，则文本应描述图像 <br>* 如果图像在 \<a> 元素内，文本应说明链接的位置 <br>* 如果图像仅用于装饰，请使用 `alt=""` |
39+
<!--rehype:style=width: 100%; display: inline-table;-->
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/img_height.md‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,46 @@
1-
img_height.md
1+
HTML \<img> height 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/img_height.md">docs/tags/img_height.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
一个高度为 600 像素，宽度为 500 像素的图像：
7+
8+
```html idoc:preview
9+
<img src="../assets/chrome.svg" width="500" height="600">
10+
```
11+
<!--rehype:style=min-height: 620px;-->
12+
13+
## 定义和用法
14+
15+
`height` 属性指定图像的高度，以像素为单位。
16+
17+
**提示：** 始终为图像指定 `height` 和 `width` 属性。 如果设置了高度和宽度，则在加载页面时保留图像所需的空间。 但是，如果没有这些属性，浏览器将不知道图像的大小，也无法为其预留适当的空间。 效果将是页面布局将在加载期间更改（同时加载图像）。
18+
19+
**提示：** 使用 `height` 和 `width` 属性缩小大图会强制用户下载大图（即使它在页面上看起来很小）。 为避免这种情况，请在将图像用于页面之前使用程序重新缩放图像。
20+
21+
## 浏览器支持
22+
23+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
24+
| ------- | --- | --- | --- | --- | --- |
25+
| height | Yes | Yes | Yes | Yes | Yes |
26+
<!--rehype:style=width: 100%; display: inline-table;-->
27+
28+
## 语法
29+
30+
```html
31+
<img height="pixels">
32+
```
33+
34+
## 属性值
35+
36+
| 值 Value | 描述 Description |
37+
| ----- | ----- |
38+
| *pixels* | 以像素为单位的高度（例如 `height="100"`） |
39+
<!--rehype:style=width: 100%; display: inline-table;-->
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/img_ismap.md‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,41 @@
1-
img_ismap.md
1+
HTML \<img> ismap 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/img_ismap.md">docs/tags/img_ismap.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
服务器端图像映射，点击图标，点击坐标将作为 `URL` 查询字符串发送到 `/action_page.php` 服务器：
7+
8+
```html idoc:preview
9+
<a href="/action_page.php">
10+
<img src="../assets/chrome.svg" alt="Chrome 浏览器" width="42" height="42" ismap>
11+
</a>
12+
```
13+
14+
## 定义和用法
15+
16+
`ismap` 属性是一个布尔属性。
17+
18+
当存在时，它指定图像是服务器端图像映射的一部分（图像映射是具有可点击区域的图像）。
19+
20+
单击服务器端图像地图时，单击坐标将作为 URL 查询字符串发送到服务器。
21+
22+
**注意：** 只有当 `<img>` 元素是具有有效 `href` 属性的 `<a>` 元素的后代时，才允许使用 `ismap` 属性。
23+
24+
## 浏览器支持
25+
26+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
27+
| ------- | --- | --- | --- | --- | --- |
28+
| ismap | Yes | Yes | Yes | Yes | Yes |
29+
<!--rehype:style=width: 100%; display: inline-table;-->
30+
31+
## 语法
32+
33+
```html
34+
<img ismap>
35+
```
36+
37+
[1]: ../assets/chrome.svg
38+
[2]: ../assets/edge.svg
39+
[3]: ../assets/firefox.svg
40+
[4]: ../assets/safari.svg
41+
[5]: ../assets/opera.svg

‎docs/tags/img_loading.md‎

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

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/img_loading.md">docs/tags/img_loading.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
向首屏下方的图像添加延迟加载：
7+
8+
```html idoc:preview
9+
<!-- 屏幕外图像 -->
10+
<img src="../assets/editors-001.png" alt="Paris" style="width:100%" loading="lazy">
11+
<img src="../assets/editors-002.png" alt="Paris" style="width:100%" loading="lazy">
12+
<img src="../assets/editors-003.png" alt="Paris" style="width:100%" loading="lazy">
13+
```
14+
<!--rehype:style=min-height: 300px;-->
15+
16+
17+
## 定义和用法
18+
19+
`loading` 属性指定浏览器是应该立即加载图像还是推迟加载屏幕外图像，例如，直到用户滚动到它们附近。
20+
21+
**提示：** 仅将 `loading="lazy"` 添加到位于首屏下方的图像。
22+
23+
## 浏览器支持
24+
25+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
26+
| ------- | --- | --- | --- | --- | --- |
27+
| loading | 77.0 | 79.0 | 75.0 | Not Supported | 64.0 |
28+
<!--rehype:style=width: 100%; display: inline-table;-->
29+
30+
## 语法
31+
32+
```html
33+
<img src="URL" loading="eager|lazy">
34+
```
35+
36+
## 属性值
37+
38+
| 值 Value | 描述 Description |
39+
| ----- | ----- |
40+
| eager | 默认。 立即加载图像 |
41+
| lazy | 延迟加载图像，直到满足某些条件 |
42+
<!--rehype:style=width: 100%; display: inline-table;-->
43+
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/img_longdesc.md‎

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

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/img_longdesc.md">docs/tags/img_longdesc.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
如何使用 `longdesc` 属性的几个示例：
7+
8+
```html idoc:preview
9+
<!-- 描述与图像在同一页上 -->
10+
<img src="../assets/chrome.svg" alt="W3Schools.com" width="100" height="132" longdesc="#w3htmlExplained">
11+
12+
<!-- 描述在外部页面中 -->
13+
<img src="../assets/chrome.svg" alt="W3Schools.com" width="100" height="132" longdesc="w3html.txt">
14+
15+
<!-- 描述是外部页面中的几个之一 -->
16+
<img src="../assets/chrome.svg" alt="W3Schools.com" width="100" height="132" longdesc="http://example.com/desc#item3">
17+
18+
<!-- 描述包含在 data:URI 中 -->
19+
<img src="../assets/chrome.svg" alt="W3Schools.com" width="100" height="132" longdesc="data%3Atext%2Fhtml%3Bcharset%3Dutf-8%3B%2C%3C%21DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3E%E6%A0%87%E5%BF%97%E8%AF%B4%E6%98%8E%3C%2Ftitle%3E%3C%2Fhead%3E%3Cbody%3E%3Cp%3E%E4%B8%80%E4%BA%9B%E6%8F%8F%E8%BF%B0%E5%9C%A8%E8%BF%99%E9%87%8C%3C%2Fp%3E%3C%2Fbody%3E%3C%2Fhtml%3E">
20+
```
21+
22+
## 定义和用法
23+
24+
`longdesc` 属性指定了一个指向图像详细描述的超链接。
25+
26+
## 浏览器支持
27+
28+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
29+
| ------- | --- | --- | --- | --- | --- |
30+
| longdesc | ❌ 不支持 | ❌ 不支持 | ❌ 不支持 | ❌ 不支持 | ❌ 不支持 |
31+
<!--rehype:style=width: 100%; display: inline-table;-->
32+
33+
## 语法
34+
35+
```html
36+
<img longdesc="string">
37+
```
38+
39+
## 属性值
40+
41+
| 值 Value | 描述 Description |
42+
| ----- | ----- |
43+
| *string* | 指向图像详细描述的超链接。可能的值：<br>* 指向另一个元素的 id <br>* 绝对 URL - 指向另一个网站（如 `longdesc="http://www.example.com/description.txt"`） <br>* 相对 URL - 指向网站内的文件（如 `longdesc="description.txt"`） |
44+
<!--rehype:style=width: 100%; display: inline-table;-->
45+
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

‎docs/tags/img_referrepolicy.md‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,46 @@
1-
img_referrepolicy.md
1+
HTML \<img> referrerpolicy 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/img_referrepolicy.md">docs/tags/img_referrepolicy.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
设置图片的 `referrerpolicy`：
7+
8+
```html idoc:preview
9+
<img src="../assets/chrome.svg" alt="Some image" referrerpolicy="no-referrer">
10+
```
11+
12+
## 定义和用法
13+
14+
`referrerpolicy` 属性指定在获取图像时要使用的引荐来源信息。
15+
16+
## 浏览器支持
17+
18+
表中的数字指定了完全支持该属性的第一个浏览器版本。
19+
20+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
21+
| ------- | --- | --- | --- | --- | --- |
22+
| referrerpolicy | 51.0 | 79.0 | 50.0 | 11.1 | 38.0 |
23+
<!--rehype:style=width: 100%; display: inline-table;-->
24+
25+
## 语法
26+
27+
```html
28+
<img referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url">
29+
```
30+
31+
## 属性值
32+
33+
| 值 Value | 描述 Description |
34+
| ----- | ----- |
35+
| no-referrer | 不发送推荐人信息 |
36+
| no-referrer-when-downgrade | 默认。 在没有 HTTPS 的情况下，referrer 标头不会发送到来源 |
37+
| origin | 发送文档的来源（方案、主机和端口） |
38+
| origin-when-cross-origin | 对于跨域请求：仅发送方案、主机和端口。 对于同源请求：还包括路径 |
39+
| unsafe-url | 发送来源、路径和查询字符串（但不发送片段、密码或用户名）。 该值被认为是不安全的 |
40+
<!--rehype:style=width: 100%; display: inline-table;-->
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/img_src.md‎

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

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/img_src.md">docs/tags/img_src.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
图像标记如下：
7+
8+
```html idoc:preview
9+
<img src="../assets/chrome.svg">
10+
```
11+
12+
## 定义和用法
13+
14+
必需的 `src` 属性指定图像的 URL。
15+
16+
有两种方法可以在 `src` 属性中指定 URL：
17+
18+
**① 绝对 URL** - 指向托管在另一个网站上的外部图像的链接。示例：`src="https://jaywcjlove.github.io/html-tutorial/assets/chrome.svg"`。
19+
20+
**注意 ⚠️：** 外部图像可能受版权保护。如果您没有获得使用许可，您可能违反了版权法。此外，您无法控制外部图像；它可以突然被删除或更改。
21+
22+
**② 相对 URL** - 链接到网站内托管的图像。此处，URL 不包含域名。如果 URL 开头没有斜杠，则它将相对于当前页面。示例：`src="chrome.svg"`。如果 URL 以斜杠开头，它将与域相关。示例：`src="/assets/chrome.svg"`。
23+
24+
**提示：** 几乎总是最好使用相对 URL。如果您更改域，它们不会中断。
25+
26+
**注意 ⚠️：** 如果浏览器找不到图像，则会显示断开的链接图标和 `alt` 文本。
27+
28+
## 浏览器支持
29+
30+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
31+
| ------- | --- | --- | --- | --- | --- |
32+
| src | Yes | Yes | Yes | Yes | Yes |
33+
<!--rehype:style=width: 100%; display: inline-table;-->
34+
35+
## 语法
36+
37+
```html
38+
<img src="URL">
39+
```
40+
41+
## 属性值
42+
43+
| 值 Value | 描述 Description |
44+
| ----- | ----- |
45+
| *URL* | 图片的 URL。可能的值：<br>* 绝对 URL - 指向另一个网站（如 `src="http://www.example.com/image.gif"`） <br>* 相对 URL - 指向网站内的文件（如 `src="image.gif"`） |
46+
<!--rehype:style=width: 100%; display: inline-table;-->
47+
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

0 commit comments

Comments
 (0)