Skip to content

Commit 736b5ea

Browse files
jaywcjlovejaywcjlove
committed
doc: add <head> <h1~6> tag document.
1 parent ded75f2 commit 736b5ea

File tree

3 files changed

+259
-5
lines changed

3 files changed

+259
-5
lines changed

‎docs/tags/base.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ HTML \<base> 标签
99

1010
```html idoc:preview:iframe
1111
<head>
12-
  <base href="https://wangchujiang.com/" target="_blank">
12+
<base href="https://wangchujiang.com/" target="_blank">
1313
</head>
1414
<body>
1515
<img src="html-tutorial/assets/chrome.svg" width="24" height="39" alt="chrome"> 请注意，我们只为图像指定了一个相对地址。 由于我们在 head 部分指定了基本 URL，浏览器将在“https://wangchujiang.com/html-tutorial/assets/chrome.svg”中查找图像。

‎docs/tags/head.md‎

Lines changed: 106 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,108 @@
1-
head.md
1+
HTML \<head> Tag
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/head.md">docs/tags/head.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
一个简单的 HTML 文档，在 head 部分带有 [\<title>](./title.md) 标记：
7+
8+
```html idoc:preview:iframe
9+
<!DOCTYPE html>
10+
<html lang="en">
11+
<head>
12+
<title>Title of the document</title>
13+
</head>
14+
<body>
15+
<h1>This is a heading</h1>
16+
<p>This is a paragraph.</p>
17+
</body>
18+
</html>
19+
```
20+
21+
## 定义和用法
22+
23+
`<head>` 元素是元数据（关于数据的数据）的容器，位于 [\<html>](./html.md) 标签和 [\<body>](./body.md) 标签之间。
24+
25+
元数据是关于 HTML 文档的数据。 不显示元数据。
26+
27+
元数据通常定义文档标题、字符集、样式、脚本和其他元信息。
28+
29+
以下元素可以进入 `<head>` 元素：
30+
31+
* [\<title>](./title.md) （每个 HTML 文档都需要）
32+
* [\<style>](./style.md)
33+
* [\<base>](./base.md)
34+
* [\<link>](./link.md)
35+
* [\<meta>](./meta.md)
36+
* [\<script>](./script.md)
37+
* [\<noscript>](./noscript.md)
38+
39+
## 浏览器支持
40+
41+
| Element | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
42+
| ----- | --- | --- | --- | --- | --- |
43+
| \<head> | Yes | Yes | Yes | Yes | Yes |
44+
45+
## 全局属性
46+
47+
`<head>` 标签支持 HTML 中的[全局属性](../reference/standardattributes.md)。
48+
49+
## 更多示例
50+
51+
[\<base>](./base.md) 标记（指定页面上所有链接的默认 URL 和目标）位于 \<head> 内：
52+
53+
```html idoc:preview:iframe
54+
<html>
55+
<head>
56+
<base href="https://wangchujiang.com/" target="_blank">
57+
</head>
58+
<body>
59+
<img src="html-tutorial/assets/chrome.svg" width="24" height="39" alt="chrome">
60+
<a href="html-tutorial/base.html">HTML base Tag</a>
61+
</body>
62+
</html>
63+
```
64+
65+
[\<style>](./style.md) 标记（将样式信息添加到页面）进入 \<head>：
66+
67+
```html idoc:preview:iframe
68+
<html>
69+
<head>
70+
<style>
71+
h1 {color:red;}
72+
p {color:blue;}
73+
</style>
74+
</head>
75+
<body>
76+
<h1>A heading</h1>
77+
<p>A paragraph.</p>
78+
</body>
79+
</html>
80+
```
81+
82+
[\<link>](./link.md) 标记（链接到外部样式表）进入 \<head>：
83+
84+
```html idoc:preview:iframe
85+
<html>
86+
<head>
87+
<link rel="stylesheet" type="text/css" href="styles.css">
88+
</head>
89+
<body>
90+
<h1>I am formatted with a linked style sheet</h1>
91+
<p>Me too!</p>
92+
</body>
93+
</html>
94+
```
95+
96+
## 相关页面
97+
98+
HTML tutorial: [HTML Head](../tutorial/head.md)
99+
100+
## 默认 CSS 设置
101+
102+
大多数浏览器将显示具有以下默认值的 `<head>` 元素：
103+
104+
```css
105+
head {
106+
display: none;
107+
}
108+
```

‎docs/tags/hn.md‎

Lines changed: 152 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,154 @@
1-
hn.md
1+
HTML \<h1> to \<h6> Tags
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/hn.md">docs/tags/hn.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
六个不同的 HTML 标题：
7+
8+
```html idoc:preview
9+
<h1>这是标题 1</h1>
10+
<h2>这是标题 2</h2>
11+
<h3>这是标题 3</h3>
12+
<h4>这是标题 4</h4>
13+
<h5>这是标题 5</h5>
14+
<h6>这是标题 6</h6>
15+
```
16+
<!--rehype:style=min-height: 350px;-->
17+
18+
## 定义和用法
19+
20+
`<h1>` 到 `<h6>` 标签用于定义 HTML 标题。
21+
22+
`<h1>` 定义了最重要的标题。 `<h6>` 定义了最不重要的标题。
23+
24+
**注意：** 每页只使用一个 `<h1>` - 这应该代表整个页面的主要标题/主题。 此外，不要跳过标题级别 - 从 `<h1>` 开始，然后使用 `<h2>`，依此类推。
25+
26+
## 浏览器支持
27+
28+
| Element | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
29+
| ----- | --- | --- | --- | --- | --- |
30+
| \<h1> - \<h6> | Yes | Yes | Yes | Yes | Yes |
31+
32+
## 全局属性
33+
34+
`<h1>` ~ `<h6>` 标签支持 HTML 中的[全局属性](../reference/standardattributes.md)。
35+
36+
## 事件属性
37+
38+
`<h1>` ~ `<h6>` 标签支持 HTML 中的[事件属性](../reference/eventattributes.md)。
39+
40+
## 更多示例
41+
42+
设置标题的背景颜色和文本颜色（使用 CSS）：
43+
44+
```html idoc:preview
45+
<h1 style="background-color:DodgerBlue;">Hello World</h1>
46+
<h2 style="color:Tomato;">Hello World</h2>
47+
```
48+
<!--rehype:style=min-height: 190px;-->
49+
50+
设置标题的对齐方式（使用 CSS）：
51+
52+
```html idoc:preview
53+
<h1 style="text-align:center">这是标题 1</h1>
54+
<h2 style="text-align:left">这是标题 2</h2>
55+
<h3 style="text-align:right">这是标题 3</h3>
56+
<h4 style="text-align:justify">这是标题 4</h4>
57+
```
58+
<!--rehype:style=min-height: 290px;-->
59+
60+
## 相关页面
61+
62+
HTML tutorial: [HTML Headings](../tutorial/headings.md)
63+
64+
## 默认 CSS 设置
65+
66+
大多数浏览器将显示具有以下默认值的 `<h1>` 元素：
67+
68+
```css
69+
h1 {
70+
  display: block;
71+
  font-size: 2em;
72+
  margin-top: 0.67em;
73+
  margin-bottom: 0.67em;
74+
  margin-left: 0;
75+
  margin-right: 0;
76+
  font-weight: bold;
77+
}
78+
```
79+
80+
大多数浏览器将显示具有以下默认值的 `<h2>` 元素：
81+
82+
```css
83+
h2 {
84+
  display: block;
85+
  font-size: 1.5em;
86+
  margin-top: 0.83em;
87+
  margin-bottom: 0.83em;
88+
  margin-left: 0;
89+
  margin-right: 0;
90+
  font-weight: bold;
91+
}
92+
```
93+
94+
大多数浏览器将显示具有以下默认值的 `<h3>` 元素：
95+
96+
```css
97+
h3 {
98+
  display: block;
99+
  font-size: 1.17em;
100+
  margin-top: 1em;
101+
  margin-bottom: 1em;
102+
  margin-left: 0;
103+
  margin-right: 0;
104+
  font-weight: bold;
105+
}
106+
```
107+
108+
大多数浏览器将显示具有以下默认值的 `<h4>` 元素：
109+
110+
```css
111+
h4 {
112+
  display: block;
113+
  font-size: 1em;
114+
  margin-top: 1.33em;
115+
  margin-bottom: 1.33em;
116+
  margin-left: 0;
117+
  margin-right: 0;
118+
  font-weight: bold;
119+
}
120+
```
121+
122+
大多数浏览器将显示具有以下默认值的 `<h5>` 元素：
123+
124+
```css
125+
h5 {
126+
  display: block;
127+
  font-size: .83em;
128+
  margin-top: 1.67em;
129+
  margin-bottom: 1.67em;
130+
  margin-left: 0;
131+
  margin-right: 0;
132+
  font-weight: bold;
133+
}
134+
```
135+
136+
大多数浏览器将显示具有以下默认值的 `<h6>` 元素：
137+
138+
```css
139+
h6 {
140+
  display: block;
141+
  font-size: .67em;
142+
  margin-top: 2.33em;
143+
  margin-bottom: 2.33em;
144+
  margin-left: 0;
145+
  margin-right: 0;
146+
  font-weight: bold;
147+
}
148+
```
149+
150+
[1]: ../assets/chrome.svg
151+
[2]: ../assets/edge.svg
152+
[3]: ../assets/firefox.svg
153+
[4]: ../assets/safari.svg
154+
[5]: ../assets/opera.svg

0 commit comments

Comments
 (0)