Tanda <div> HTML

Pengartian dan penggunaan

<div> Label menentukan pemecahan atau bahagian (division/section) dalam dokumen HTML.

<div> Label boleh memecah dokumen kepada bahagian yang berasingan dan berbeza. Ia boleh digunakan sebagai alat organisasi yang ketat tanpa menggabungkan apa-apa format.

Kandungan apa pun boleh diletakkan di <div> dalam tag!<div> tag boleh digunakan sebagai wadah elemen HTML, kemudian tetapkan gaya CSS atau operasi JavaScript.

jika digunakan id atau class untuk menandai <div>jika, tindakan tag akan lebih efektif. Dengan menggunakan class atau id Properti, boleh dengan mudah untuk <div> tetapkan gaya ke dalam tag.

Perhatian:Secara lalai, pelayar selalu <div> dengan menempatkan simbol baris baru di hadapan dan belakang elemen.

Penggunaan

<div> adalah elemen blok. Ini bermakna kandungannya akan mulai baris baru secara automatik. Sebenarnya, baris baris adalah <div> format wajah asal yang unik. Dapat dijalankan melalui <div> yang class atau id menambahkan gaya tambahan ekstra.

Tidak perlu untuk setiap <div> dengan demikian ada keuntungan yang di dapatkan dari hal ini.

Boleh ditambahkan kelas atau id kepada <div> Penerapan elemen class atau id Properti, tetapi kebanyakan situasi hanya mengguna pakai salah satu daripadanya. Perbezaan utamanya adalah, class digunakan untuk kumpulan elemen (elemen yang serupa, atau boleh diartikan seperti kelas elemen), sementara id digunakan untuk mengenali elemen tunggal yang unik.

Lihat juga:

Panduan HTML:HTML 块元素和行内元素

Panduan HTML:HTML 布局

Panduan HTML DOM:Objek Div

Contoh

Bagian <div> yang digunakan untuk tetapkan gaya CSS di dokumen:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Ini adalah judul di dalam elemen div</h2>
  <p>Ini adalah teks di dalam elemen div.</p>
</div>
</body>
</html>

亲自试一试

Kasus Analisis

<body>
 <h1>Laman Baru</h1>
  <p>Bahagian teks. Bahagian teks. Bahagian teks...</p>
  ...
 <div class="news">
  <h2>Berita Utama 1</h2>
  <p>Bahagian teks. Bahagian teks. Bahagian teks...</p>
  ...
</div>
 <div class="news">
  <h2>Berita Utama 2</h2>
  <p>Bahagian teks. Bahagian teks. Bahagian teks...</p>
  ...
 </div>
 ...
</body>

Penggambangan contoh

Sebagai yang anda lihat, bahagian HTML di atas menjalankan struktur laman berita. Setiap div di dalamnya menyatukan judul dan ringkasan berita, yang artinya, div menambah struktur tambahan bagi dokumen. Secara bersamaan, kerana div ini termasuk elemen yang sama, maka boleh digunakan class="news" untuk menandai div ini, hal ini tidak hanya menambah semantik yang sesuai bagi div, tetapi juga memudahkan untuk mengformat div menggunakan gaya, yang boleh disifatkan sebagai satu kali ganda.

提示：如需更深入地学习 class 和 id 的用法，请阅《W3school 的结构化标记》这一章中 div、id 和其他帮手 这一节。

全局属性

<div> 标签还支持 HTML 中的全局属性。

事件属性

<div> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <div> 元素：

div {
  display: block;
}

亲自试一试

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持