Tag ng HTML <div>

Paglilingkod at paggamit

<div> Ang tagapagbubukod ay tinukoy ang paghahati o bahagi ng HTML dokumento (paggawa ng pagsasapit o pagsasalita, division/section).

<div> Ang tagapagbubukod ay maaaring hatiin ang dokumento sa mga malayang, magkakaibang bahagi. Maaaring ito ay magamit bilang matinding kasangkapang pangorganisasyon, at walang anyo ng format na nakatali dito.

Anumang uri ng nilalaman ay maaaring ilagay <div> sa loob ng tag!<div> mga tag ay magagamit bilang konteyner ng HTML na elemento, pagkatapos ay gamitin ang CSS upang itakda ang estilo o gamitin ang JavaScript upang gawin ang operasyon.

Kung magagamit ang tag id o class upang markahan <div>kaya ang epekto ng tag na ito ay mas mahusay na. class o id Attribute, maaaring madaling itakda ang <div> tag upang itakda ang estilo.

Bilin:Sa karamihan ng kaso, ang browser ay palaging <div> maglagay ng tabi ang tabi sa harap at likod ng elemento.

Paggamit

<div> ito ay isang bloke na elemento. Ibig sabihin, ang nilalaman nito ay awtomatikong magsimula ng bagong linya. Totoo na, ang pagpalit ng linya ay <div> ang nakalipas na formatong walang patotoo. Maaari nang gamitin ang <div> ng class o id magdagdag ng dagdag na estilo.

Huwag na sa bawat <div> walang pangalawang kalakip.

Maaari nang magdagdag ng class o id sa parehong <div> Paggamit ng elemento class o id Ang mga attribute, ngunit mas madalas lamang ay ginagamit isa lamang. Ang pangunahing pagkakaiba nito ay, ang class ay ginagamit para sa grupo ng elemento (katulad na elemento, o pwedeng maunawaan bilang isang uri ng elemento), habang ang id ay ginagamit para sa pagkilalan ng isang tanging elemento.

Para sa karagdagang impormasyon:

Tuturo ng HTML:HTML 块元素和行内元素

Tuturo ng HTML:HTML 布局

Manwal ng HTML DOM:Objeto ng Div

Mga halimbawa

Ang bahagi ng dokumento na gumagamit ng CSS upang itakda ang estilo ng <div>:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Ang pamagat sa loob ng div na ito</h2>
  <p>Ang teksto sa loob ng div na ito.</p>
</div>
</body>
</html>

親自試試

Mga pag-aaral ng kaso

<body>
 <h1>Bagong Website</h1>
  <p>Ang ilang teksto. Ang ilang teksto. Ang ilang teksto...</p>
  ...
 <div class="news">
  <h2>Topik ng Balita 1</h2>
  <p>Ang ilang teksto. Ang ilang teksto. Ang ilang teksto...</p>
  ...
</div>
 <div class="news">
  <h2>Topik ng Balita 2</h2>
  <p>Ang ilang teksto. Ang ilang teksto. Ang ilang teksto...</p>
  ...
 </div>
 ...
</body>

Mga halimbawa ng paliwanag

Tulad ng inyong nakikita, ang HTML na ito ay gumagamit ng istraktura ng website ng balita. Bawat div ay pinagsama-sama ang pamagat at abstrak ng bawat balita, ibig sabihin, ang div ay nagdagdag ng karagdagang straktura sa dokumento. Samantala, dahil ang mga div ay sa parehong uri ng elemento, maaari nang gamitin ang class="news" upang kilalanin ang mga div, kung saan ito ay nagdagdag ng magandang kahulugan sa div at madaling gamitin ang estilo upang formatuhin ang div, kaya walang pangalawang kalakip.

提示：如需更深入地學習 class 和 id 的用法，請讀《W3school 的結構化標記》這一章中 div、id 和其他助手 這一節。

全局屬性

<div> 標籤還支持 HTML 中的全局屬性。

事件屬性

<div> 標籤還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <div> 元素：

div {
  display: block;
}

親自試試

瀏覽器支持

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