HTML 标签 div 和 span 有什么区别?
javascriptweb developmentfront end scripts
我们可以使用 DIV 和 SPAN 标签作为容器，因为它们都有自己的特色。两者都是 HTML5 标签。首先让我们通过示例详细讨论 DIV 标签。
DIV 标签
DIV 有助于分离文本、图像、导航栏等数据，我们还可以使用 DIV 标签创建特定部分，它由打开和关闭标签 <DIV> </DIV> 组成，如果我们想划分页面，打开和关闭标签都是必需的。
DIV 标签可以使用 CSS 进行样式设置或使用 JavaScript 进行操作，使用 class 或 id 属性可以轻松设置样式。任何类型的数据都可以放在 <div> 内标签。
示例
以下示例演示了 DIV 标签的使用 -
<!DOCTYPE html>
<html>
<head>
<style>
.logo {
margin: 10;
padding: 10;
box-sizing: border-box;
}
.header {
padding: 0 70px;
display: flex;
align-content: center;
margin-bottom: 20px;
color: crimson;
justify-content: space-between;
margin-top: 20px;
}
.list {
display: flex;
align-content: center;
justify-content: center;
gap: 50px;
list-style-type: none;
}
.list li a {
text-decoration: none;
font-size: 1.4rem;
color: blue;
}
</style>
</head>
<body>
<div class="header">
<h2 class="logo">TutorialsPoint</h2>
<ul class="list">
<li><a href="">Home</a></li>
<li><a href="">Courses</a></li>
<li><a href="">Q&A</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</body>
</html>
SPAN 标签
它是一个内联元素，用于借助 CSS 或 JavaScript 缩小内容部分。在块元素中，我们可以插入多个 span 标签。
它是一个内联元素，用于借助 CSS 或 JavaScript 缩小内容部分。在块元素中，我们可以插入多个 span 标签。
示例
以下是演示 SPAN 标签用法的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
max-width: 900px;
margin: 0 auto;
height: 100vh;
}
p {
font-size: 2.5rem;
}
.font-style {
font-style: italic;
}
.green {
color: green;
}
.blue {
color: blue;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<p>
Welcome To <span class="green">GREEN world</span> which gives fresh Air.
Welcome TO<span class="blue">BLUE world</span> Which gives fresh Water,
</p>
</body>
</html>
HTML 中 DIV 标签和 SPAN 标签的区别
下表区分了 HTML 中的 DIV 标签和 SPAN 标签 −
SPAN 标签 |
DIV 标签 |
|---|---|
SPAN 标签被称为内联级元素 |
DIV 标签被称为块级元素 |
SPAN 标签用于将内容的较小部分组合在一起。 |
DIV 标签用于将大内容组合在一起 |
SPAN 标签不是必需的嵌套 |
DIV 标签通常是嵌套的 |
示例
请考虑以下示例，该示例通过采用内联和块显示来演示 span 和 div 标签之间的区别 −
<!DOCTYPE html>
<html>
<head>
<title>DIV and SPAN</title>
<style>
div {
width: 400px;
border: 0.5px;
}
div.boxmodel {
width: 400px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
table,
th,
td {
border: 1px solid black;
}
img {
width: 400;
height: 280;
}
</style>
</head>
<body>
<div>
<h3 align="center">Course Information </h6>
<table align="center">
<tr>
<th>Courses</th>
<th>Room Numbers</th>
<th>Tutors</th>
</tr>
<tr>
<td rowspan="2">HTML</td>
<td>Room 1</td>
<td>MR.Ram</td>
</tr>
<tr>
<td>Room 2</td>
<td>MRS. Priya</td>
</tr>
<tr>
<td rowspan="2">JAVA</td>
<td>Room 3</td>
<td>Ms Manju</td>
</tr>
<tr>
<td>Room 4</td>
<td>MR.Hari</td>
</tr>
<tr>
<td colspan="3">These Course Belong to Software Training</td>
</tr>
</table>
</div>
<br>
<br>
<div class="boxmodel">
<table align="center">
<tr>
<th>Courses</th>
<th>Room Numbers</th>
<th>Tutors</th>
</tr>
<tr>
<td rowspan="2">HTML</td>
<td>Room 1</td>
<td>Mr. Ram</td>
</tr>
<tr>
<td>Room 2</td>
<td>MRS.Priya</td>
</tr>
<tr>
<td rowspan="2">JAVA</td>
<td>Room 3</td>
<td>Ms Manju</td>
</tr>
<tr>
<td>Room 4</td>
<td>Mr.Hari</td>
</tr>
<tr>
<td colspan="3">These Course Belong to Software Training</td>
</tr>
</table>
</div>
</body>
</html>
