HTML 标题
# HTML 标题
# 1. HTML标题
- 定义：HTML 标题（Heading）是通过
<h1>-<h6>标签进行定义的。 - 等级：
<h1>定义最大的标题，<h6>定义最小的标题。标题标签用于表示文档结构，帮助搜索引擎和用户理解页面内容。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
效果图：
- 注意事项：标题标签应根据内容的重要性和层次结构进行合理使用，不应仅仅为了调整文字大小而使用标题标签。标题标签对 SEO 也有重要影响。
# 2. HTML水平线
- 定义：
<hr>标签在 HTML 页面中创建水平线，用于分隔内容。 - 用途：
<hr>元素可用于分隔内容，使页面结构更清晰。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- 注意事项：
<hr>标签是自闭合标签，不需要结束标签。可以通过 CSS 样式对水平线进行自定义，如设置颜色、宽度、高度等。
# 3. HTML 注释
- 定义：可以将注释插入 HTML 代码中，提高代码的可读性和维护性。浏览器会忽略注释，不会显示它们。
- 语法：注释写法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<!--这是一个注释，注释在浏览器中不会显示-->
<p>这是一个段落</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
效果图：
- 注意事项：注释可以包含多行内容，但不能嵌套注释。合理使用注释可以帮助团队成员理解代码，但过多的注释可能会使代码显得杂乱。应保持注释简洁明了，描述代码的目的和逻辑。
# 4. HTML 标题、水平线和注释的综合应用
综合运用 HTML 标题、水平线和注释可以使页面结构清晰，代码易于维护。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<!-- 页面主标题 -->
<h1>菜鸟教程</h1>
<!-- 段落说明 -->
<p>欢迎来到菜鸟教程！这里有丰富的学习资源和教程。</p>
<!-- 内容分隔线 -->
<hr />
<!-- 小节标题 -->
<h2>HTML 基础</h2>
<p>HTML 是构建网页的基础语言...</p>
<!-- 另一个内容分隔线 -->
<hr />
<!-- 小节标题 -->
<h2>CSS 基础</h2>
<p>CSS 用于控制网页的外观样式...</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
通过合理使用这些标签，可以创建结构清晰、内容易读的网页，提升用户体验和代码可维护性。
编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05