HTML <h1> till <h6> taggar

Definition och användning

<h1> tills <h6> Etiketter används för att definiera HTML-titlar.

<h1> Definiera den mest viktiga titeln.<h6> Definiera den minst viktiga titeln.

Observera

Varje sida använder bara en <h1> - Detta bör representera den huvudsakliga titeln/temat för hela sidan. Dessutom, hoppa inte över titelgraderingen - <h1> börja, sedan använda }} <h2>och så vidare.

Eftersom h-elementen har en exakt semantik, bör du noga välja lämplig taggnivå för att bygga dokumentstrukturen. Använd därför inte rubriktaggar för att ändra teckenstorleken på samma rad. Istället bör vi använda kaskadstilar för att uppnå vackra visningsresultat.

Om du vill veta mer om hur HTML-taggar väljs och används, läsWebbkvalitet》。

Se också:

HTML-tips:HTML headings

HTML DOM-referenshandbok:Heading-objekt

Exempel

Exempel 1

Sex olika HTML-rubriker:

<h1>Detta är rubrik 1</h1>
<h2>Detta är rubrik 2</h2>
<h3>Detta är rubrik 3</h3>
<h4>Detta är rubrik 4</h4>
<h5>Detta är rubrik 5</h5>
<h6>Detta är rubrik 6</h6>

Try it yourself

Exempel 2

Ställ in rubrikens bakgrundsfärg och textfärg (använd CSS):

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

Try it yourself

Exempel 3

Ställ in rubrikens justering (använd CSS):

<h1 style="text-align:center">Detta är rubrik 1</h1>
<h2 style="text-align:left">Detta är rubrik 2</h2>
<h3 style="text-align:right">Detta är rubrik 3</h3>
<h4 style="text-align:justify">Detta är rubrik 4</h4>

Try it yourself

Globala attribut

<h1> - <h6> Etiketter stödjer Globala attribut i HTML。

evenhetsattribut

<h1> - <h6> Etiketter stödjer Evenhetsattribut i HTML。

Standard CSS-inställningar

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

Exempel 1

h1 {
  display: block;
  fontstorlek: 2em;
  marginaltop: 0.67em;
  marginalbotten: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Try it yourself

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

Exempel 2

h2 {
  display: block;
  fontstorlek: 1.5em;
  marginaltop: 0.83em;
  marginalbotten: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Try it yourself

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

Exempel 3

h3 {
  display: block;
  fontstorlek: 1.17em;
  marginaltop: 1em;
  marginalbotten: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Try it yourself

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

Exempel 4

h4 {
  display: block;
  fontstorlek: 1em;
  marginaltop: 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