Kuinka käyttää ul:ta html:ssä. Kuinka sijoittaa luettelon kohteet vaakasuoraan? Luettelotyylit kirjoitetaan Twenty Eleven -malliin

Hypertekstin merkintäkielessä HTML on tunniste

, jota käytetään luettelomerkkiluetteloiden luomiseen. Sitä tukevat kaikki nykyaikaiset selaimet ja voit näyttää elementit järjestyksessä, joka ei vaadi numerointia. Se näyttää esimerkiksi hyvin usein valikon kohdat ja kaiken, mikä liittyy sivulla oleviin luetteloihin: ruokia, tuotteita, laitteita, työkaluja ja paljon muuta, mikä on lueteltava ilmoittamatta tietyn kohteen prioriteettia.

Tunnisteen syntaksi

• Elementti #1
• Elementti #2
• Elementti #3
• ...

Tämä koodi muunnetaan luettelomerkityksi luetteloksi sivustolla:

• Elementti #1
• Elementti #2
• Elementti #3

Tag

vaatii pakollinen käyttö sulkeva tagi
.

Luetteloelementtien muodostamiseen käytetään parillista tagia. Aloitus- ja sulkemistunnisteiden välissä on yksittäisiä sanoja, lauseita, kappaleita, kuvia, koodinpätkiä ja paljon muuta, jotka ovat luettelomerkkiluettelon sisältö.

Mikä voi olla luettelomerkityn luettelon sisältö?

Tämä voi olla monenlaista tekstiä, mukaan lukien yksittäisiä sanoja, lauseita ja kappaleita, kuvia, sisäkkäisiä luetteloita, php-koodin paloja ja paljon muuta, joka vaatii yksinkertaisen merkinnän.

Jokainen luettelomerkitty luettelokohde on sisennetty oletusarvoisesti 40 pikseliä oikealle. Käyttämällä CSS-tyylejä, voimme vaihtaa näyttöä tämä lista oman harkintasi mukaan. Tag

on lohkopohjainen, joten se kattaa koko sen käytettävissä olevan alueen näytön reunan, taulukon kehyksen tai muiden sivuelementtien rajoittamana.
Lista-luettelossa-liitteet ovat sallittuja.

Esimerkiksi

• Elementti #1
• • Kohde 2-1
  • Elementti 2-2
  • Elementti 2-3
• Elementti #3
• ...

Tunnisteen attribuutit ja ominaisuudet

Laajalti käytetty tag-attribuutti

on type-attribuutti, joka osoittaa, miltä luettelomerkki näyttää. Voi ottaa seuraavat arvot

1. type="disc" - merkki täytetyn ympyrän muodossa (tämä arvo on oletusarvo). Levyesimerkki oli hieman korkeampi.

2. type="circle" - merkki läpinäkyvän ympyrän muodossa

Esimerkiksi:

• Elementti #1
• Elementti #2

• Elementti #1
• Elementti #2

3. type="square" - merkki neliön muodossa

Esimerkiksi:

• Elementti #1
• Elementti #2

Ja tältä se näyttää sivulla:

• Elementti #1
• Elementti #2
Huomautus 1

CSS:ssä luettelomerkkityyppi määritetään käyttämällä attribuuttia list-style-type:

• ...

Katsotaanpa, mitä arvoja list-style-type voi ottaa:

• levy - ympyrän muotoinen merkki (esimerkki oli yllä)
• ympyrä - merkki läpinäkyvän ympyrän muodossa (esimerkki oli yllä)
• neliö - merkki neliön muodossa (esimerkki oli yllä)
• desimaali - merkki numeroidun luettelon muodossa arabialaisin numeroin: 1, 2, 3, ...
• desimaali-alkunolla - merkki numeroidun luettelon muodossa arabialaisin numeroin, jonka alussa on nolla: 01, 02, 03, ...
• alempi-roomalainen - merkki numeroidun luettelon muodossa roomalaisissa aakkosissa pienillä kirjaimilla: i, ii, iii, iv, v
• ylempi roomalainen - merkki numeroidun luettelon muodossa roomalaisissa aakkosissa isoilla kirjaimilla: I, II, III, IV, V
• alempi latinalainen - merkki luettelon muodossa latinalaisissa aakkosissa pienillä kirjaimilla: a, b, c, d, ...
• ylempi latina - merkki luettelon muodossa latinalaisissa aakkosissa isoilla kirjaimilla: A, B, C, D, ...
• alempi kreikka - merkki luettelon muodossa kreikkalaisissa aakkosissa pienillä kirjaimilla
• ylempi kreikka - merkki luettelon muodossa kreikkalaisissa aakkosissa isoilla kirjaimilla
Huomautus 2

Attribuutti voidaan määrittää itse tunnisteelle

, ja tunnisteet
• . Kun määritetään tunnisteeseen attribuutti
  kaikki luettelon kohteet näytetään määritteen osoittamalla tavalla. Mutta voimme antaa tälle tai tuolle elementille oman näytön. Esimerkki kuvassa:

  Koodi näyttää tältä:

  • Elementti #1
  • Elementti #2
  • Elementti #3

  • Elementti #1
  • Elementti #2
  • Elementti #3

  Tagimerkkien vaihtaminen

  käyttämällä CSS:ää

  Tunnisteen luomat luettelomerkit

  , voidaan merkitä mielivaltaisilla kuvilla. CSS:ää käytetään merkin tyypin vaihtamiseen. Esimerkiksi

  • Elementti #1
  • Elementti #2
  • Elementti #3

  Ja tältä se näyttää sivulla:

  • Elementti #1
  • Elementti #2
  • Elementti #3

  C käyttämällä CSS:ää voimme asettaa muun tyyppisen merkkinäytön. Mutta sinun on muistettava tämä, kun määrität minkä tahansa tyylin tunnisteelle

  , se koskee kaikkia luettelon osia.
  Jos päätät muuttaa tavallisia ul- ja li-luetteloita, tämä aihe kiinnostaa sinua. Koska täällä opit useita alkuperäiset ratkaisut. Mikä varmasti auttaa sinua muuttamaan vakioulkoasun ainutlaatuiseksi, jossa käytetään CSS-tyyliä, luetteloiden suunnittelussa. Etuna on, että käytämme vain yhtä luokkaa kauttaaltaan, mikä muuttaa ilmettä radikaalisti. Näiden parametrien lisäksi voit määrittää, mistä numerosta luettelo alkaa, voit tehdä kaiken itse. Numeroitujen luetteloiden oletusaloitusarvo on ensimmäinen tai kirjain A.

  Kun perusasiat ovat poissa tieltä, tarkastelemme nyt tarkemmin elementtejä, joita käytetään suunnittelun eri osien rakenteen ja merkityksen luomiseen. Jos joku ei tiedä, ul ja li ovat paljon parempi vaihtoehto kuin pelkkä teksti, koska kun teksti on rivitetty, varsinkin matkapuhelin, se painuu täydellisesti eikä kiedo merkin ympärille.

  Listoja pidetään erinomaisena tapana esittää tietoa sivuilla, koska ne ovat helppolukuisia ja näyttävät hyviltä. Monet ihmiset näyttävät ajattelevan, että luettelomerkit ovat pieniä kuvia, mutta itse asiassa ne kaikki on luotu melko yksinkertaisen HTML-koodin avulla. Voit upottaa eri tyyppejä listat toisiinsa, jos haluat, muista vain sulkea ne oikein. Voit pelata haluamallasi tekstillä kaikissa näissä luettelokomennoissa.

  Sinun on myös tiedettävä, että luettelot sisältävät aluksi useita elementtejä:

  1 . Sekavaa tietoa.
  2 . Järjestetty tieto.
  3 . Määritelmät.

  Aloitetaan asennus:

  1. Vaihtoehto:

  
  
  • Luettelokohde
  
  
  • Ainutlaatuinen lista
  
  
  • Alkuperäiset listat
  
  
  • ZORNET.RU - Verkkovastaava
  
  
  • Toinen lista
  
  
  
  CSS

  Ksangelopan (
  marginaali: 19px 0 0;
  täyte: 0;
  listatyyli: ei mitään;
  vastanollaus: li;
  }
  .ksangelopan li (
  reunus: 2px solid #3575ad;
  tausta: #d7dee4;
  asema: suhteellinen;
  marginaali-ala: 17px;
  täyte: 15px 9px;
  }
  .ksangelopan li:hover (
  z-indeksi: 1;
  }
  .ksangelopan li:before (
  reunus: 2px solid #2270b3;
  sijainti: absoluuttinen;
  yläosa: -14px;
  täyte: 3px 9px;
  fonttikoko: 11px;
  fontin paino: lihavoitu;
  väri: #246eaf;
  tausta: #f2f4f7;
  vastalisäys: li;
  sisältö: counter(li);
  -webkit-transition-duration: 0,4s;
  siirtymäaika: 0,4 s;
  }
  .ksangelopan li:hover:before (
  tausta: #2672b3;
  väri: #f7f9fb;
  -webkit-muunnos: translate(-11px, 0);
  -ms-transform: translate(-11px, 0);
  -o-muunnos: käännä(-11px, 0);
  muunnos: translate(-11px, 0);
  }
  .ksangelopan li:after (
  sisältö: "";
  sijainti: absoluuttinen;
  siirtymäaika: 0,3 s;
  -webkit-transition-property: leveys;
  siirtymäominaisuus: leveys;
  z-indeksi: -1;
  tausta: #FFF;
  korkeus: 100%;
  vasen: 0;
  alkuun: 0;
  leveys: 0;
  }
  .ksangelopan li:hover:after (
  leveys: 100 %;
  }

  
  Siinä kaikki asennusta varten.

  2 Toinen vaihtoehto:

  

  
  
  • Luettelokohde
  
  
  • Ainutlaatuinen lista
  
  
  • Alkuperäiset listat
  
  
  • ZORNET.RU - Verkkovastaava
  
  
  • Toinen lista
  
  
  
  CSS

  Beleduzlopamges (
  marginaali-ala: 8px;
  täyte: 0;
  listatyyli: ei mitään;
  vastanollaus: li;
  }
  .beleduzlopamges li (
  asema: suhteellinen;
  reunus: 2px solid #195588;
  tausta: #eff3f7;
  täyte: 15px 19px 15px 27px;
  marginaali: 12px 0 12px 40px;
  -webkit-transition-duration: 0,3s;
  siirtymäaika: 0,3 s;
  }
  .beleduzlopamges li:hover (
  tausta: #FFF;
  }
  .beleduzlopamges li:before (
  rivin korkeus: 32 kuvapistettä;
  sijainti: absoluuttinen;
  yläreuna: 4px;
  vasen: -39px;
  leveys: 39px;
  tekstin tasaus: keskellä;
  fontin koko: 16px;
  fontin paino: lihavoitu;
  väri: #f9f5f5;
  tausta: #275b88;
  vastalisäys: li;
  sisältö: counter(li);
  siirtymäaika: 0,2 s;
  }
  .beleduzlopamges li:hover:before (
  leveys: 46px;
  }
  .beleduzlopamges li:after (
  sijainti: absoluuttinen;
  vasen: 0;
  yläreuna: 4px;
  sisältö: "";
  korkeus: 0;
  leveys: 0;
  reunus: 16px läpinäkyvä;
  reuna-vasen-väri: #275b88;
  -webkit-transition-duration: 0,2s;
  siirtymäaika: 0,2 s;
  }
  .beleduzlopamges li:hover:after (
  marginaali vasen: 6px;
  }

  
  Voit asettaa keskimmäisen gamman itsenäisesti vastaamaan sivuston päätyyliä.

  3 Kolmas vaihtoehto:

  

  
  
  • Skriptit uCozille
  
  
  • Mallit uCozille
  
  
  • Verkkosivuston suunnittelu
  
  
  • Verkkosivustojen tyylit
  
  
  • Muotoilu CSS:llä
  
  
  
  CSS

  Nizualisanelag (
  täyte: 0;
  listatyyli: ei mitään;
  vastanollaus: li;
  }
  .nizualisanelag li (
  asema: suhteellinen;
  täyte: 9px 17px 17px 25px;
  marginaali vasen: 39px;
  siirtymäaika: 0,2 s;
  kohdistin: osoitin;
  fontin paino: lihavoitu;
  väri: #343638;
  }
  .nizualisanelag li:before (
  reunus: 3px läpinäkyvä;
  rivin korkeus: 35 kuvapistettä;
  sijainti: absoluuttinen;
  alkuun: 0;
  vasen: -29px;
  leveys: 41px;
  text-align:center;
  fonttikoko: 14px;
  fontin paino: lihavoitu;
  väri: #619dce;
  vastalisäys: li;
  sisältö: counter(li);
  siirtymäaika: 0,3 s;
  
  laatikon koko: border-box;
  }
  .nizualisanelag li:hover:before (
  väri: #337AB7;
  }
  .nizualisanelag li:after (
  sijainti: absoluuttinen;
  alkuun: 0;
  vasen: -29px;
  leveys: 41px;
  korkeus: 41px;
  reuna: 5px kiinteä #468bd0;
  raja-säde: 50 %;
  sisältö: "";
  opasiteetti: 0,5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  laatikon koko: border-box;
  }
  .nizualisanelag li:hover:after (
  animaatio: 500 ms easy-in-out 0s bounceIn;
  opasiteetti: 1;
  }

  @keyframes bounceIn (
  0% {
  opasiteetti: 0;
  muunnos: scale3d(.3, .3, .3);
  }
  20% {
  muunnos: scale3d(1.3, 1.3, 1.3);
  }
  40% {
  muunnos: scale3d(.9, .9, .9);
  }
  60% {
  opasiteetti: 1;
  muunnos: scale3d(1,03, 1,03, 1,03);
  }
  80% {
  muunnos: scale3d(.97, .97, .97);
  }
  kohteeseen (
  opasiteetti: 1;
  muunnos: scale3d(1, 1, 1);
  }
  }

  
  Mukana kaunis animaatio.

  4 Neljäs vaihtoehto:

  

  
  
  • Sivuston ensimmäinen elementti
  
  
  • Sivuston toinen elementti
  
  
  • Sivuston kolmas elementti
  
  
  • Sivuston neljäs elementti
  
  
  • Sivuston viides elementti
  
  
  
  CSS

  Täyte:0;
  listatyyli: ei mitään;
  }
  .kudezamuden li(
  täyte: 6px;
  }
  .kudezamuden li:before (
  täyte-oikea: 11px;
  fontin paino: lihavoitu;
  väri: #4979a0;
  sisältö: "\2606";
  siirtymäaika: 0,4 s;
  }
  .kudezamuden li:hover:before (
  väri: #235e90;
  sisältö: "\2605";
  }

  
  Samanlainen aiemmat versiot, vain itse kuvake on muutettu.

  Yleensä tämä on pieni valikoima luetteloita, jotka verkkovastaava voi tehdä kiva lista portaalissa, jossa hän voi itse suunnitella sitä enemmän, sellaisena kuin hän itse haluaa nähdä sen.

  Jos haluat laittaa kohteet numeroituun luetteloon luettelomerkityn luettelon sijaan, käytetään tilattua HTML-koodia. Tämä luettelo luodaan ol-tunnisteen avulla. Numerointi alkaa yhdestä ja kasvaa yhdellä kullekin seuraavalle järjestetylle listaelementille li-tunnisteella.

  Ainoa ero on, että tämä tunniste on tehty tiukasti numerointiluetteloille. Tunnisteen nimi tulee englanninkielisestä lyhenteestä "Ordered List" - numeroitu luettelo.

  Tunnisteen syntaksi

  1. Elementti #1
  2. Elementti #2
  3. Elementti #3
  4. ...

  Missä type="value"-attribuutilla voi olla seuraavat arvot

  • A - asettaa merkit isojen latinalaisten kirjainten muodossa (A, B, C..);
  • a - asettaa merkit pieninä latinalaisina kirjaimina (a, b, c..);
  • I - asettaa merkit suurten roomalaisten numeroiden muodossa (I, II, III, IV..);
  • i - asettaa merkit pienten roomalaisten numeroiden muodossa (i, ii, iii, iv..);
  • 1 (oletus) - asettaa merkit arabialaisten numeroiden muodossa (1, 2, 3..);

  Attribuutti start="value" määrittää raportin alkuarvon (aloitusarvon).

  Käänteinen attribuutti määrittää käänteisen laskennan (jos tarpeen).

  Tag

  edellyttää pakollisen sulkevan tagin käyttöä

  Luetteloelementtien muodostamiseen käytetään parillista tagia

  • . Aloitus- ja sulkemistunnisteiden välissä on yksittäisiä sanoja, lauseita, kappaleita, kuvia, koodinpätkiä ja paljon muuta, jotka ovat luettelomerkkiluettelon sisältö.

    Huom

    Listassa voit vaihtaa tilin omaksi. Tagissa on erityinen attribuutti value="" tätä tarkoitusta varten.

  • , jolle on määritetty joitakin numeerinen arvo. Esimerkiksi

    1. Elementti #1
    10. Elementti #2
    11. Elementti #3

  Esimerkkejä numeroiduista luetteloista html:ssä (

  )

  Esimerkki 1. HTML numeroitu luettelo latinalaisin kirjaimin

  Esimerkki isoilla kirjaimilla

  1. Elementti #1
  2. Elementti #2
  3. Elementti #3

  1. Elementti #1
  2. Elementti #2
  3. Elementti #3

  Esimerkki pienillä kirjaimilla

  1. Elementti #10
  2. Elementti #11
  3. Elementti #12

  Tältä se näyttää sivulla:

  1. Elementti #1
  2. Elementti #2
  3. Elementti #3

  Esimerkki 2. HTML numeroitu luettelo latinalaisin kirjaimin

  Esimerkki isoilla kirjaimilla

  1. Elementti #1
  2. Elementti #2
  3. Elementti #3

  Tältä se näyttää sivulla:

  1. Elementti #1
  2. Elementti #2
  3. Elementti #3

  Esimerkki pienillä kirjaimilla

  1. Elementti #1
  2. Elementti #2
  3. Elementti #3

  Tältä se näyttää sivulla:

  1. Elementti #1
  2. Elementti #2
  3. Elementti #3

  Esimerkki 3. Numeroitu lista html eri aloitussijainti

  Esimerkki, joka näyttää start-attribuutin ominaisuudet, jonka avulla voit asettaa laskurin aloitusarvon.

  50. Elementti #1
  51. Elementti #2
  52. Elementti #3

  Tältä se näyttää sivulla:

  1. Elementti #1
  2. Elementti #2
  3. Elementti #3

  Esimerkki 4. Lukumäärän muuttaminen html-numeroiduissa listoissa

  Alla on esimerkki mahdollisuudesta muuttaa laskurin arvoja arvoattribuutin avulla, kun tunnisteissa näytetään uusia elementtejä

  • .

    10. Elementti #1
    11. Elementti #2
    100. Elementti #3
    101. Elementti #4

    Tältä se näyttää sivulla:

    1. Elementti #1
    2. Elementti #2
    3. Elementti #3
    4. Elementti #4

    Esimerkki 5. Käänteinen numeroitu luettelo html-muodossa

    Alla on esimerkki käänteisestä numeroidusta luettelosta (laskeminen käänteisessä järjestyksessä).

    10. Elementti #1
    11. Elementti #2
    12. Elementti #3
    13. Elementti #4

    Tältä se näyttää sivulla:

    1. Elementti #1
    2. Elementti #2
    3. Elementti #3
    4. Elementti #4

    Elementti

    (englanninkielisestä "järjestämättömästä listasta") luo luettelomerkityn (järjestämättömän) luettelon. Yleensä elementti
    käytetään luetteloiden luomiseen, joissa tämän luettelon kohteiden järjestyksen muuttaminen ei muuta luettelon merkitystä merkittävästi.

    Tag

    viittaa lohkoelementteihin, joten se vie koko käytettävissä olevan leveyden ja korkeuden koko riippuu sisällön määrästä.

    Numeroitujen luetteloiden kohteet määritetään tunnisteen avulla

    • , joka voi tekstin lisäksi sisältää muita HTML-elementtejä (luetteloita, kuvia, otsikoita, kappaleita jne.). Oletuksena luettelomerkityt luettelot näkyvät verkkosivulla luettelona, ​​joka alkaa pienellä mustalla ympyrällä. Selaimet lisäävät pienen marginaalin vasemmalle näyttäessään luettelon kohteita.

      Huomautus: Jos

      pätee CSS-ominaisuus, sitten elementit
      • perii nämä ominaisuudet.

        Neuvoja: Voit muuttaa merkin tyyppiä käyttämällä list-style-type CSS-ominaisuutta tai list-style-image-ominaisuutta, jonka avulla voit korvata merkit kuvilla. Jos haluat luoda numeroituja luetteloita, käytä tunnistetta

        .

        Syntaksi

        ...
        • ...
        ...

        Sulkeva tagi

        Pakollinen.

        Attribuutit

        CompactEi käytössä HTML5:ssä Vähentää sisennystä ja riviväliä. type HTML5 Asettaa luettelomerkin tyypin.

        Saatavilla tälle kohteelle globaalit attribuutit Ja tapahtumia.

        Oletustyyli

        Useimmat selaimet näyttävät elementin

        seuraavien kanssa CSS-arvot oletus:

        Ul ( näyttö: lohko; listatyylinen tyyppi: levy; marginaali yläosa: 1 em; marginaali alaosa: 1 em; marginaali vasen: 0; marginaali oikea: 0; täyte-vasen: 40 kuvapistettä; )

        Erot HTML 4.01:n ja HTML5:n välillä

        Compact- ja type-attribuutteja ei tueta HTML5:ssä.

        Käyttöesimerkki:

        Järjestämätön HTML-luettelo:

        Esimerkki HTML:stä:

        Kokeile itse
        • Kahvi
        • Teetä
        • Kaakao

        Tekniset tiedot

        Erittely	Status
        WHATWG HTML Living Standard (WHATWG)	Elintaso
        HTML 4.01 (W3C)	Suositus
        HTML5 (W3C)	Suositus
        HTML 5.1 (W3C)	Suositus

        Selaimen tuki

        Kokeile itse - Esimerkkejä

        Kuinka saan luettelon alkamaan muulla kuin 1:llä?

        Jatketaan keskustelujamme html:n alkuvaiheista. Tässä artikkelissa haluan puhua kappaleiden, luetteloiden ja otsikoiden luomisesta tekstiin. Ja myös yksittäisistä tunnisteista
        Ja

        ---

        .

        Suosittelen lämpimästi lukemaan tämän sarjan ensimmäisen oppitunnin sekä johdantoartikkelin html:n opiskelun aloittamisesta niille, jotka eivät vielä tunne niitä.

        Nyt jatkamme tunnisteiden opiskelua. Oletan, että lukija tuntee jo yllä olevien artikkeleiden materiaalin.

        Kuten aina, työsuunnitelma:

        1. Kappaleet
        2. Rivin katkeaa
           
        3. Listat ja luetteloelementit
        4. Otsikot
        5. Vaakasuuntaiset viivaimet

           ---

        Kappaleet

        Teksti koostuu lähes aina kappaleista. Kappale on tekstin osa, joka välittää täydellisen ajatuksen.

        html:ssä kappaletta, kuten otsikosta voi nähdä, merkitään . Kirjain "p" on otettu sanasta "kohta", joka tarkoittaa vain "kohtaa".

        Katsotaanpa esimerkkiä:

        Ensimmäisen kappaleen teksti. Se sisältää ajatuksen. Mutta nyt ajatus on ohi.
        

        
        

        Toinen ajatus on jo alkanut ja kirjoitamme sen toiseen kappaleeseen.
        

        Kuten näet, kappaleiden käyttö on hyvin yksinkertaista eikä vaadi erityisiä kommentteja. Jos katsomme tätä koodia selaimessa, näemme kaksi riviä, joiden välissä on yksi tyhjä rivi. Venäjän teksteissä on tapana erottaa kappaletta ei tyhjällä rivillä, vaan siirtämällä ensimmäinen rivi oikealle. Mutta juuri tätä muotoilua käytetään usein Internetissä, joten se jätetään usein venäjänkielisiin teksteihin. Jos et kuitenkaan pidä tästä käytöksestä, voit muuttaa sitä CSS:n avulla.

        Rivin katkeaa
        

        Joskus sinun on käännettävä rivi lopettamatta ajatusta tai sulkematta kappaletta. Eli mene vain uudelle riville. Tätä varten on yksi tunniste
        . Tässä on esimerkki sen käytöstä:

        Tuuli puhaltaa iloisesti
        
        Ja vene kiihtyy
        
        Hän juoksee aalloissa
        Purjeet nostettuina.
        

        Tämä katkelma runosta A.S. Pushkin auttoi meitä havainnollistamaan tunnisteen toimintaa
        . Sijoitin nimenomaan tämän neliön kaksi viimeistä riviä yhdelle koodiriville osoittaakseni, että rivit siirretään uudelle riville, ei siksi, että laitoimme rivinvaihtoja, vaan siksi, että asetimme tunnisteita
        . Tämä tunniste on hyvin yksinkertainen eikä vaadi yksityiskohtaista selitystä, joten lopetamme keskustelun tästä.

        Listat,

        ja lista elementtejä

        Joskus sinun on lueteltava jotain tekstissä. Tätä tarkoitusta varten käytetään kolmea tunnistetta: ul, ol, li. Kaikki nämä tunnisteet ovat säilötunnisteita, mutta tunniste sisältyy aina johonkin säilöistä tai, eikä sillä ole merkitystä niiden ulkopuolella. Ul-säilöä käytetään, kun emme välitä lueteltujen kohteiden järjestyksestä, emmekä halua keskittyä järjestykseen, jossa ne näkyvät. Ol-tunniste päinvastoin kiinnittää huomion elementtien järjestykseen ja numeroi jokaisen rivin automaattisesti. Katsotaanpa esimerkkiä:

        
        
        • Pulla
        
        
        • Piirakka
        
        
        • Leipä
        
        
        • Piirakka
        
        

        Selainnäytössä tämä koodi näyttää tältä:

        • Pulla
        • Piirakka
        • Leipä
        • Piirakka

        Jos vain korvaamme ul-tunnisteen ol-tunnisteella, saamme numeroidun luettelon:

        
        
        1. Pulla
        
        
        2. Piirakka
        
        
        3. Leipä
        
        
        4. Piirakka
        
        

        Nyt se näyttää tältä:

        1. Pulla
        2. Piirakka
        3. Leipä
        4. Piirakka

        Kukaan ei kiellä sijoittamasta listaa toiseen ja muodostamasta sisäkkäisiä luetteloita aliluetteloiden kanssa:

        
        Työkalut:
        
        • Saha
        
        
        • Ruuvimeisselit
          
          
          
          1. Suoraan
          
          
          2. Ylittää
          
          
          
          
        
        
        • Porata
        
        

        Sinun on kokeiltava hieman näitä listoja, jotta voit tottua niiden käyttöön. On olemassa toisenlainen luettelo, mutta sitä käytetään harvoin, joten en puhu siitä nyt. Ehkä toisessa artikkelissa.

        Tietysti, kuten kaikki muukin, ulkonäkö Näitä elementtejä voidaan muokata tunnistamattomaksi CSS:n avulla.

        Otsikot

        Tietenkin kappaleet auttavat asiakirjojen jäsentelyssä. Mutta jos haluat jakaa suuren tekstin pienempiin loogisiin osiin, voit nimetä ne jokaisen. Jokainen osa voi sisältää lisää alaosia, joissa on omat alemman tason otsikot ja niin edelleen. Aseta otsikko käyttämällä tunnisteita , jossa "x" on luku väliltä 1-6. Mitä suurempi luku, sitä pienempi otsikko. Eli ylätason otsikkoa kutsutaan nimellä h1 ja alimman tason otsikoksi kutsutaan h6. Oletuksena näiden otsikoiden teksti näytetään suurella fontilla ja sisennettynä. Tämä teksti näytetään koko rivillä, eli hx-tunnisteet ovat lohkotunnisteita. H1-tunnisteessa on suurin fontti ja h6-tunnisteessa pienin fontti. Pääsääntöisesti sivulla on yksi, enintään kaksi ylätason h1-tunnistetta. Kun taso laskee, tunnisteiden määrä kasvaa. Mutta on harvinaista, että verkkovastaava pystyy hajottamaan tekstiä niin paljon, että hän tarvitsee tason 5 tai 6 otsikot. Jopa tasoa 4 käytetään harvoin.

        Vähemmän sanoja, enemmän tekoja!