HTML <h1> til <h6> tags

Definition og brug

<h1> til <h6> etiketter bruges til at definere HTML-overskrifter.

<h1> definer den mest vigtige overskrift.<h6> definer den mindst vigtige overskrift.

Bemærk

hver side bruger kun én <h1> - Dette bør repræsentere hovedtitlen/temaet for hele siden. Derudover skal du ikke springe over titelskalaen - fra <h1> start, derefter brug <h2>osv.

Da h-elementer har præcise semantiske betydninger, bør du vælge den passende tagniveau med omhu for at bygge dokumentets struktur. Derfor bør du ikke bruge overskriftstag til at ændre skriftstørrelsen på samme linje. I stedet bør vi bruge CSS-styldeling for at opnå et smukt udseende.

Hvis du vil vide mere om HTML-tags valg og brug, læsWeb kvalitet》。

Se også:

HTML tutorial:HTML headings

HTML DOM referencehåndbog:Heading-objektet

Eksempel

Eksempel 1

Sex forskellige HTML-overskrifter:

<h1>Dette er overskrift 1</h1>
<h2>Dette er overskrift 2</h2>
<h3>Dette er overskrift 3</h3>
<h4>Dette er overskrift 4</h4>
<h5>Dette er overskrift 5</h5>
<h6>Dette er overskrift 6</h6>

Try it yourself

Eksempel 2

Indstil overskriftens baggrundsfarve og tekstfarve (brug CSS):

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

Try it yourself

Eksempel 3

Indstil overskriftens justering (brug CSS):

<h1 style="text-align:center">Dette er overskrift 1</h1>
<h2 style="text-align:left">Dette er overskrift 2</h2>
<h3 style="text-align:right">Dette er overskrift 3</h3>
<h4 style="text-align:justify">Dette er overskrift 4</h4>

Try it yourself

Globale attributter

<h1> - <h6> Tagget understøtter Globale attributter i HTML。

event-attributter

<h1> - <h6> Tagget understøtter Event-attributter i HTML。

Standard CSS-indstillinger

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

Eksempel 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:

Eksempel 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:

Eksempel 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:

Eksempel 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