V HTML nyelv speciális címkekészlet áll rendelkezésre az információk listák formájában történő megjelenítéséhez. A listák az egyik leggyakrabban használt adatábrázolási forma mindkettőben elektronikus dokumentumokat, valamint nyomtatott formában is. Szinte naponta találkozunk listákkal, legyen szó a bolti vásárlási igényekről, a tanulókról az osztályteremben vagy egyszerűen az elvégzendő feladatokról. A listaszerkezetek rendszerezésének képessége sok esetben elérhető szövegszerkesztők különösen egy erőteljes szövegszerkesztő Microsoft Word kényelmes eszközökkel rendelkezik a különféle típusú listák formázásához (a HTML-listák létrehozásának lehetősége, amikor segítség a Microsofttól A Word szót a 8. fejezet tárgyalja). Íme néhány olyan eset, amikor a listák használata meglehetősen kényelmes:

• Információk egyesítése egyetlen struktúrába az olvasható megjelenés érdekében.
• Összetett folyamatok leírása lépésről lépésre.
• Az információk tartalomjegyzék stílusú elrendezése, melynek bekezdései a dokumentum megfelelő részeire mutatnak.

Vegye figyelembe, hogy a fenti elemek csak listastruktúra formájában vannak rendezve.

A HTML a következő fő listákat kínálja: felsorolásjeles, számozott és definíciós lista. A következő címkék különféle típusú listák megvalósítására szolgálnak:

,
,

, , . A dokumentumba ágyazott különféle típusú listák segítségével sokféle szolgáltatás valósítható meg, amelyek leírása jelen fejezet tárgya. Figyelembe veszik a különféle típusú építési listák jellemzőit, valamint a beágyazott listák használatát.

pontozott lista

A HTML-ben megvalósított listatípusok egyike a felsorolásjeles lista. Egyébként az ilyen típusú listákat rendezetlen ill

rendezetlen. A vezetéknevet gyakran használják a megfelelő címkenév formális fordításaként.

, melynek segítségével az ilyen típusú listák HTML dokumentumokba rendeződnek (UL - Unordered List, unordered list).

A felsorolásjeles listában elemeinek kiemelésére speciális karaktereket használnak, amelyeket listajelölőknek neveznek (gyakran bullet-nek nevezik, ami az angol bullet kifejezés formális hangzása). A listajelölők megjelenését a böngésző határozza meg, és a beágyazott listák létrehozásakor a böngészők automatikusan diverzifikálják a különböző beágyazási szintű markerek megjelenését.

Címkék

és<LI >

A felsorolásjeles lista létrehozásához egy címketárolót kell használnia, amelyben a lista összes eleme található. A nyitó és záró listacímkék sortörést biztosítanak a lista előtt és után, így elválasztják a listát a dokumentum fő tartalmától, így itt nem kell bekezdéscímkéket használni.


.

Minden listaelemnek címkével kell kezdődnie

• (LI - Listaelem, listaelem). Címke
• nem igényel megfelelő zárócímkét, bár jelenléte elvileg nem tilos. A böngészők általában minden új listaelemet új sorban kezdenek a dokumentum megjelenítésekor.

  A fenti információk elegendőek egy elemi felsorolásos lista összeállításához. Íme egy példa egy HTML-dokumentumra, amely egy felsorolásjeles listát használ, amelynek böngészőben történő megjelenítése a 2. ábrán látható. 2.1.

  Csillagjegyek:

  • Kos

  • Bika

  • Ikrek

  • Folyami rák

  • egy oroszlán

  • Szűz

  • Mérleg

  • Skorpió

  • Nyilas

  • Bak

  • Vízöntő

  • Halak

  Rizs. 2.1. Felsorolásos lista böngészőben történő megjelenítése

  Vegye figyelembe, hogy a címkével jelölt listaelemek mellett

• , más HTML elemek is jelen lehetnek. A fenti példában ezen elemek egyike a sima szöveg, amely nem egy listaelem, hanem a címsor szerepét tölti be.

  jegyzet

  Egyes HTML nyelvű tankönyvekben utalás van arra, hogy a konténer címkét kell használni a lista címének beállításához. (LH - Lista fejléc, listafejléc). Ezt a címkét jelenleg egyik általános böngésző sem ismeri fel, és nem része a HTML specifikációnak. Így használata értelmetlenné válik, bár nem vezet hibához.

  A címkében

  két paraméter adható meg: COMPACT és TYPE.

  A COMPACT paraméter érték nélkül íródik, és arra szolgál, hogy jelezze a böngészőnek, hogy az adott listát kompakt formában kell megjeleníteni. Például csökkenthető a betűtípus vagy a lista sorai közötti távolság stb.

  jegyzet

  Jelenleg a COMPACT paraméter jelenléte a címkében

  nem befolyásolja a listák vezető böngészők általi megjelenítését. Ezért ennek a paraméternek a használata értelmetlen, különösen azért, mert a használatát a HTML 4.0 specifikáció nem javasolja.

  A TYPE paraméter a következő értékeket veheti fel: lemez, kör és négyzet. Ez a paraméter a listajelzők megjelenésének kényszerítésére szolgál. A marker pontos megjelenése a használt böngészőtől függ. A tipikus megjelenítési lehetőségek a következők:

  TÍPUS = lemez – a jelölők tömör körökként jelennek meg; TÍPUS = kör – a jelölők kitöltetlen körként jelennek meg; TÍPUS = négyzet – a jelölők kitöltött négyzetekként jelennek meg. Példa a rögzítésre:

  .

  Az alapértelmezett érték TÍPUS = lemez. A beágyazott felsorolásjeles listáknál az alapértelmezett érték a lemez az első szinten, a kör a második szinten és a négyzet a harmadik szinten. Pontosan ez történik benne legújabb verziói Netscape böngészők és internet böngésző. Vegye figyelembe, hogy más böngészők eltérően jeleníthetik meg a jelölőket. Például a HTML 4.0 specifikációban a TÍPUS = négyzet esetén megjelenő jelölőtípus négyzetes körvonalként van megadva.

  Az azonos értékű TYPE paraméterrel megadható az egyes listaelemek jelölőinek típusa. Ehhez a TYPE paraméter a megfelelő értékkel adható meg a listaelem címkéjében

  • .

    Példa a rögzítésre:

  • .

    jegyzet

    A böngészők különbözőképpen értelmezik a marker típusának jelzését egyedi elem lista. A Netscape böngésző módosítja a jelölő megjelenését ehhez és minden továbbihoz, amíg a jelölő megjelenésének következő újradefiniálása meg nem történik. internet böngésző Az Explorer csak a jelölő megjelenését változtatja meg adott elem.

    Grafikus markerek listája

    Listajelölőként grafikus képeket használhat, amelyeket széles körben használnak vonzó, gyönyörűen megtervezett HTML dokumentumok létrehozására. Valójában ezt a lehetőséget nem közvetlenül a HTML nyelv biztosítja, hanem némileg mesterségesen valósítja meg. Ez nem azt jelenti, hogy ez nem ajánlott vagy elítélendő, csak azt, hogy itt semmilyen speciális HTML nyelvi konstrukció nem kerül felhasználásra.

    Az ötlet megértéséhez meg kell értenie, hogy a listák hogyan valósulnak meg a HTML-oldalakon. Kiderült, hogy a lista tag

    (valamint a lentebb tárgyalt egyéb típusú listacímkék) az egyetlen feladatot látja el - jelzi a böngészőnek, hogy a címke után található összes információt bizonyos mértékig jobbra tolva (behúzással) kell megjeleníteni. címkéket
    • Az egyes listaelemekre mutató szabványos listaelem-jelölőket biztosít.

      Ha grafikus jelölőkkel kell listát készítenünk, akkor címkék nélkül is megtehetjük

    • . Elég lesz a kívánt grafikus képet beszúrni a lista minden eleme elé. Az egyetlen megoldandó feladat ebben az esetben a lista elemeinek egymástól való elkülönítése. Ehhez használhatja a bekezdéscímkéket.

      Vagy kényszerített soremelés
      . Példa egy grafikus jelölőkkel ellátott lista megvalósítására, amelynek megjelenítése a 2. ábrán látható. A 2.2 alább látható:

      Csillagjegyek:
      

      Kos
      

      Bika
      

      Ikrek
      

      Csomag
      

      Oroszlán
      

      Szűz
      

      Mérleg
      

      Skorpió
      

      Nyilas
      

      Bak
      

      Vízöntő
      

      Halak

      

      Rizs. 2.2. Felsorolásos lista grafikus pontokkal

      Az adott példában a Green_ball.gif grafikus fájlt használjuk listaelem-jelölőként. Vegye figyelembe, hogy a grafika használata a HTML-oldalakon jelentősen megnövelheti a továbbított információ mennyiségét. Azonban in ez az eset ez a növekedés rendkívül csekély. Itt ugyanazt a fájlt használja az összes jelölő,

      amely csak egyszer kerül továbbításra. A kisméretű képet tartalmazó fájl mérete is rendkívül kicsi.

      jegyzet

      A grafikus jelölőkkel való listák létrehozásának technikáit a 8. fejezetben tárgyaljuk.

      számozott lista

      A HTML-ben megvalósított lista egy másik típusa a számozott lista. Egyébként az ilyen típusú listákat rendezettnek nevezzük. A vezetéknevet gyakran használják a megfelelő címkenév formális fordításaként.

      , melynek segítségével az ilyen típusú listák HTML dokumentumokba rendeződnek (OL - Rendezett lista, rendezett lista).

      Listák ebből a típusbóláltalában az egyes elemek rendezett sorozatát képviselik. A különbség a felsorolásjeles listáktól az, hogy a számozott listában minden elemet automatikusan megelőz egy sorszám. A számozás típusa a böngészőtől függ, és a listacímkék paramétereivel állítható be. Egyébként a számozott listák megvalósítása nagyjából olyan, mint a felsorolásjeles listák megvalósítása.

      Címkék

      és

      1. Számozott lista létrehozásához használjon konténercímkét, amelyben a lista összes eleme található. A lista kezdő és záró címkéi sortörést biztosítanak a lista előtt és után, így elválasztják a listát a dokumentum fő tartalmától.

         A felsorolásjeles listához hasonlóan a felsorolásjeles lista minden elemének a címkével kell kezdődnie

      2. .

         Íme egy példa egy számozott listát használó HTML-dokumentumra, akinek a kijelzőjeábrán látható a böngésző. 2.3.

         A Földről látható legfényesebb csillagok:

         • Sirius

         • K anopus

         • Arcturus

         • Alfa Centauri

         • Vega

         • K apella

         • Rigel

         • Procyon

         • Achernar

         • Beta Centauri

         • Vetelgeuse

         • Aldebaran

           
           . . .

         • Mizar

           
           . . .

         • Poláris

         

         Rizs. 2.Z. számozott lista

         A címkében

         a következő paraméterek adhatók meg: COMPACT, TYPE és START.

         A COMPACT paraméter jelentése megegyezik a felsorolásjeles listákkal. A TYPE paraméter a lista számozásának meghatározására szolgál. A következő értékeket veheti fel:

         TÍPUS = A - jelölőket állít be latin nagybetűk formájában;

         TYPE = a - jelölőket állít be kisbetűs latin betűk formájában;

         TÍPUS = I - a jelölőket nagy római számok formájában állítja be;

         TYPE = i - jelölőket állít be kis római számok formájában;

         TÍPUS = 1 - a jelölőket arab számok formájában állítja be.

         Alapértelmezés szerint mindig a TÍPUS = 1 értéket használjuk, vagyis az arab számokkal történő számozást. Ez vonatkozik a beágyazott rendezett listákra is. Itt a felsorolásjeles listákkal ellentétben a böngészők alapértelmezés szerint nem készítenek eltérő számozást a listák különböző beágyazási szintjein. Vegye figyelembe, hogy a listaelem száma után mindig megjelenik a "pont" jel is.

         Az azonos értékű TYPE paraméterrel megadható, hogy a lista egyes elemei hogyan legyenek számozva. Ehhez a TYPE paraméter a megfelelő értékkel adható meg a listaelem címkéjében

         1. .

            Példa a rögzítésre:

         2. .

            Címke START paraméter

            lehetővé teszi a lista számozásának megkezdését, nem egytől. A START paraméter értékének mindig természetes számnak kell lennie, függetlenül a listaszámozás típusától. Íme egy példa:
            .

            Ez a jelölés határozza meg a lista számozását a nagy latin "E" betűből. Más típusú számozásnál a START=5 bejegyzés beállítja a számozást az „5” számból, a „V” római számból stb.

            A lista számozásának típusa és a számértékek megváltoztatása a lista bármely eleméhez is elvégezhető. Címke

            5. számozott listák esetén lehetővé teszi a TYPE és VALUE paraméterek használatát. A TYPE paraméter ugyanazokat az értékeket veheti fel, mint a címkénél
               .

               P rekord példa:

               1. .

                  jegyzet

                  A böngészők különbözőképpen értelmezik az egyes listaelemek számozási típusának jelzését. A Netscape böngésző módosítja ennek az elemnek és az összes következő elemnek a számozását, amíg a következő felülírást nem találja. Az Internet Explorer csak ennek az elemnek a számmegjelenését változtatja meg.

                  Wa címke VALUE paraméterének értéke

               2. - lehetővé teszi a lista adott elemének számának megváltoztatását. Ez megváltoztatja az összes következő elem számozását. Tipikusan olyan listákat használnak, ahol bizonyos elemek kimaradnak. Egy ilyen listára adtunk példát fent (2.3. ábra). Rendezett listát ad a legfényesebb csillagokról, amelyben az 58. és a 75. helyen olyan csillagok találhatók, amelyek jól láthatók a szélességi fokainkon (a Mizar a Nagy Ursa csillagkép legfényesebb csillaga, a Sarkcsillag pedig a Kis Ursa).

                  Íme egy másik eredeti példa a különféle típusú számozás használatára. Az alábbi HTML kód három különböző számozású listát határoz meg. A könnyebb áttekinthetőség érdekében a listák mindegyike a táblázat külön cellájába kerül. Mindhárom lista azonos, és csak a számozás típusában különbözik: a táblázat első oszlopában - arab számok, a másodikban - római, a harmadikban pedig a számozás latin betűkkel történik. Vegye figyelembe, hogy a lista elemei üresek, azaz bármely címke után

               3. nincs adat. Egy ilyen példa használható az arab és a római számok megfelelőségi táblázataként. Kiderült, hogy bármely listákat támogató böngészővel létrehozható egy ilyen táblázat (2-4. ábra), ha beírja a megadott HTML kódot. A római számozás a 3999-es értékig megfelelően működik. A jobb oldali oszlopot megvizsgálva megértheti, hogyan történik a latin betűs számozás. Az egybetűs számozás (A-tól Z-ig) kimerülése után az első kétbetűs szám - AA stb. - lesz a következő szám.

                  . . .

                  . . .

                  . . .

                  

                  Rizs. 2.4. A HTML-lista számozásának különböző típusai

                  Definíciók listája

                  A definíciós listák, más néven terminusdefiníciós szótárak, a lista egy speciális fajtája. Más típusú listákkal ellentétben a definíciós lista minden eleme mindig két részből áll. A listaelem első része a definiált kifejezést tartalmazza, a második rész pedig a szöveget szótári bejegyzés formájában, feltárva a kifejezés jelentését.

                  A definíciós listák a tárolócímke használatával vannak megadva

                  (Definíciós lista). A tárolócímke belsejében

                  (Definition Term) meg van jelölve a definiált kifejezés, és a címke

                  (Definíció leírása) - egy bekezdés a definíciójával. Címkékhez

                  és

                  elhagyhatja a megfelelő záró címkéket.

                  Általában a definíciók listája a következő:

                  Term

                  A fogalom meghatározása

                  A címke utáni szövegben

                  blokk szintű elemek, például bekezdéscímkék, nem használhatók

                  vagy főcímek

                  -

                  . Általános szabály, hogy a meghatározandó kifejezés szövege egy sorban legyen. A kifejezés definícióját tartalmazó szöveg jelenik meg a következővel kezdve következő sor(vagy egyes böngészőknél egy sor) a kifejezés definíciója után, jobbra behúzva. A címke után elhelyezett információban

                  , blokk szintű elemek helyezhetők el. Ebből különösen az következik, hogy a definíciók listái egymásba ágyazhatók.

                  A címkében

                  a COMPACT paraméter megadható, melynek célja hasonló a fentebb leírt többi listához.

                  Íme egy példa egy HTML-dokumentumra, amely definíciók listáját használja:

                  A tipikus emberi temperamentumok osztályozása,
                  alapított

                  Hippokratész nézeteiről

                  Flegma személy

                  Passzív, nagyon ép, lassan alkalmazkodik;
                  a hangulat stabil, kevéssé érzékeny a külső hatásokra;
                  az érzelmi reakciók letargiája és az akarati tevékenység lassúsága
                  
                  

                  bizakodó

                  Aktív, energikus, alkalmazkodó, -
                  az érzelmi reakciók élénksége és mozgékonysága, az akarati megnyilvánulások gyorsasága és ereje
                  
                  

                  Kolerás

                  Aktív, nagyon energikus, kitartó;
                  az érzelmi reakciók impulzivitása és erőssége, az erőszakos akarati megnyilvánulások
                  
                  

                  mélabús

                  Passzív, könnyen fárasztható, nehezen alkalmazkodó -
                  az akarati megnyilvánulások gyengesége és a depressziós hangulat túlsúlya, az önbizalom

                  Az adott HTML dokumentum böngészőben való megjelenítését a ábra mutatja. 2.5.

                  

                  Rizs. 2.5. Definíciók listája (hasonlít egy szótár bejegyzéscsoportjára)

                  Típus listák

                  és

                  Típus listák

                  és ma már gyakorlatilag nem használják, bár a vezető böngészők továbbra is támogatják őket. A HTML 4.0 specifikációjában mindkét listatípus elavultként van megjelölve. Ehelyett a címke által meghatározott felsorolásjeles listák használata javasolt

                  .

                  Kezdetben az ilyen típusú listákat tömörebbnek képzelték el, mint a hagyományos felsorolásos listákat. A listák elemeinek írására vonatkozó szabályok szerint nem használhattak blokkelemeket, ami azt jelenti, hogy az ilyen típusú listák egymásba ágyazása lehetetlen. A lista minden eleme egy sor szöveg volt.

                  Olyan listákhoz, mint

                  tervbe vették, hogy korlátozzák a listaelem szövegének hosszát (24 karakter). Egy ilyen korlátozás lehetővé tenné

                  típuslisták

                  a könyvtárak listázásához hasonló formában operációs rendszer UNIX és MS-DOS a /W kapcsoló használatakor (több oszlopban). Ezenkívül az ilyen típusú listaelemeknél nem jelentek meg felsorolások.

                  Jelenleg mindezek az ötletek nem valósultak meg, mivel az ilyen típusú listák további használata nem javasolt. A böngészők modern verziói pontosan ugyanúgy jelenítik meg az ilyen típusú listákat, mint az ilyen típusú listákat

                  .

                  Beágyazott listák

                  Vannak esetek, amikor az egyik típusú listaelemnek tartalmaznia kell egy azonos típusú vagy másik típusú listát. Ez többszintű vagy beágyazott listákat szervez. A HTML lehetővé teszi a különböző típusú listák tetszőleges egymásba ágyazását, de ezek rendezésénél körültekintően kell eljárni.

                  Alább látható a dokumentum HTML kódja beágyazott listákkal, melynek megjelenítése a 2. ábrán látható. 2.6. Ebben a példában a felsorolásjeles lista minden elemének megvan a maga számozott listája.

                  Egyes bolygók műholdjai

                  • Zempa

                    1. hold

                  • mapc

                    1. Phobos

                    2. Deimos

                  • Uránusz

                    1. Ariel

                    2. Umbriel

                    3. Titánia

                    4. Oberon

                    5. Miranda

                  • Neptun

                    1. Triton

                    2. Sellő

                    A HTML-ben megvalósított lista egy másik típusa a számozott lista. Egyébként az ilyen típusú HTML-listákat rendezettnek nevezzük. A vezetéknevet gyakran használják a megfelelő címkenév formális fordításaként.

                    , melynek segítségével az ilyen típusú listák HTML dokumentumokba rendeződnek (OL - Rendezett lista, rendezett lista).

                    Az ilyen típusú listák általában az egyes elemek rendezett sorozatát jelentik. A különbség a felsorolásjeles listáktól az, hogy a számozott listában minden elemet automatikusan megelőz egy sorszám. A számozás típusa a böngészőtől függ, és a listacímkék paramétereivel állítható be. Egyébként a számozott listák megvalósítása nagyjából olyan, mint a felsorolásjeles listák megvalósítása.

                    címkéket

                    és

                    Számozott lista létrehozásához használja a konténercímkét, amelyen belül a lista összes eleme található. A lista kezdő és záró címkéi sortörést biztosítanak a lista előtt és után, így elválasztják a listát a dokumentum fő tartalmától.

                    A felsorolásjeles listához hasonlóan a felsorolásjeles lista minden elemének a címkével kell kezdődnie

                    1. .

                       Íme egy példa egy számozott listát használó HTML-dokumentumra, akinek a kijelzőjeábrán látható a böngésző. 2.3.

                       A Földről látható legfényesebb csillagok:

                       • Sirius

                       • K anopus

                       • Arcturus

                       • Alfa Centauri

                       • Vega

                       • K apella

                       • Rigel

                       • Procyon

                       • Achernar

                       • Beta Centauri

                       • Vetelgeuse

                       • Aldebaran

                       • Mizar

                       • Poláris

                       Rizs. 2.Z. számozott lista

                       A címkében

                       a következő paraméterek adhatók meg: COMPACT, TYPE és START.

                       A COMPACT paraméter jelentése megegyezik a felsorolásjeles listákkal. A TYPE paraméter a lista számozásának meghatározására szolgál. A következő értékeket veheti fel:

                       TÍPUS = A - jelölőket állít be latin nagybetűk formájában;

                       TYPE = a - jelölőket állít be kisbetűs latin betűk formájában;

                       TÍPUS = I - a jelölőket nagy római számok formájában állítja be;

                       TYPE = i - jelölőket állít be kis római számok formájában;

                       TÍPUS = 1 - a jelölőket arab számok formájában állítja be.

                       Alapértelmezés szerint mindig a TÍPUS = 1 értéket használjuk, vagyis az arab számokkal történő számozást. Ez vonatkozik a beágyazott rendezett listákra is. Itt a felsorolásjeles listákkal ellentétben a böngészők alapértelmezés szerint nem készítenek eltérő számozást a listák különböző beágyazási szintjein. Vegye figyelembe, hogy a listaelem száma után mindig megjelenik a "pont" jel is.

                       Az azonos értékű TYPE paraméterrel megadható, hogy a lista egyes elemei hogyan legyenek számozva. Ehhez a TYPE paraméter a megfelelő értékkel adható meg a listaelem címkéjében

                       1. .

                          Példa a rögzítésre:

                       2. .

                          Címke START paraméter

                          lehetővé teszi a lista számozásának megkezdését, nem egytől. A START paraméter értékének mindig természetes számnak kell lennie, függetlenül a listaszámozás típusától. Íme egy példa:
                          .

                          Ez a jelölés határozza meg a lista számozását a nagy latin "E" betűből. Más típusú számozásnál a START=5 bejegyzés beállítja a számozást az „5” számból, a „V” római számból stb.

                          A lista számozásának típusa és a számértékek megváltoztatása a lista bármely eleméhez is elvégezhető. Címke

                          5. számozott listák esetén lehetővé teszi a TYPE és VALUE paraméterek használatát. A TYPE paraméter ugyanazokat az értékeket veheti fel, mint a címkénél
                             .

                             Példa a rögzítésre:

                             1. .

                                jegyzet

                                A böngészők különbözőképpen értelmezik az egyes listaelemek számozási típusának jelzését. A Netscape böngésző módosítja ennek az elemnek és az összes következő elemnek a számozását, amíg a következő felülírást nem találja. Az Internet Explorer csak ennek az elemnek a számmegjelenését változtatja meg.

                                A címke VALUE paraméterének értéke

                             2. - lehetővé teszi a lista adott elemének számának megváltoztatását. Ez megváltoztatja az összes következő elem számozását. Tipikusan olyan listákat használnak, ahol bizonyos elemek kimaradnak. Egy ilyen listára adtunk példát fent (2.3. ábra). Rendezett listát ad a legfényesebb csillagokról, amelyben az 58. és a 75. helyen olyan csillagok találhatók, amelyek jól láthatók a szélességi körünkön (a Mizar a Nagy Ursa csillagkép legfényesebb csillaga, a Sarkcsillag pedig a Kis Ursa).

                                Íme egy másik eredeti példa a különféle típusú számozás használatára. Az alábbi HTML kód három különböző számozású listát határoz meg. A könnyebb áttekinthetőség érdekében a listák mindegyike a táblázat külön cellájába kerül. Mindhárom lista azonos, és csak a számozás típusában különbözik: a táblázat első oszlopában - arab számok, a másodikban - római, a harmadikban pedig a számozás latin betűkkel történik. Vegye figyelembe, hogy a lista elemei üresek, azaz bármely címke után

                             3. nincs adat. Egy ilyen példa használható az arab és a római számok megfelelőségi táblázataként. Kiderült, hogy bármely listákat támogató böngészővel létrehozható egy ilyen táblázat (2-4. ábra), ha beírja a megadott HTML kódot. A római számozás a 3999-es értékig megfelelően működik. A jobb oldali oszlopot megvizsgálva megértheti, hogyan történik a latin betűs számozás. Az egybetűs számozás (A-tól Z-ig) kimerülése után az első kétbetűs szám - AA stb. - lesz a következő szám.

                                
                                . . .

                                

                                Rizs. 2.4. A HTML-lista számozásának különböző típusai

                                A HTML három listát támogat különböző típusok, amelyek mindegyikének megvannak a saját feltételei:

                                • - számozott (számokat vagy betűket használó) lista, melynek minden eleme sorszámmal (betűvel) rendelkezik;
                                  1. - felsorolásjeles (nem számozott) lista, amelynek minden eleme mellé jelölőt helyeznek el (nem pedig numerikus vagy alfabetikus karaktereket, amelyek sorozatszámot jeleznek);

                                     • – A definíciók listája név/érték párokból áll, beleértve a kifejezéseket és meghatározásokat.

                                     Számozott listák

                                     Egy számozott listába a böngésző automatikusan beilleszti az elemszámokat, valamilyen értéktől kezdve (általában 1-től). Ez lehetővé teszi a listaelemek beszúrását és eltávolítását a számozás megzavarása nélkül, mivel a fennmaradó számok automatikusan újraszámításra kerülnek.
                                     A számozott listák blokk elem segítségével jönnek létre

                                     (az angolból. Rendezett lista - számozott lista). A konténer mellett
                                     a lista minden eleméhez egy elem kerül elhelyezésre
                                     1. (az angol listaelemből - listaelem). Az alapértelmezett egy számozott lista arab számokkal.
                                        Címke
                                        a következő szintaxissal rendelkezik:
                                        1. elem 1
                                        2. 2. elem
                                        3. 3. elem

                                        A számozott listaelemeknek több listaelemet kell tartalmazniuk, amint az a következő példában látható:

                                        Példa: Számozott lista

                                        • Próbáld ki magad "

                                        Lépésről lépésre szóló utasítás

                                        1. Szerezd meg a kulcsot
                                        2. Helyezze be a kulcsot a zárba
                                        3. Fordítsa el a kulcsot két fordulattal
                                        4. Vegye ki a kulcsot a zárból
                                        5. Nyissa ki az ajtót

                                        Lépésről lépésre szóló utasítás

                                        1. Szerezd meg a kulcsot
                                        2. Helyezze be a kulcsot a zárba
                                        3. Fordítsa el a kulcsot két fordulattal
                                        4. Vegye ki a kulcsot a zárból
                                        5. Nyissa ki az ajtót

                                        Néha a meglévő HTML-kódok megtekintésekor találkozni fog az érvvel típus elemben

                                        , amely a számozás típusának megadására szolgál (betűk, római és arab számok stb.). Szintaxis:

                                        Itt: írja be - a lista karakterei:

                                        • A - latin nagybetűk (A, B, C . . .);
                                        • a - kisbetűs latin betűk (a, b, c . . .);
                                        • I - nagy római számok (I, II, III . . . .);
                                        • i - kis római számok (i, ii, iii . . .);
                                        • 1 - Arab számok (1, 2, 3 . . .) (alapértelmezés szerint használatos).

                                        Ha azt szeretné, hogy a lista 1-től eltérő számmal kezdődjön, akkor ezt az attribútum segítségével kell megadnia Rajt címke

                                        .
                                        A következő példa egy rendezett listát mutat be nagy római számokkal és kezdő érték XLIX:

                                        A számozás az attribútum használatával is elindítható érték, amely hozzáadódik az elemhez

                                        1. a következő módon:

                                        7. Ebben az esetben a lista sorszámozása megszakad és ettől kezdve a számozás elölről indul, jelen esetben héttől.

                                           Példa az attribútum használatára érték címke

                                        8. , amely lehetővé teszi egy adott listaelem számának megváltoztatását:

                                           Ebben a példában az „Első listaelem” az 1-es, a „Második listaelem” a 7-es, a „Harmadik listaelem” pedig a 8-as.

                                           Számozott listák formázása CSS-sel

                                           A listaszámok módosításához használja a tulajdonságot lista-stílusú css stíluslapok:

                                           Számozott listastílusok

                                           Példa	Jelentése	Leírás
                                           a, b, c	alsó-alfa	Kisbetűs
                                           A, B, C	felső-alfa	Nagybetűvel
                                           i, ii, iii	alsó római	Római számok kisbetűvel
                                           I, II, III	felső római	Római számok nagybetűkkel

                                           Példa: CSS-tulajdonság alkalmazása lista-stílusú

                                           Felsorolásos listák

                                           Felsorolásos listák lényegében hasonló a számozottakhoz, csak ezek nem tartalmazzák a bekezdések sorszámozását. A felsorolásjeles listák blokk elem használatával jönnek létre

                                           (az angol Unordered List - egy rendezetlen lista). A lista minden eleme, akárcsak a számozott listák esetében, egy címkével kezdődik
                                           • . A böngésző minden listaelemet behúz, és automatikusan megjeleníti a felsorolásjeleket.
                                             Címke
                                             a következő szintaxissal rendelkezik:
                                             • Első pont
                                             • Második bekezdés
                                             • Harmadik bekezdés

                                             A következő példában láthatja, hogy alapértelmezés szerint minden listaelem elé egy kis kitöltött kör jelölő kerül hozzáadásra:

                                             A címke belsejében

                                             • nem szükséges csak szöveget elhelyezni, a streaming tartalom bármely eleme (linkek, bekezdések, képek stb.) elhelyezhető.

                                               Beágyazott listák

                                               Bármely lista beágyazható egy másikba. Egy elem belsejében
                                             • lehetőség van beágyazott lista, vagy második szintű lista létrehozására. Lista beágyazásához írjon le egy új listát egy elemen belül
                                             • már létező lista. Ha az egyik felsorolásjeles listát egy másikba ágyaz be, a böngésző automatikusan megváltoztatja a második szintű lista felsorolásjeles stílusát. Bármely lista beágyazható egy másikba. A következő példa a számozott lista második elemébe ágyazott felsorolásjeles lista szerkezetét mutatja be.

                                               Példa: Beágyazott listák

                                               • Próbáld ki magad "
                                               • hétfő
                                                 1. Levél küldés
                                                 2. Látogatás a szerkesztőnél
                                                    • Témaválasztás
                                                    • Dekoratív design
                                                    • Zárójelentés
                                                 3. Esti üzenet megtekintése
                                               • kedd
                                                 1. Módosítsa az ütemtervet
                                                 2. Képek beküldése
                                               • Szerda...
                                               • hétfő
                                                 1. Levél küldés
                                                 2. Látogatás a szerkesztőnél
                                                    • Témaválasztás
                                                    • Dekoratív design
                                                    • Zárójelentés
                                                 3. Esti üzenet megtekintése
                                               • kedd
                                                 1. Módosítsa az ütemtervet
                                                 2. Képek beküldése
                                               • Szerda...

                                               Felsorolásos listák formázása

                                               A változásért kinézet listajelzőknek a tulajdonságot kell használniuk lista-stílusú css stíluslapok:

                                               A következő példa a felsorolásjeles listák különböző stílusait mutatja be:

                                               Példa: Felsorolásos listastílusok

                                               • Próbáld ki magad "
                                               • Kávé
                                               • Kávé
                                               • Kávé
                                               • Kávé

                                               Lemez:

                                               • Kávé
                                               • Tej

                                               Kör:

                                               • Kávé
                                               • Tej

                                               Négyzet:

                                               • Kávé
                                               • Tej

                                               Egyik sem:

                                               • Kávé
                                               • Tej

                                               Grafikus markerek.

                                               A HTML-ben lehetőség van grafikus jelölőkkel való lista létrehozására. Egy dolog, ha a listajelölők szabványos körök vagy négyzetek, és egészen más, ha a fejlesztő maga választja ki a jelölőt az oldaltervnek megfelelően. Annak érdekében, hogy a listaelemek szépek legyenek, gyakran használnak kis képeket.
                                               Ha egy szokásos jelölőt grafikusra szeretne cserélni, cserélje ki a tulajdonságot lista-stílusú ingatlanonként lista-stílus-képés adja meg a kép URL-jét:

                                               Példa: Grafikus markerek

                                               • Próbáld ki magad "

                                               csillagjegyek

                                               • Bika
                                               • Ikrek

                                               csillagjegyek

                                               • Kos
                                               • Bika
                                               • Ikrek

                                               Definíciók listája (leírások)

                                               A definíciós listák nagyon hasznosak például a személyes szószedet létrehozásához. A definíciók listájának minden eleme két részből áll: a kifejezésből és annak meghatározásából.
                                               A teljes listát egy elembe helyezi

                                               (az angolból. Definition List - a definíciók listája). Tartalmaz címkéket

                                               (az angolból. Definition Term - meghatározott szó, kifejezés) és

                                               (az angol nyelvből. Definition Description - a definiált kifejezés leírása).
                                               A definíciós listákat gyakran használják tudományos, műszaki és oktatási publikációkban, segítségükkel szószedeteket, szótárakat, segédkönyveket stb.

                                               A leírások listájának általános felépítése a következő:

                                               Első időszak

                                               Az első kifejezés leírása

                                               Második időszak

                                               A második kifejezés leírása

                                               A következő példa az egyiket mutatja be lehetséges felhasználások definíciós lista:

                                               Példa: Definíciók listája

                                               • Próbáld ki magad "

                                               World Wide Web – angol nyelvből. A World Wide Web (WWW) egy elosztott rendszer, amely hozzáférést biztosít az internetre csatlakoztatott különféle számítógépeken található, egymással összekapcsolt dokumentumokhoz. Az internet hálózatok halmaza, amelyek egyetlen csereprotokoll segítségével továbbítják az információkat. A webhely olyan egyedi weboldalak halmaza, amelyeket hivatkozások kapcsolnak össze, és amelyek kialakítása közös.

                                               A világháló

                                               - angolról. A World Wide Web (WWW) egy elosztott rendszer, amely hozzáférést biztosít az internetre csatlakoztatott különféle számítógépeken található, egymással összekapcsolt dokumentumokhoz.

                                               Internet

                                               - hálózatok halmaza, amelyek egyetlen adatcsere protokollt használnak az információ továbbítására.

                                               Webhely

                                               - különálló weboldalak halmaza, amelyeket linkek és egyetlen design kapcsolnak össze.

                                               Alapértelmezés szerint a kifejezés szövege a böngészőablak bal szélén található, a kifejezés leírása pedig alul és jobbra tolva található.

                                               A számozott listák sorozatszámukkal ellátott elemek halmaza. A számozás típusa és típusa a címke attribútumaitól függ

                                               , amely a lista létrehozására szolgál. A számozott lista minden elemét egy címke azonosítja
                                               1. az alábbiak szerint.
                                                  1. Első pont
                                                  2. Második bekezdés
                                                  3. Harmadik bekezdés

                                                  Ha nem ad meg további attribútumokat, és csak írjon egy címkét

                                                  , akkor alapértelmezés szerint az arab számokat tartalmazó lista (1, 2, 3,...) kerül felhasználásra, ahogy az a 11.3. példában látható.

                                                  Példa 11.3. Hozzon létre egy számozott listát

                                                  Munka az idővel

                                                  1. pontosság megteremtése (soha nem fog elkésni semmiről);
                                                  2. gyógyír a pontosságra (soha nem fogsz rohanni sehova);
                                                  3. változás az idő és az órák érzékelésében.

                                                  Ennek a példának az eredménye az ábrán látható. 11.3.

                                                  Rizs. 11.3. Számozott listanézet

                                                  Vegye figyelembe, hogy a számozott lista automatikus behúzást is hozzáad a szöveg tetejéhez, aljához és bal oldalához.

                                                  A következő értékek számozási elemként működhetnek:

                                                  • arab számok (1, 2, 3, ...);
                                                  • latin nagybetűk (A, B, C, ...);
                                                  • kisbetűs latin betűk (a, b, c, ...);
                                                  • nagybetűs római számok (I, II, III, ...);
                                                  • kisbetűs római számok (i, ii, iii, ...).

                                                  A címke type attribútuma a számozott lista típusának jelzésére szolgál.

                                                  . Lehetséges értékeit a táblázat tartalmazza. 11.2.
                                                  Tab. 11.2. Számozott listatípusok

                                                  Lista típusa	HTML kód	Példa
                                                  Arab számok		1. Cseburaska 2. Krokodil Gena 3. Shapoklyak
                                                  A latin ábécé nagybetűi		A. Cseburaska B. Krokodil Gena C. Shapoklyak
                                                  A latin ábécé kisbetűi		a. Cseburaska b. Krokodil Gena c. Shapoklyak
                                                  Római számok nagybetűvel		I. Cseburaska II. Krokodil Gena III. Shapoklyak
                                                  Római számok kisbetűvel		én. Cseburaska ii. Krokodil Gena iii. Shapoklyak

                                                  A lista egy adott értékkel történő indításához használja a címke start attribútuma

                                                  . Nem számít, hogy melyik listatípus van beállítva a type -vel, a start attribútum ugyanúgy működik mind a római, mind az arab számoknál. A 11-4. példa bemutatja, hogyan hozhat létre listát nyolccal kezdődő nagybetűs római számokkal.

                                                  11.4. példa. Lista számozás

                                                  8. Magnum király XLIV
                                                  9. Szigfrid király XVI
                                                  10. Zsigmond király XXI
                                                  11. I. Husbrandt király

                                                  Ennek a példának az eredménye az ábrán látható. 11.4.

                                                  

                                                  Rizs. 11.4. Számozott lista római számokkal

                                                  A HTML-ben címkék egész halmaza felel a listák szervezéséért, amelyek szervezésének meg kell felelnie bizonyos adatstrukturálási szabályoknak.

                                                  Ötödik szabvány html verziók 3 típusú listák támogatottak: számozott listák, felsorolásjeles listák és definíciós listák. Lehetővé teszi a listák egymásba ágyazását is, így beágyazott többszintű listákat hozhat létre.

                                                  számozott lista

                                                  számozott lista olyan elemek (listaelemek) halmaza, amelyeknek meghatározott sorrendje van. A számozott lista minden eleméhez tartozik egy egyedi jelölő, amely jelzi az elem sorrendjét a lista többi eleméhez képest. Alapértelmezés szerint a számozott listaelemek jelölői számok. Az első tétel az 1-es szám alá kerül, a második a 2-es szám alá, és így tovább.

                                                  A számozott listák leggyakoribb példái a különféle ételek elkészítésének receptjei. Mivel minden recept egy számozott lista, egyértelmű műveletsorral.

                                                  Számozott listák létrehozásához HTML-ben használja a címkét

                                                  , amelyen belül az adatokkal rendelkező lista elemei találhatók. Minden listaelemet címkével azonosítanak.
                                                  1. :

                                                     Számozott lista:

                                                     1. Kávé
                                                     2. Tea
                                                     3. Tej
                                                     Próbáld ki "

                                                     megjegyzés: tag

                                                     mint gyermek elemek csak címkéket tartalmazhat
                                                     1. , vagyis a számozott lista teljes tartalmát az elemeken belül kell elhelyezni
                                                     2. . Címke
                                                     3. , viszont nincs tartalmi korlátozása, így elhelyezhet benne bekezdéseket, képeket, hivatkozásokat, táblázatokat, egyéb listákat stb.

                                                        pontozott lista

                                                        pontozott lista- ezek rendezetlen, azaz rendezetlen elemlisták, amelyek sorrendje nem számít. Az összes felsorolásjeles listaelem ugyanazokkal a pontokkal rendelkezik, alapértelmezés szerint kis fekete körökként jelennek meg.

                                                        A HTML-címke felsorolásjeles listák létrehozására szolgál.

                                                        , amelyen belül a lista elemei találhatók (mint a számozott listák esetében, a címke használatos
                                                        • , amely a lista összes megjelenített tartalmát tartalmazza):

                                                          Felsorolásos lista:

                                                          • Kávé
                                                          • Tea
                                                          • Tej
                                                          Próbáld ki "

                                                          A markerek típusai

                                                          A felsorolt ​​felsorolásjelek típusai a type attribútummal módosíthatók. Ez az attribútum öt jelölőtípust támogat:

                                                          A felsorolásjeles listák nem rendelkeznek type attribútummal, ezért nem módosíthatja a felsorolásjeles listákban szereplő felsorolásjelek típusát HTML használatával. A marker típusának megváltoztatásához ebben az esetben használhatja CSS tulajdonság m list-style-type , amellyel az alapértelmezett értéken kívül még két jelölőtípust választhatunk ki: kör vagy négyzet .

                                                          A listák jelölőinek megváltoztatása:

                                                          Számozott lista type="a" attribútummal:

                                                          1. Almák
                                                          2. Banán
                                                          3. Citrom

                                                          Számozott lista type="I" attribútummal:

                                                          1. Almák
                                                          2. Banán
                                                          3. Citrom

                                                          A felsorolásjeles jelölők típusai:

                                                          • Almák
                                                          • Banán
                                                          • Citrom
                                                          • Almák
                                                          • Banán
                                                          • Citrom
                                                          Próbáld ki "

                                                          A listastílus-típusú CSS-tulajdonság a felsorolásjelekkel ellátott listákhoz tartozó felsorolásjel-típusokon kívül számos különféle felsorolásjellel rendelkezik a számozott listákhoz. De nem mindig elég az egyik szabványos jelölőt egy másikra cserélni a lista gyönyörű kialakításához. Listák tervezéséhez jobb a CSS használata, amely lehetővé teszi nemcsak a marker megjelenésének megváltoztatását, hanem a jelölők képekkel való helyettesítését, a helyük szabályozását és a behúzás szabályozását is. Megnézheti, hogyan kell mindezt megtenni.

                                                          vízszintes lista

                                                          Ha HTML-listát használ vízszintes menü létrehozásához, akkor a listaelemeket ugyanabban a sorban kell egymás mellé rendezni. HTML-lel ezt nem lehet megtenni, ezért CSS-t kell használnia.

                                                          Vízszintes lista létrehozásához be kell állítania a listaelemek CSS megjelenítési tulajdonságát inline vagy inline-block értékre, attól függően, hogy milyen egyéb tulajdonságokat fog használni.

                                                          számozott lista

                                                          1. Almák
                                                          2. Banán
                                                          3. Citrom

                                                          Felsorolásos lista:

                                                          • Almák
                                                          • Banán
                                                          • Citrom
                                                          Próbáld ki "

                                                          Ezt követően a lista összes eleme egy sorba kerül. Felhívjuk figyelmét, hogy a felsorolásjelek eltűnnek a listaelemekből, és nem is lesz közöttük szóköz, de a lista bal oldalán lévő behúzás megmarad.

                                                          Hogyan lehet egy vízszintes listát vízszintes menüvé alakítani, láthatja.