Skip to content

Commit 9743fb5

Browse files
jaywcjlovejaywcjlove
committed
doc: add attributes/basic/elements tutorial document.
1 parent 0f6cfef commit 9743fb5

File tree

4 files changed

+482
-18
lines changed

4 files changed

+482
-18
lines changed

‎.idoc/.filesStat.json‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -300,15 +300,15 @@
300300
"birthtime": "2022-04-29T10:28:47.561Z"
301301
},
302302
"docs/tutorial/attributes.md": {
303-
"atime": "2022-04-29T15:27:17.366Z",
304-
"mtime": "2022-04-29T15:26:50.376Z",
305-
"ctime": "2022-04-29T15:26:50.376Z",
303+
"atime": "2022-05-14T17:32:42.064Z",
304+
"mtime": "2022-05-14T17:32:42.030Z",
305+
"ctime": "2022-05-14T17:32:42.030Z",
306306
"birthtime": "2022-04-29T10:35:28.934Z"
307307
},
308308
"docs/tutorial/basic.md": {
309-
"atime": "2022-04-29T15:27:17.501Z",
310-
"mtime": "2022-04-29T15:26:51.870Z",
311-
"ctime": "2022-04-29T15:26:51.870Z",
309+
"atime": "2022-05-14T16:45:32.663Z",
310+
"mtime": "2022-05-14T16:45:33.366Z",
311+
"ctime": "2022-05-14T16:45:33.366Z",
312312
"birthtime": "2022-04-29T10:35:28.933Z"
313313
},
314314
"docs/tutorial/audio.md": {
@@ -432,9 +432,9 @@
432432
"birthtime": "2022-04-29T10:35:28.935Z"
433433
},
434434
"docs/tutorial/elements.md": {
435-
"atime": "2022-04-29T15:27:17.316Z",
436-
"mtime": "2022-04-29T15:26:49.653Z",
437-
"ctime": "2022-04-29T15:26:49.653Z",
435+
"atime": "2022-05-14T17:01:47.527Z",
436+
"mtime": "2022-05-14T17:01:47.505Z",
437+
"ctime": "2022-05-14T17:01:47.505Z",
438438
"birthtime": "2022-04-29T10:35:28.934Z"
439439
},
440440
"docs/tutorial/form_elements.md": {
@@ -4608,9 +4608,9 @@
46084608
"birthtime": "2022-04-24T14:54:14.361Z"
46094609
},
46104610
"docs/reference/language_codes.md": {
4611-
"atime": "2022-05-04T15:45:22.293Z",
4612-
"mtime": "2022-05-04T15:45:20.259Z",
4613-
"ctime": "2022-05-04T15:45:20.259Z",
4611+
"atime": "2022-05-14T17:20:19.910Z",
4612+
"mtime": "2022-05-14T17:20:22.195Z",
4613+
"ctime": "2022-05-14T17:20:22.195Z",
46144614
"birthtime": "2022-04-24T11:49:57.412Z"
46154615
},
46164616
"docs/reference/standardattributes.md": {

‎docs/tutorial/attributes.md‎

Lines changed: 206 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,208 @@
1-
attributes.md
1+
HTML 属性 Attributes
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tutorial/attributes.md">docs/tutorial/attributes.md</a> 文件，共建 HTML Tutorial 文档。
4+
HTML 属性提供有关 HTML 元素的附加信息。
5+
6+
## HTML 属性
7+
8+
* 所有 HTML 元素都可以有**属性**
9+
* 属性提供有关元素的**附加信息**
10+
* 属性总是在**开始标签**中指定
11+
* 属性通常以名称/值对的形式出现，例如：**name="value"**
12+
13+
## href 属性
14+
15+
`<a>` 标签定义了一个超链接。 `href` 属性指定链接到的页面的 URL：
16+
17+
```html idoc:preview:iframe
18+
<a href="https://github.com/jaywcjlove/html-tutorial">访问教程源码</a>
19+
```
20+
21+
您将在我们的 [HTML 链接章节](./links.md) 中了解有关链接的更多信息。
22+
23+
## src 属性
24+
25+
`<img>` 标签用于在 HTML 页面中嵌入图像。 `src` 属性指定要显示的图像的路径：
26+
27+
```html idoc:preview:iframe
28+
<img src="../assets/chrome.svg" >
29+
```
30+
31+
有两种方法可以在 `src` 属性中指定 URL：
32+
33+
**1). 绝对 URL** - 指向托管在另一个网站上的外部图像的链接。 示例：`src="https://www.example.com/assets/chrome.svg"`。
34+
35+
**注意：** 外部图像可能受版权保护。 如果您没有获得使用许可，您可能违反了版权法。 此外，您无法控制外部图像； 它可以突然被删除或更改。
36+
37+
**2). 相对 URL** - 链接到网站内托管的图像。 此处，URL 不包含域名。 如果 URL 开头没有斜杠，则它将相对于当前页面。 示例：src="chrome.svg"。 如果 URL 以斜杠开头，它将与域相关。 示例：src="/assets/chrome.svg"。
38+
39+
**提示：** 几乎总是最好使用相对 URL。 如果您更改域，它们不会中断。
40+
41+
## 宽度 width 和高度 height 属性
42+
43+
`<img>` 标签还应该包含 `width` 和 `height` 属性，它们指定图像的宽度和高度（以像素为单位）：
44+
45+
```html idoc:preview:iframe
46+
<img
47+
src="../assets/chrome.svg"
48+
width="120"
49+
height="120"
50+
alt="谷歌浏览器">
51+
```
52+
53+
## 替代文本 alt 属性
54+
55+
如果由于某种原因无法显示图像，则 `<img>` 标记所需的 `alt` 属性指定图像的替代文本。 这可能是由于连接速度较慢，或者 `src` 属性中的错误，或者如果用户使用屏幕阅读器。
56+
57+
```html idoc:preview:iframe
58+
<img src="../assets/chrome.svg" alt="谷歌浏览器">
59+
```
60+
61+
看看如果我们尝试显示一个不存在的图像会发生什么：
62+
63+
```html idoc:preview:iframe
64+
<img src="../assets/chrome111.svg" alt="谷歌浏览器">
65+
```
66+
67+
您将在我们的 [HTML 图片章节](./images.md) 中了解有关图片的更多信息。
68+
69+
70+
## 样式 style 属性
71+
72+
`style` 属性用于为元素添加样式，例如颜色、字体、大小等。
73+
74+
```html idoc:preview:iframe
75+
<p style="color:red;">这是一个红色的段落。</p>
76+
```
77+
78+
您将在我们的 [HTML 样式章节](./styles.md) 中了解有关样式的更多信息。
79+
80+
## 语言 lang 属性
81+
82+
您应该始终在 `<html>` 标记中包含 `lang` 属性，以声明网页的语言。 这是为了帮助搜索引擎和浏览器。
83+
84+
以下示例将英语指定为语言：
85+
86+
```html
87+
<!DOCTYPE html>
88+
<html lang="en">
89+
<body>
90+
...
91+
</body>
92+
</html>
93+
```
94+
95+
国家代码也可以添加到 `lang` 属性中的语言代码中。 因此，前两个字符定义 HTML 页面的语言，后两个字符定义国家。
96+
97+
以下示例将 en 英语指定为语言，将 `CN` 指定为国家：
98+
99+
```html
100+
<!DOCTYPE html>
101+
<html lang="en-CN">
102+
<body>
103+
...
104+
</body>
105+
</html>
106+
```
107+
108+
您可以在我们的 [HTML 语言代码参考](../reference/language_codes.md) 中查看所有语言代码。
109+
110+
## 标题 title 属性
111+
112+
`title` 属性定义了一些关于元素的额外信息。
113+
114+
当您将鼠标悬停在元素上时，title 属性的值将显示为工具提示：
115+
116+
```html
117+
<p title="我是工具提示">这是一个段落。</p>
118+
```
119+
120+
```html idoc:preview:iframe
121+
<h2 title="我是标题">标题属性</h2>
122+
123+
<p title="我是工具提示">
124+
将鼠标悬停在此段落上，将标题属性显示为工具提示。
125+
</p>
126+
```
127+
128+
## 我们建议：始终使用小写属性
129+
130+
HTML 标准不需要小写的属性名称。
131+
132+
标题属性（和所有其他属性）可以用大写或小写写成，如 **title** 或 **TITLE**。
133+
134+
然而，W3C **建议** HTML 中的小写属性，并且**要求**小写属性用于更严格的文档类型，例如 XHTML。
135+
136+
在 W3Schools，我们总是使用小写的属性名称。
137+
138+
## 我们建议：始终引用属性值
139+
140+
HTML 标准不需要在属性值周围加上引号。
141+
142+
但是，W3C **建议** HTML 中使用引号，而 **要求** XHTML 等更严格的文档类型使用引号。
143+
144+
### 👍 正确:
145+
146+
```html
147+
<a href="https://github.com/jaywcjlove/html-tutorial">访问我们的 HTML 教程</a>
148+
```
149+
150+
### 👎 错误:
151+
152+
```html
153+
<a href=https://github.com/jaywcjlove/html-tutorial>访问我们的 HTML 教程</a>
154+
```
155+
<!--rehype:style=background-color: #ff00004d;-->
156+
157+
有时你必须使用引号。 此示例将无法正确显示 title 属性，因为它包含空格：
158+
159+
### 实例
160+
161+
```html
162+
<p title=关于 教程>
163+
```
164+
165+
```html idoc:preview:iframe
166+
<p title=关于 教程>
167+
您不能在属性值周围省略引号
168+
如果值包含空格。
169+
</p>
170+
171+
<p><b>
172+
如果将鼠标移到上面的段落上，
173+
您的浏览器只会显示标题中的第一个"关于"。
174+
</b></p>
175+
```
176+
177+
 At W3Schools we always use quotes around attribute values.
178+
179+
## 单引号还是双引号？
180+
181+
属性值周围的 `双引号` 在 HTML 中最常见，但也可以使用 `单引号`。
182+
183+
在某些情况下，当属性值本身包含`双引号` 时，需要使用 `单引号`：
184+
185+
```html
186+
<p title='这是 "标题" 内容'>
187+
```
188+
189+
或相反亦然：
190+
191+
```html
192+
<p title="这是 '标题' 内容">
193+
```
194+
195+
## 章节总结
196+
197+
* 所有 HTML 元素都可以有**属性**
198+
* `<a>` 的 `href` 属性指定链接指向的页面的 URL
199+
* `<img>`的`src`属性指定要显示的图片的路径
200+
* `<img>` 的 `width` 和 `height` 属性提供图片的尺寸信息
201+
* `<img>` 的 `alt` 属性为图像提供替代文本
202+
* `style` 属性用于为元素添加样式，例如颜色、字体、大小等
203+
* `<html>`标签的`lang`属性声明了网页的语言
204+
* `title` 属性定义了一些关于元素的额外信息
205+
206+
## HTML 属性参考
207+
208+
每个 HTML 元素的所有属性的完整列表在我们的：[HTML 属性参考](../reference/attributes.md) 中列出。

‎docs/tutorial/basic.md‎

Lines changed: 121 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,123 @@
1-
basic.md
1+
HTML 基础示例
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tutorial/basic.md">docs/tutorial/basic.md</a> 文件，共建 HTML Tutorial 文档。
4+
在本章中，我们将展示一些基本的 HTML 示例。
5+
6+
如果我们使用您尚未了解的标签，请不要担心。
7+
8+
## HTML 文档
9+
10+
所有 HTML 文档都必须以文档类型声明开头：[`<!DOCTYPE html>`](../tags/doctype.md)。
11+
12+
HTML 文档本身以 `<html>` 开头并以 `</html>` 结尾。
13+
14+
HTML 文档的可见部分位于 `<body>` 和 `</body>` 之间。
15+
16+
### 示例
17+
18+
```html idoc:preview:iframe
19+
<!DOCTYPE html>
20+
<html>
21+
<body>
22+
<h1>我的第一个标题</h1>
23+
<p>我的第一段落。</p>
24+
</body>
25+
</html>
26+
```
27+
28+
## \<!DOCTYPE> 声明
29+
30+
`<!DOCTYPE>` 声明表示文档类型，并帮助浏览器正确显示网页。
31+
32+
它只能出现一次，在页面顶部（在任何 HTML 标记之前）。
33+
34+
`<!DOCTYPE>` 声明不区分大小写。
35+
36+
HTML5 的 `<!DOCTYPE>` 声明是：
37+
38+
```html
39+
<!DOCTYPE html>
40+
```
41+
42+
## HTML 标题
43+
44+
HTML 标题是用 `<h1>` 到 `<h6>` 标签定义的。
45+
46+
`<h1>` 定义了最重要的标题。 `<h6>` 定义了最不重要的标题：
47+
48+
```html
49+
<h1>这是标题 1</h1>
50+
<h2>这是标题 2</h2>
51+
<h3>这是标题 3</h3>
52+
```
53+
54+
```html idoc:preview:iframe
55+
<h1>这是标题 1</h1>
56+
57+
<h2>这是标题 2</h2>
58+
59+
<h3>这是标题 3</h3>
60+
```
61+
62+
## HTML 段落
63+
64+
HTML 段落使用 `<p>` 标签定义：
65+
66+
```html
67+
<p>这是一个段落。</p>
68+
<p>这是另一段。</p>
69+
```
70+
71+
```html idoc:preview:iframe
72+
<p>这是一个段落。</p>
73+
<p>这是另一段。</p>
74+
```
75+
76+
## HTML 链接
77+
78+
HTML 链接使用 `<a>` 标签定义：
79+
80+
```html
81+
<a href="https://github.com/jaywcjlove/html-tutorial">这是一个链接</a>
82+
```
83+
84+
```html idoc:preview
85+
<a href="https://github.com/jaywcjlove/html-tutorial">这是一个链接</a>
86+
```
87+
88+
链接的目的地在 `href` 属性中指定。
89+
90+
属性用于提供有关 HTML 元素的附加信息。
91+
92+
您将在后面的章节中了解有关属性的更多信息。
93+
94+
## HTML 图像
95+
96+
HTML 图像使用 `<img>` 标签定义。
97+
98+
源文件 (`src`)、替代文本 (`alt`)、`width` 和 `height` 作为属性提供：
99+
100+
```html
101+
<img src="../assets/chrome.svg" alt="Chrome 浏览器" width="104" height="104">
102+
```
103+
104+
```html idoc:preview
105+
<img
106+
src="../assets/chrome.svg"
107+
alt="Chrome 浏览器"
108+
width="104"
109+
height="104"
110+
>
111+
```
112+
113+
## 如何查看 HTML 源代码？
114+
115+
您是否曾经看过一个网页并想知道“嘿！他们是怎么做到的？”
116+
117+
### 查看 HTML 源代码：
118+
119+
在 HTML 页面中单击鼠标右键，然后选择 `查看页面源代码`（在 Chrome 中）或 `查看源代码`（在 Edge 中），或在其他浏览器中类似。 这将打开一个包含页面 HTML 源代码的窗口。
120+
121+
### 检查一个 HTML 元素：
122+
123+
右键单击一个元素（或空白区域），然后选择 `检查` 或 `检查元素` 以查看由哪些元素组成（您将看到 HTML 和 CSS）。 您还可以在打开的 `元素` 或 `样式` 面板中即时编辑 HTML 或 CSS。

0 commit comments

Comments
 (0)