HTML 区块
# HTML 区块
在 HTML 中，通过 <div> 和 <span> 标签可以将元素组合起来，这有助于为页面元素应用样式和进行布局。以下是对这些标签及其用法的详细说明。
# 1. HTML <div> 和 <span>
<div>标签用于定义块级元素的容器。<span>标签用于定义内联元素的容器。
# 2. HTML 区块元素
块级元素在浏览器中显示时通常会以新行来开始和结束。常见的块级元素有：
<h1>, <p>, <ul>, <table>
1
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块级元素示例</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
<table border="1">
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
</tr>
</table>
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 3. HTML 内联元素
内联元素在显示时通常不会以新行开始。常见的内联元素有：
<b>, <td>, <a>, <img>
1
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联元素示例</title>
</head>
<body>
<p>这是一个 <b>加粗</b> 的文本。</p>
<p>这是一个 <a href="https://www.example.com">链接</a>。</p>
<img src="example.jpg" alt="示例图片">
</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 <div> 元素
<div>元素是块级元素，可用于组合其他 HTML 元素的容器。<div>元素没有特定的含义，但由于它是块级元素，浏览器会在其前后显示折行。- 与 CSS 一同使用时，
<div>元素可用于对大的内容块设置样式属性。 - 常用于文档布局，取代了使用表格定义布局的老式方法。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div 元素示例</title>
<style>
.container {
border: 1px solid #000;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 5. HTML <span> 元素
<span>元素是内联元素，用作文本的容器。<span>元素没有特定的含义。- 与 CSS 一同使用时，
<span>元素可用于为部分文本设置样式属性。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>span 元素示例</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>这是一个普通文本中的 <span class="highlight">高亮文本</span>。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 6. HTML 分组标签
以下是 <div> 和 <span> 标签的常见用途：
- 布局：使用
<div>标签创建页面的主要部分或容器，例如页头、导航栏、内容区和页脚。 - 样式：使用
<div>或<span>标签与 CSS 结合，为特定部分应用样式。 - 交互：使用
<div>或<span>标签作为 JavaScript 的目标元素，实现动态交互。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 分组标签示例</title>
<style>
.header, .footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
.nav, .content {
margin: 10px;
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="header">
<h1>页面标题</h1>
</div>
<div class="nav">
<p>导航栏</p>
</div>
<div class="content">
<p>主要内容区</p>
<p>这是一个普通文本中的 <span style="color: red;">高亮文本</span>。</p>
</div>
<div class="footer">
<p>页脚信息</p>
</div>
</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
31
32
33
34
35
36
37
38
39
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
31
32
33
34
35
36
37
38
39
编辑此页 (opens new window)