什么是HTML？
HTML（超文本标记语言）是构建网页的基础，用于创建网页的结构。
案例：简单的HTML页面
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页!</h1>
<p>这是我的第一个HTML页面。</p>
</body>
</html>
|
HTML元素及标签
HTML由元素和标签组成。标签通常是成对出现的，比如<h1>和</h1>。
案例：使用不同类型的标签
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>标签示例</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<p>这是一个段落。</p>
<a href="https://www.example.com">这是一个链接</a>
</body>
</html>
|
HTML属性
标签可以有属性，属性提供了关于元素的附加信息。
案例：使用属性
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>属性示例</title>
</head>
<body>
<img src="image.jpg" alt="描述图片" width="300">
<a href="https://www.example.com" target="_blank">打开网站</a>
</body>
</html>
|
列表
HTML 支持有序列表和无序列表。
案例：列表示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>列表示例</title>
</head>
<body>
<h3>无序列表</h3>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
</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
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>表格示例</title>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
</body>
</html>
|
表单
表单用于获取用户输入。
案例：创建一个简单表单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>表单示例</title>
</head>
<body>
<form action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
|
图片和多媒体
可以在网页中嵌入图片和视频。
案例：插入图片和视频
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>多媒体示例</title>
</head>
<body>
<h2>插入图片</h2>
<img src="example.jpg" alt="示例图片" width="400">
<h2>插入视频</h2>
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
</body>
</html>
|
结尾
本文介绍了HTML的基础知识，包括元素、属性、列表、表格、表单及多媒体。通过实际案例，你可以轻松掌握这些内容。继续探索HTML的更多功能，构建更复杂和有趣的网页！
