div Tag dalam HTML-html tutorial-php.cn

Dalam artikel ini, kita akan melihat tentang Tag div dalam HTML. HTML mempunyai dua teg penting yang digunakan untuk kumpulan banyak teg HTML lain dan kandungan Satu ialah

tag yang lain ialah tag. Teg span digunakan untuk sekumpulan kandungan dan teg dalam satu baris. Pengumpulan secara menegak dengan gaya dan teg yang berbeza berlaku dengan teg span. Teg div ialah teg pembahagian yang digunakan untuk banyak teg HTML seperti jadual, senarai dan perenggan pada halaman web. Kebanyakan teg div menggunakan halaman web kosong untuk membahagikan atau membuat bahagian untuk kandungan atau teg HTML. Untuk membuat reka bentuk tertentu untuk beberapa teg div kandungan khas adalah berguna kerana ia tidak menjejaskan reka letak div dan sebarang reka bentuk CSS.

Sintaks:

Pelbagai teg HTML mempunyai teg pembukaan dan penutup seperti:

Teg div wajib membuka

dan menutup

tag. Teg HTML dan kandungan yang diperlukan diletakkan di dalam teg div.

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

Salin selepas log masuk

Untuk menjadikan bahagian data atau kandungan yang diperlukan berbilang teg div digunakan dalam bekas. Contoh: pengepala, pengaki, bar navigasi, jadual, imej, teks, dll. Teg div yang berbeza boleh kami reka bentuk secara berbeza menggunakan CSS dan menggunakan syarat dengan mudah menggunakan JavaScript.

Bagaimana
Teg Berfungsi Dalam HTML?

Teg div boleh memuatkan pelbagai teg HTML dan teks bersama-sama.

Anda boleh melihat contoh menggunakan tag div dan tanpa tag div.

a. Menggunakan
teg dalam HTML

Kod:

<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>

Salin selepas log masuk

Output:

div Tag dalam HTML

Penjelasan:

Peperiksaan di atas menggunakan teg div dalam HTML. Div pertama berwarna oren dan div kedua berwarna kuning.
Div mengandungi teg pengepala dan perenggan bersama-sama. Dua tag div membahagikan bekas dengan kandungan berbeza.

b. Tanpa menggunakan
teg dalam HTML

Kod:

<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>

Salin selepas log masuk

Output:

div Tag dalam HTML

Penjelasan:

Contoh di atas adalah tanpa menggunakan teg div dalam HTML. Pengepala dan perenggannya berada dalam bahagian yang berbeza.
Tajuk berwarna kuning, dan perenggan berwarna oren. Semua tajuk dan perenggan kandungannya mempunyai saiz yang berbeza.

Penggunaan Tag div

Di bawah ialah kegunaan dan keperluan teg div:

Teg div digunakan terutamanya untuk mengumpulkan teg dan elemen seperti imej dan penerangannya. Dalam halaman web menggunakan banyak tag HTML untuk mencipta kandungan. Semua tag HTML adalah berbeza dengan makna tertentu. teg div menggabungkan semua teg HTML yang diperlukan.
Teg div bermaksud teg pembahagian. Dalam halaman web, banyak entiti seperti pengepala, pengaki, bar navigasi, dll. teg div menjadikan banyak bahagian dalam satu bekas untuk menjadikan semua bahagian elegan.
Ia mudah digunakan untuk penggayaan menggunakan CSS dan memanipulasi dengan JavaScript. Ia tidak menjejaskan konteks serta reka letak. Gaya Steady menggunakan tag div adalah mudah.
Teg div berguna untuk halaman web kelihatan menarik dan memahami kandungan untuk pengguna.
Alih keluar kerumitan program untuk pembangun web; tag div berguna.

Contoh HTML Tag div

Diberikan di bawah adalah contoh yang dinyatakan:

Contoh #1

Contoh ini ialah teg div dengan kelas. Contohnya, kelas kiri, tengah dan kanan. div ialah bekas masuk secara menegak. Tetapi kita boleh meletakkan div berbeza dalam satu bahagian sebagai bahagian kanan, kiri atau tengah; ini berguna untuk pengurusan kedudukan untuk kandungan.

Kod:

<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>

Salin selepas log masuk

Output:

div Tag dalam HTML

Contoh #2

teg div untuk jadual.

Dalam contoh ini, kami menggunakan tag div untuk jadual. Kadangkala reka letak jadual berubah, tetapi jadual dimasukkan ke dalam teg div kemudian tidak terjejas pada reka letak.

Kod:

<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>

Salin selepas log masuk

Output:

div Tag dalam HTML

Contoh #3

contoh div dengan gaya.

Ini ialah contoh mudah menggunakan gaya CSS.

Kod:

<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>

Salin selepas log masuk

Output:

div Tag dalam HTML

Kesimpulan

Teg div ialah teg pembahagian untuk membuat partition pada halaman web. Ini adalah satu bekas kosong untuk mengandungi teg dan kandungan HTML. Menggunakan aplikasi web tag div kelihatan kemas, bersih dan menarik. Aplikasi web lebih mudah difahami oleh pengguna dan pembangun.

Atas ialah kandungan terperinci div Tag dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!