HTML 简介
# HTML 简介
HTML（超文本标记语言）是构建网页的标准标记语言。以下是一个简单的 HTML 示例及其详细解释。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<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
# 1. 实例解析
HTML 文档由多个元素组成，每个元素都有特定的用途和属性。以下是对上述示例中各个元素的详细解释：
- <!DOCTYPE html> // 声明文档为 HTML5 标准
- <html> // HTML 文档的根元素，包含所有其他元素
- <head> // 包含文档的元数据，如字符编码和标题
- <meta charset="utf-8"> // 定义文档的字符编码为 UTF-8，确保文档能够正确显示各种字符
- <title> // 定义文档的标题，显示在浏览器标签栏上
- <body> // 包含网页的可见内容
- <h1> // 定义一级标题，通常用于页面的主标题
- <p> // 定义一个段落，用于分隔文本内容
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
注： 在浏览器的页面上使用键盘上的 F12 按键开启调试模式，可以查看网页的 HTML 结构和组成标签。
# 2. HTML 网页结构
一个标准的 HTML 文档通常包括以下部分：
<!DOCTYPE html>
<html>
<head>
<!-- 元数据 -->
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 各部分说明：
- 文档类型声明:
<!DOCTYPE html>告诉浏览器使用 HTML5 标准解析文档。 - HTML 元素:
<html>是整个 HTML 文档的根元素。 - 头部元素:
<head>包含文档的元数据，如字符编码、标题、样式和脚本。 - 主体元素:
<body>包含网页的可见内容，如文本、图像、链接等。
# 3. <!DOCTYPE> 声明
<!DOCTYPE> 声明有助于浏览器正确显示网页内容。不同版本的 HTML 需要不同的声明，HTML5 的声明格式如下：
<!DOCTYPE html>
1
这声明不区分大小写，以下形式也都是有效的：
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
1
2
3
2
3
# 4. 中文编码
在大部分浏览器中，直接输出中文可能会出现中文乱码的情况，因此需要在文档头部声明字符编码。通常使用 UTF-8 或 GBK 编码。
# UTF-8 编码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<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
# GBK 编码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<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
# 总结
- 文档类型声明: 使用
<!DOCTYPE html>声明 HTML5 文档。 - HTML 元素:
<html>是 HTML 文档的根元素。 - 头部元素:
<head>包含文档的元数据，如字符编码和标题。 - 字符编码: 使用
<meta charset="utf-8">声明文档的字符编码。 - 标题元素:
<title>定义网页的标题。 - 主体元素:
<body>包含网页的可见内容。 - 标题和段落: 使用
<h1>定义一级标题，使用<p>定义段落。
这些基本的 HTML 元素和声明是构建任何网页的基础。理解这些基础知识，有助于你创建和维护有效的 HTML 文档。
编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05