HTML <h1> to <h6> tags

Definition and usage

<h1> to <h6> Tags are used to define HTML titles.

<h1> Define the most important title.<h6> Define the least important title.

Note

Each page should use only one <h1> - To represent the main title/theme of the entire page. In addition, do not skip the title level - from <h1> zaczynając od, a następnie używając <h2>i tak dalej.

Ponieważ elementy h mają dokładne znaczenie, prosimy o ostrożne wybieranie odpowiedniego poziomu etykiety do budowania struktury dokumentu. W związku z tym, nie należy używać etykiet nagłówków do zmiany rozmiaru czcionki na tej samej linii. Zamiast tego, powinniśmy używać definicji kaskadowych stylów CSS, aby osiągnąć ładny efekt wizualny.

Jeśli chcesz dowiedzieć się więcej na temat wyboru i użycia etykiet HTML, przeczytajJakość Web》。

Zobacz również:

Tutorial HTML:Tytuły HTML

Podręcznik HTML DOM:Obiekt Heading

Przykład

Przykład 1

Sześć różnych tytułów HTML:

<h1>To tytuł 1</h1>
<h2>To tytuł 2</h2>
<h3>To tytuł 3</h3>
<h4>To tytuł 4</h4>
<h5>To tytuł 5</h5>
<h6>To tytuł 6</h6>

Spróbuj sam

Przykład 2

Ustawienie koloru tła i tekstu tytułu (używając CSS):

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

Spróbuj sam

Przykład 3

Ustawienie wyważenia tytułów (używając CSS):

<h1 style="text-align:center">To tytuł 1</h1>
<h2 style="text-align:left">To tytuł 2</h2>
<h3 style="text-align:right">To tytuł 3</h3>
<h4 style="text-align:justify">To tytuł 4</h4>

Spróbuj sam

Globalne atrybuty

<h1> - <h6> etykieta obsługuje Globalne atrybuty w HTML

Atrybuty zdarzeń

<h1> - <h6> etykieta obsługuje Atrybuty zdarzeń w HTML

Domyślne ustawienia CSS

Większość przeglądarek będzie używała następujących domyślnych wartości do wyświetlania <h1> Element:

Przykład 1

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

Spróbuj sam

Większość przeglądarek będzie używała następujących domyślnych wartości do wyświetlania <h2> Element:

Przykład 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;
}

Spróbuj sam

Większość przeglądarek będzie używała następujących domyślnych wartości do wyświetlania <h3> Element:

Przykład 3

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

Spróbuj sam

Większość przeglądarek będzie używała następujących domyślnych wartości do wyświetlania <h4> Element:

Przykład 4

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

Spróbuj sam

Większość przeglądarek będzie używała następujących domyślnych wartości do wyświetlania <h5> Element:

Przykład 5

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

Spróbuj sam

Większość przeglądarek będzie używała następujących domyślnych wartości do wyświetlania <h6> Element:

Przykład 6

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

Spróbuj sam

Wsparcie przeglądarki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wspierane Wspierane Wspierane Wspierane Wspierane