資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究HTML 標籤 <div> 和 <span> 之間有什麼區別？
我們可以使用 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>
更新於: 04-Oct-2023
2K+ 次檢視
廣告