HTML <h1> bis <h6> Tags

Definition und Verwendung

<h1> bis <h6> Tags werden verwendet, um HTML-Titel zu definieren.

<h1> Definieren Sie den wichtigsten Titel.<h6> Definieren Sie den unwichtigsten Titel.

Beachten Sie

Jede Seite verwendet nur einen <h1> - Dies sollte den Haupttitel/Thema der gesamten Seite darstellen. Außerdem sollten Sie die Titellevels nicht überspringen - <h1> Beginnen Sie damit, dann verwenden Sie }} <h2>usw.

Da die h-Elemente spezifische Semantiken haben, wählen Sie bitte sorgfältig die passende Ebene aus, um die Struktur des Dokuments zu strukturieren. Verwenden Sie daher nicht die Überschriften-Tags, um die Schriftgröße auf einer Zeile zu ändern. Stattdessen sollten wir die Definitionen von каскадными таблицами стилей verwenden, um eine schöne Anzeige zu erzielen.

Wenn Sie mehr über die Auswahl und Verwendung von HTML-Tags erfahren möchten, lesen Sie bitteWeb-Qualität》。

Weitere Informationen:

HTML Tutorial:HTML Titles

HTML DOM Referenzhandbuch:Heading-Objekt

Beispiel

Beispiel 1

Sechs verschiedene HTML-Überschriften:

<h1>Das ist Überschrift 1</h1>
<h2>Das ist Überschrift 2</h2>
<h3>Das ist Überschrift 3</h3>
<h4>Das ist Überschrift 4</h4>
<h5>Das ist Überschrift 5</h5>
<h6>Das ist Überschrift 6</h6>

Try It Yourself

Beispiel 2

Stellen Sie die Hintergrundfarbe und die Textfarbe der Überschriften ein (verwenden Sie CSS):

<h1 style="background-color:DodgerBlue;">Hallo Welt</h1>
<h2 style="color:Tomato;">Hallo Welt</h2>

Try It Yourself

Beispiel 3

Stellen Sie die Ausrichtung der Überschriften ein (verwenden Sie CSS):

<h1 style="text-align:center">Das ist Überschrift 1</h1>
<h2 style="text-align:left">Das ist Überschrift 2</h2>
<h3 style="text-align:right">Das ist Überschrift 3</h3>
<h4 style="text-align:justify">Das ist Überschrift 4</h4>

Try It Yourself

Globale Attribute

<h1> - <h6> Das Tag unterstützt auch Globale Attribute im HTML.

Ereignisattribute

<h1> - <h6> Das Tag unterstützt auch Ereignisattribute im HTML.

Standard-CSS-Einstellungen

Most browsers will display the following default values <h1> Element:

Beispiel 1

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

Try It Yourself

Most browsers will display the following default values <h2> Element:

Beispiel 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;
}

Try It Yourself

Most browsers will display the following default values <h3> Element:

Beispiel 3

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

Try It Yourself

Most browsers will display the following default values <h4> Element:

Beispiel 4

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

Try It Yourself

Most browsers will display the following default values <h5> Element:

Example 5

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

Try It Yourself

Most browsers will display the following default values <h6> Element:

Example 6

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

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support