HTML <h1> - <h6> -tagit

Määrittely ja käyttö

<h1> 。 <h6> Tunnisteet käytetään HTML-otsikkojen määrittämiseen.

<h1> Määritä tärkeimmät otsikot.<h6> Määritä vähiten tärkeät otsikot.

Huomioitavaa

Jokaisella sivulla käytetään vain yhtä <h1> - Tämä tulisi edustaa koko sivun pääotsikkoa/aihetta. Lisäksi älä ohita otsikkotasoja - <h1> aloita, sitten käytä <h2>ja niin edelleen.

Koska h-elementillä on tarkka semantiikka, valitse huolellisesti sopiva tietorakenne dokumentin rakentamiseen. Älä käytä otsikkoelementtejä muuttamaan fonttikokoa samassa rivissä. Päinvastoin, käytämme tasapainoisia tyylejä saavuttaaksemme näyttävän ulkoasun.

Jos haluat tietää lisää HTML-elementtien valinnasta ja käytöstä, lueWeb-laatu》。

Katso myös:

HTML-opetusohjelma:HTML otsikot

HTML DOM -viittausoppikirja:Heading-objekti

Esimerkki

esimerkki 1

Kuusi erilaista HTML-otsikkoa:

<h1>Tämä on otsikko 1</h1>
<h2>Tämä on otsikko 2</h2>
<h3>Tämä on otsikko 3</h3>
<h4>Tämä on otsikko 4</h4>
<h5>Tämä on otsikko 5</h5>
<h6>Tämä on otsikko 6</h6>

Kokeile itse

esimerkki 2

Aseta otsikon taustaväri ja tekstin väri (käytä CSS:ää):

<h1 style="background-color:DodgerBlue;">Hei maailma</h1>
<h2 style="color:Tomato;">Hei maailma</h2>

Kokeile itse

esimerkki 3

Aseta otsikon kohdistus (käytä CSS:ää):

<h1 style="text-align:center">Tämä on otsikko 1</h1>
<h2 style="text-align:left">Tämä on otsikko 2</h2>
<h3 style="text-align:right">Tämä on otsikko 3</h3>
<h4 style="text-align:justify">Tämä on otsikko 4</h4>

Kokeile itse

globaalit attribuutit

<h1> - <h6> elementit tukevat HTML:n globaalit attribuutit。

tapahtumaperiaatteet

<h1> - <h6> elementit tukevat HTML:n tapahtumaperiaatteet。

Oletukselliset CSS-asetukset

Useimmat selaimet näyttävät seuraavat oletusarvot <h1> Elementti:

esimerkki 1

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

Kokeile itse

Useimmat selaimet näyttävät seuraavat oletusarvot <h2> Elementti:

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

Kokeile itse

Useimmat selaimet näyttävät seuraavat oletusarvot <h3> Elementti:

esimerkki 3

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

Kokeile itse

Useimmat selaimet näyttävät seuraavat oletusarvot <h4> Elementti:

esimerkki 4

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

Kokeile itse

Useimmat selaimet näyttävät seuraavat oletusarvot <h5> Elementti:

Esimerkki 5

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

Kokeile itse

Useimmat selaimet näyttävät seuraavat oletusarvot <h6> Elementti:

Esimerkki 6

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

Kokeile itse

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki