HTML <h1> 到 <h6> 标签

定义和用法

<h1> 到 <h6> 标签用于定义 HTML 标题。

<h1> 定义最重要的标题。<h6> 定义最不重要的标题。

注意

每个页面只使用一个 <h1> - Bu,整个页面的主要标题/主题应该代表。此外，请勿跳过标题级别 - 从 <h1> başlamak, ardından kullanmak <h2>ve benzeri.

h elementleri kesin anlam ifade ettiği için, belge yapısını oluştururken doğru etiket seviyesini seçmeye dikkat edin. Aynı satırdaki yazı boyutunu değiştirmek için başlık etiketlerini kullanmayın. Aksine, güzel bir gösterim elde etmek için katmanlı stil belirleyiciler kullanmalıyız.

HTML etiketlerinin seçimi ve kullanımı hakkında daha fazla bilgi edinmek istiyorsanız, okuyun《Web kalitesi》。

daha fazla bilgi için bkz:

HTML dersleri:HTML Başlıkları

HTML DOM referans el kitabı:Heading nesnesi

örnek

örnek 1

altı farklı HTML başlık

<h1>Bu başlık 1</h1>
<h2>Bu başlık 2</h2>
<h3>Bu başlık 3</h3>
<h4>Bu başlık 4</h4>
<h5>Bu başlık 5</h5>
<h6>Bu başlık 6</h6>

Kişisel olarak deneyin

örnek 2

Başlıkların arka plan rengi ve metin rengini ayarlama (CSS kullanarak):

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

Kişisel olarak deneyin

örnek 3

Başlıkların hizaını ayarlama (CSS kullanarak):

<h1 style="text-align:center">Bu başlık 1</h1>
<h2 style="text-align:left">Bu başlık 2</h2>
<h3 style="text-align:right">Bu başlık 3</h3>
<h4 style="text-align:justify">Bu başlık 4</h4>

Kişisel olarak deneyin

genel özellikler

<h1> - <h6> etiketler aynı zamanda HTML'deki genel özellikler。

olay özellikleri

<h1> - <h6> etiketler aynı zamanda HTML'deki olay özellikleri。

varsayılan CSS ayarları

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

örnek 1

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Kişisel olarak deneyin

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

örnek 2

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Kişisel olarak deneyin

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

örnek 3

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Kişisel olarak deneyin

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

örnek 4

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Kişisel olarak deneyin

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

Örnek 5

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Kişisel olarak deneyin

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

Örnek 6

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Kişisel olarak deneyin

Tarayıcı Desteği

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