HTML 中的 div 標籤-html教學-PHP中文網

div 標籤的用途

div 標籤 HTML 範例

範例#3

結論

首頁

web前端

html教學

HTML 中的 div 標籤

PHPz

Sep 04, 2024 pm 04:26 PM

html html5 HTML Tutorial HTML Properties HTML tags

在本文中，我們將了解 HTML 中的 div 標籤。 HTML 有兩個重要的標籤，用於一組許多其他 HTML 標籤和內容，一個是

。另一個標籤是標籤。 span標籤用於一行中的一組內容和標籤。與樣式和不同標籤的垂直分組是透過span標籤進行的。 div 標籤是一種劃分標籤，用於許多 HTML 標籤，例如網頁上的表格、清單和段落。大多數 div 標籤使用一個空網頁來分區或為內容或 HTML 標籤建立一個部分。為某些特殊內容的 div 標籤進行特定的設計很有用，因為它不會影響 div 版面和任何 CSS 設計。

文法：

各種 HTML 標籤都有開始和結束標籤，例如：

;
; 表>

div 標籤必須開啟

並關閉

標籤。必需的 HTML 標籤和內容放在 div 標籤內。

<div>
Content of Div tag in HTML
</div>

登入後複製

為了製作所需資料或內容的部分，在容器中使用多個 div 標籤。例如：頁首、頁尾、導覽列、表格、圖像、文字等。我們可以使用 CSS 設計不同的 div 標籤，並使用 JavaScript 輕鬆套用條件。

如何

標籤可以在 HTML 中使用嗎？

div標籤可以將各種HTML標籤和文字儲存在一起。

您可以看到使用 div 標籤和不使用 div 標籤的範例。

a.使用

HTML 中的標籤

代碼：

<html>
<head>
<title>how to work div</title>
<style type=text/css>
.one{
background-color:orange;
}
.two{
background-color:yellow;
}
</style>
</head>
<body>
<div class="one" >
<h1> Content1 of div tag in Html </h1>
<p>   Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used in empty web page to partition or make section for content or HTML tags. </p>
</div>
<div class="two">
<h1> Content2 of div tag in Html </h1>
<p>   To make section of required data or content multiple div tags are used in container.
Example: header, footer, navigation bar, table, images, texts etc. </p>
</div>
</body>
</html>

登入後複製

輸出：

HTML 中的 div 標籤

說明：

上面的考試是在 HTML 中使用 div 標籤。第一個 div 為橘色，第二個 div 為黃色。
Div 包含標題標籤和段落。兩個div標籤劃分了不同內容的容器。

b.不使用

HTML 中的標籤

代碼：

<html>
<head>
<title>how to work div</title>
<style type=text/css>
p{
background-color:orange;
}
h1{
background-color:yellow;
}
</style>
</head>
<body>
<h1> Content1 of div tag in Html </h1>
<p>   Div tag is used for a group many HTML tags like table, list, a paragraph on a web page.
Mostly div tag used in empty web page to partition or make section for content or HTML tags. </p>
<h1> Content2 of div tag in Html </h1>
<p>   To make section of required data or content multiple div tags are used in container.
Example: header, footer, navigation bar, table, images, texts etc.</p>
</body>
</html>

登入後複製

輸出：

HTML 中的 div 標籤

說明：

上面的範例沒有在 HTML 中使用 div 標籤。標題及其段落位於不同的部分。
標題為黃色，段落為橙色。所有標題及其內容段落都有不同的大小。

div 標籤的用途

以下是div標籤的用途和需求：

div 標籤主要用於將標籤和圖像及其描述等元素進行分組。在網頁中使用許多 HTML 標籤來建立內容。所有 HTML 標籤都是不同的，具有特定的意義。 div 標籤組合了所有必要的 HTML 標籤。
div 標籤表示分割標籤。在網頁中，頁首、頁尾、導覽列等許多實體，div 標籤將許多部分放在一個容器中，使所有部分都變得優雅。
它可以輕鬆地使用 CSS 進行樣式設定並使用 JavaScript 進行操作。它不會影響上下文和佈局。使用 div 標籤的 Steady 樣式很簡單。
div 標籤對於網頁來說非常有用，它看起來很有吸引力並且可以讓使用者理解內容。
消除 Web 開發人員程式的複雜度； div 標籤很有用。

div 標籤 HTML 範例

下面給出的是提到的例子：

範例#1

這個例子是一個帶有類別的div標籤。例如，左、中、右階層。 div 是垂直放置的容器。但是我們可以在一個節中放置不同的div作為右側、左側或中間；這對於內容的位置管理很有用。

代碼：

<html>
<head>
<title> Example1 </title>
<style type=text/css>
.leftdiv
{
float: left;
background-color:blue;
}
.middlediv
{
float: left;
background-color:green;
}
.rightdiv
{
float: left;
background-color:black;
}
div{
padding : 1%;
color: white;
background-color:grey;
width: 28%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="leftdiv">
<h2> Left Side </h2>
<p>Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used for a web page to partition or make a section for content or HTML tags.
To make a particular design for some special content div tag is useful because it does not
affect the div layout and any CSS design.
</p>
</div>
<div class="middlediv">
<h2> Middle Side </h2>
<p>Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used in empty web page to partition or make section for content or HTML tags.
To make particular design for some special content div tag is useful because it is does not
affect on the div layout and any CSS design.
</p>
</div>
<div class="rightdiv">
<h2> Right Side </h2>
<p>Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used for a web page to partition or make a section for content or HTML tags.
To make particular design for some special content div tag is useful because it is does not
affect on the div layout and any CSS design.
</p>
</p>
</div>
</body>
</html>

登入後複製

輸出：

HTML 中的 div 標籤

範例#2

表格的 div 標籤。

在此範例中，我們為表格使用了 div 標籤。有時表格佈局會發生變化，但表格放入 div 標籤後不會影響佈局。

代碼：

<html>
<head>
<title> Example2 </title>
<style type=text/css>
div{
color:white;
background-color:grey;
border:solid black;
}
tr, td{
border: 1px solid grey;
padding-top: 10px;
padding-bottom: 10px;
}
th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
}
</style>
</head>
<body>
<div>
<h2> Student Information </h2>
<table>
<tr>
<th>student name</th>
<th>specialisation</th>
<th>city</th>
</tr>
<tr>
<td>vishu</td>
<td>computer and IT </td>
<td>kolkatta</td>
</tr>
<tr>
<td>john</td>
<td> graphics design</td>
<td> delhi</td>
</tr>
<tr>
<td>nagma</td>
<td> mechatronics</td>
<td>nagpur</td>
</tr>
<tr>
<td>erfan </td>
<td>animation video </td>
<td>mumbai</td>
</tr>
<tr>
<td> swadut </td>
<td> electronics</td>
<td> pune</td>
</tr>
<tr>
<td> manasi </td>
<td> CS </td>
<td> pune</td>
</tr>
</table>
</div>
</body>
</html>

登入後複製

輸出：

HTML 中的 div 標籤

範例#3

有樣式的 div 範例。

這是一個使用 CSS 樣式的簡單範例。

代碼：

<html>
<head>
<title> Example3 </title>
<style>
div{
height:300px;
width:500px;
color:white;
border:1px solid;
background-color:grey;
}
</style>
</head>
<body>
<center>
<div>
<caption>
<h2> div tags in HTML</h3>
</caption>
<h3>
Div tag is division tag used for group many HTML tag like table, list, paragraph in web page.
</h3>
</div>
</center>
</body>
</html>

登入後複製

輸出：

HTML 中的 div 標籤