Skip to content

Tämä yksi koodirivi lisää rivin mihin tahansa HTML-asiakirjaan

20 de maaliskuu de 2021

Mitä tietää

  • Kirjoita vain <hr> lisätä viiva HTML-koodiin HR-tagilla.
  • Muokkaa viivan ominaisuuksia muokkaamalla CSS: ää HTML5-asiakirjassa.

HR-tagia käytetään verkkodokumenteissa näyttämään vaakasuora viiva sivun yli, jota joskus kutsutaan vaakasäännöksi. Toisin kuin jotkut tunnisteet, tämä ei tarvitse sulkutunnistetta. Kirjoita <hr> lisätäksesi viivan.

Onko HR-tunniste semanttinen?

HTML4: ssä HR-tunniste ei ollut semanttinen. Semanttiset elementit kuvaavat niiden merkityksen selaimen kannalta, ja kehittäjä voi helposti ymmärtää ne. HR-tunniste oli vain tapa lisätä yksinkertainen rivi asiakirjaan missä haluat. Vain sen elementin ylä- tai alareunan muotoilu, johon haluat viivan näkyvän, sijoittaa vaakasuoran viivan elementin ylä- tai alaosaan, mutta yleensä HR-tagia oli helpompi käyttää tähän tarkoitukseen.

HTML5: stä alkaen HR-tagista tuli semanttinen, ja se määrittelee nyt kappaletason aihekohtaisen tauon, joka on katkos sisällön kulkussa, mikä ei oikeuta uutta sivua tai muuta vahvempaa erotinta – se on aiheenvaihto. Saatat esimerkiksi löytää HR-tagin tarinan kohtauksen muutoksen jälkeen tai se voi viitata aiheen muutokseen viiteasiakirjassa.

HR-attribuutit HTML4: ssä ja HTML5: ssä

Viiva venyttää sivun koko leveyden. Jotkut oletusattribuutit kuvaavat viivan paksuutta, sijaintia ja väriä, mutta voit muuttaa näitä asetuksia halutessasi.

HTML4: ssä voit määrittää HR-tunnisteelle yksinkertaiset määritteet, mukaan lukien tasaus, leveys ja nenänvarjo. Kohdistus voidaan asettaa vasemmalle, keskusta, oikein, tai perustella. Leveys säätää vaakasuoran viivan leveyden oletusarvoisesta 100 prosentista, joka ulottuu viivan sivun yli. noshade attribuutti näyttää yhtenäisen väririvin varjostetun värin sijaan.

Nämä määritteet ovat vanhentuneita HTML5: ssä. Sinun tulisi sen sijaan käyttää CSS-tyyliä HR-tagiesi muotoiluun HTML5-asiakirjoissa.

Tämä on HTML5-esimerkki vaakasuoran viivan tyylistämisestä 10 pikselin korkeudeksi käyttämällä sisäistä CSS: ää (tyylit lisätään suoraan asiakirjaan HTML: n kanssa):

Toinen tapa tyylitellä vaakasuoria viivoja HTML5: ssä on käyttää erillistä CSS-tiedostoa ja linkittää siihen HTML-dokumentista. CSS-tiedostoon kirjoitat tyylin seuraavasti:

hr {
height:10px
}

Sama vaikutus HTML4: ssä edellyttää, että lisäät attribuutin HTML-sisältöön. Näin muutetaan vaakasuoran viivan kokoa koko attribuutti:

CSS: n vaakasuorien viivojen muotoilussa on paljon enemmän vapautta kuin HTML: ssä.

Vain leveys ja korkeus tyylit ovat yhdenmukaisia ​​kaikissa selaimissa, joten kokeiluja ja virheitä saatetaan tarvita käytettäessä muita tyylejä. Oletusleveys on aina 100 prosenttia verkkosivun tai ylätason elementin leveydestä. Säännön oletuskorkeus on kaksi pikseliä.