HTML <div> Etiketi

Tanım ve Kullanım

<div> Etiket, HTML belgesindeki bölümleri veya bölümleri (bölüm veya bölümler, bölümler/sections) tanımlar.

<div> Etiket, belgeleri bağımsız ve farklı parçalara ayırabilir. Ağır düzenleme aracı olarak kullanılabilir ve herhangi bir biçimle ilişkilendirilmez.

任何类型的内容都可以放在 <div> <div> içerisine!

etiketi kullanılabilirse, HTML elementlerinin konteyneri olarak kullanılabilir ve CSS ile stillendirilebilir veya JavaScript ile işlem olabilir. id veya class ile <div>kullanarak, bu etiketin etkisi daha etkili hale gelir. class veya id özellikleri, <div> etiketiyle stil ayarlar.

Dikkat:varsayılan olarak, tarayıcı her zaman <div> elementin önüne veya arkasına bir satır atama işareti yerleştirilir.

kullanımı

<div> blok elementi. Bu, içeriğinin otomatik olarak yeni bir satıra başlamasını anlamına gelir. Aslında, satır atlamak <div> önceden var olan benzersiz biçimlendirme performansını sağlar. Bu, <div> için class veya id stiller uygulamak zorunda değilsiniz.

ekstra <div> sınıf veya id ekleyebilirsiniz, bu da belirli bir avantaj sağlar. Ancak, her birine ekstra stiller uygulamak zorunda olmanız gerekmez.

aynı <div> element uygulaması class veya id Özellikler, ancak daha yaygın olarak sadece birini uygulamak daha yaygındır. Bu ikisinin ana farkı, class, benzer elementler (veya belirli bir sınıfa ait elementler) grubunu tanımlamak için kullanılırken, id, tekil ve benzersiz elementleri tanımlamak için kullanılır.

Ayrıca bakınız:

HTML dersleri:HTML Blok ve İçsel Elementler

HTML dersleri:HTML Düzen

HTML DOM referans el kitabı:Div nesnesi

Örnek

CSS ile taranan <div> parçası: belge

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>div elementi içindeki başlık</h2>
  <p>div elementi içinde bazı metin.</p>
</div>
</body>
</html>

Kişisel olarak deneyin

Case incelemesi

<body>
 <h1> yeni site</h1>
  <p>Bazı metin. Bazı metin. Bazı metin...</p>
  ...
 <div class="news">
  <h2> haber başlığı 1</h2>
  <p>Bazı metin. Bazı metin. Bazı metin...</p>
  ...
</div>
 <div class="news">
  <h2> haber başlığı 2</h2>
  <p>Bazı metin. Bazı metin. Bazı metin...</p>
  ...
 </div>
 ...
</body>

Örnek açıklama

Gördüğünüz gibi, yukarıdaki bu HTML haber sitesi yapısını simüle ediyor. Her bir div, her haberin başlığını ve özeti bir araya getiriyor, yani div, belgeye ekstra yapı ekliyor. Ayrıca, bu div'ler aynı türdeki elementler olduğundan, bu div'leri tanımlamak için class="news" kullanılabilir. Bu, div'ye uygun anlam eklemekten başka, div'leri daha sonra stillerle biçimlendirmek için kolaylık sağlar, bu da iki kuş bir arada öldürmek anlamına gelir.

İpucu:class ve id kullanımını daha derinlemesine öğrenmek için, 'W3school Yapılandırılmış Marka' bölümünde div, id ve diğer yardımcıları bu bölüme bakın.

Genel Özellikler

<div> Bu etiketler ayrıca HTML'deki Genel Özellikler.

olay özelliklerini destekler

<div> Bu etiketler ayrıca HTML'deki Olay Özellikleri.

Varsayılan CSS Ayarları

Çoğu tarayıcı aşağıdaki varsayılan değerleri kullanarak görüntüleyecektir <div> Element:

div {
  display: block;
}

Kişisel olarak deneyin

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek