Beágyazott listák html-ben. számozott lista
A HTML-ben kétféle lista létezik: számozott és számozatlan. Létrehozásuk szinte azonos. Még a címkék is egy karakterben különböznek. Létrehozhat olyanokat is, amelyek számozott és felsorolásjeleket is tartalmazhatnak.
Ezek a listák tetszőleges módon átalakíthatók. Minden a képzeletétől függ. Először a szabványos listákat nézzük meg, ugyanúgy, mint a Word szerkesztőben, majd a felismerhetetlenségig javítjuk és megtervezzük őket.
Számozott lista HTML
Szabályos számozást a következő címkék segítségével lehet létrehozni:
Az egyszerű listák így néznek ki
A szabványok szerint minden listaelemnek egy nyitó és záró li címkén belül kell lennie. De ha nem teszel fel zárócímkét, akkor az eredmény pontosan ugyanaz lesz. A kezelő nagyon okos. A listaátalakítás során elemzi a nyitó címkéket. Ha újat lát
Így a listák az alábbiak szerint készíthetők.
De a szakemberek szemszögéből ez helytelen.
A rendezetlen (vagy felsorolásjeles) listák pontosan ugyanígy jönnek létre, csak az ol címke helyett azt írják, hogy ul.
Nincsenek benne számok vagy betűk - csak különféle szimbólumok, amelyeket markereknek neveznek.
HTML többszintű számozott lista
Sok felhasználó érdekli ez a lehetőség. Ezért meg kell jegyezni, hogy bármely számozott HTML lista többszintűvé tehető. További szintek lehetnek azonosak vagy megjelölve.
A fenti példában látható lista létrehozásához a következőket kell beírni.
Vegye figyelembe, hogy ebben a kódban, az első példákkal ellentétben, hozzáadásra került a type attribútum. Ennek köszönhetően mind a számozott, mind a felsorolásjeles listáknál megadhatja a rendezés típusát.
A számozáshoz az ábécét vagy a számok típusát jelöljük, más esetekben pedig a jelölő típusát.
Ha speciális HTML-címkét használ, a számozott lista bármilyen lehet.
A type attribútumot a táblázatból tetszőleges értékkel megadhatja. Vagy a css stílusosztályban adja meg a list-style-type-ot a kívánt rendezési típussal.
Az értékek fordítása meglehetősen egyszerű. Elegendő angol nyelvtudás. De még ha nem is tudja lefordítani a "kör", "négyzet" stb. szavakat, vizuálisan megértheti, mi lesz az eredmény, ha megadja ezeket az értékeket a type attribútumban.
Számozott listák esetén használja a következő lehetőségeket:
- 1 - arab számok;
- A - nagybetűk;
- a - kisbetűs latin betűk;
- I - nagy római számok;
- i - kisbetűs római számok.
Az alapértelmezett mindig egy listát tartalmaz, vagyis ha nem adsz meg semmit, akkor ez egyenértékű a type="1"-el.
Ezenkívül a számozott listák tetszőleges helyről kezdődhetnek. Alapértelmezés szerint a kimenet 1-től származik. De ha akarod, legalább százzal kezdheted. Ehhez meg kell adni a start attribútumot tetszőleges értékkel.
Ráadásul a következtetés fordított sorrendben is levonható. Ehhez fordítva kell írni.
Lista tervezés
A számozott HTML-lista olyan gyönyörűen alakítható, hogy nem biztos, hogy azonnal észreveszi, hogy ez egy normál lista, és nem egy Photoshopban készült kép.
Itt vannak példák a gyönyörű listákra.
Amint a példából látható, megváltoztathatja a számozás megjelenését és maguknak az elemeknek a megjelenését.
Létrehozhat egy ilyen rendszeres listát.
A css stílusoknál meg kell adni az ol címkék kialakítását. Kérjük, vegye figyelembe, hogy ebben az esetben a beállítások a teljes webhely összes olyan listájára vonatkoznak, ahol ezt a stílusfájlt használják.
Először fontolja meg a kerek listás kialakítású lehetőséget. Vissza a listakódhoz. Itt van megadva a kerekített listás osztály. Ezzel az osztályral kell bütykölni, hogy ilyen szépséget készíts. Bármilyen nevet adhat az osztálynak.
Most fontolja meg a négyzet alakú kialakítást.
A stílusok nagyon hasonlóak. A különbség az, hogy az első esetben az elemet css képességek segítségével kerekítik.
Egy professzionális elrendezéstervezőnek előre kell látnia és meg kell értenie, hogy nem minden felhasználó használ modern számítógépeket. Nem mindenkinek van telepítve a Windows 7, 8, 10. A felhasználók egy része még mindig Windows XP-t használ, és az Internet Explorer böngésző régebbi verzióit használja.
Általános szabály, hogy az elemek szinte minden modern tervezési fejlesztését nem támogatják. A felhasználónak úgy tűnik, hogy a webhely kialakításán egyáltalán nem dolgoztak. Hogy minden elmúlt. Az elemek összefutnak. Ennek elkerülése érdekében ki kell számítania az összes lehetőséget.
Egyes webmesterek szemet hunynak róluk, mivel piaci részesedésük egyre kisebb a mai piacon. De egy szakember számára minden látogató fontos, különösen, ha egy kereskedelmi oldalról van szó.
Csináljon valami mindenki számára megfelelőt, vagy fontolja meg az összes böngészőbeállítást.
A HTML nyelv speciális címkéket biztosít az információk listák formájában történő megjelenítéséhez. A listák az egyik leggyakrabban használt adatmegjelenítési forma elektronikus és nyomtatott dokumentumokban egyaránt. Szinte naponta találkozunk listákkal, legyen szó arról, hogy mit kell tennünk a boltban, a tanulókat az osztályteremben, vagy csak olyan dolgokat, amelyeket el kell végeznünk. A listaszerkezetek rendszerezésének lehetősége számos szövegszerkesztőben elérhető, különösen a Microsoft Word erőteljes szövegszerkesztője kényelmes eszközökkel rendelkezik a különféle típusú listák formázásához (a HTML-listák Microsoft Word használatával történő létrehozásának lehetőségeit 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, hogy olvasható megjelenést kapjon.
- Ö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:
- ,
- (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 felsorolásjeles listát használ, amelynek böngészőben történő megjelenítését az ábra mutatja. 2.1.
Felsorolásos lista példa - Kos
- Bika
- Ikrek
- Rák
- egy oroszlán
- Szűz
- Mérleg
- Skorpió
- Nyilas
- Bak
- Vízöntő
- Hal
Csillagjegyek:
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énercí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.
- .
Példa a rögzítésre:
-
.
jegyzet
A böngészők eltérően értelmezik az egyes listaelemek markertípusának jelzését. 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. Az Internet Explorer csak az elem jelölőjének megjelenését változtatja meg.
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 más típusú listacímkék, amelyeket alább tárgyalunk) látja el az egyetlen feladatot - jelzi a böngészőnek, hogy a címke után található összes információt bizonyos mértékig jobbra (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ó:pontozott lista Csillagjegyek:
Kos
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. Ne feledje, hogy a grafika használata a HTML-oldalakon jelentősen megnövelheti a továbbított információ mennyiségét. Ebben az esetben azonban 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).
- .
Íme egy példa egy számozott listát használó HTML-dokumentumra, amelynek kijelzőjeábrán látható a böngésző. 2.3.
Számozott lista példa - Sirius
- K anopus
- Arcturus
- Alfa Centauri
- Vega
- K apella
- Rigel
- Procyon
- Achernar
- Beta Centauri
- Vetelgeuse
- Aldebaran
. . .- Mizar
. . .- Poláris
A Földről látható legfényesebb csillagok:
Rizs. 2.Z. számozott lista
A címkében
- a következő paraméterek adhatók meg: COMPACT, TYPE és START.
- .
Példa a rögzítésre:
- .
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:
- 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
- .
- .
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
- - 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 egy példát adtunk 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
- 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étrehozhatunk ilyen táblázatot (2-4. ábra) a megadott HTML kód beírásával. A római számozás a 3999-es értékig helyesen 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 kimerülése után (A-tól Z-ig) az első kétbetűs szám - AA stb. - lesz a következő szám.
Különféle számozás használata a listákban -
. . .
-
. . .
-
. . .
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 fogalomdefiníciót tartalmazó szöveg a következő sortól kezdve (egyes böngészőknél soronként) jelenik meg 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ó, aminek a célja hasonló a fent leírt többi listához.
- 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, 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 depresszív hangulat túlsúlya, az önbizalomhiány - Zempa
- Hold
- mapc
- Phobos
- Deimos
- Uránusz
- Ariel
- Umbriel
- Titánia
- Oberon
- Miranda
- Neptun
- Triton
- Sellő
Sziasztok, a blogoldal kedves olvasói. Ma ez alatt a címszó alatt szeretnék beszélni a különféle HTML listákról, amelyek a speciálisan erre kialakított UL, OL, LI és DL tagek alapján készíthetők. Egy UL és LI pár segítségével felsorolásjeles listák, OL és LI segítségével - számozott listák, a DL, DT és DD elemek segítségével pedig úgynevezett definíciós listák jönnek létre. Röviden áttekintjük a beágyazott struktúrák létrehozásának alapelveit is.
Szeretném emlékeztetni, hogy már sikerült beszélnünk a modern, valamint a táblázatos elrendezés alapjairól (). Ezen kívül az alapokhoz is hozzányúltunk, nos, végig tanultuk.
Felsorolásos listák UL és LI címkék alapján
Az UL címkét felsorolásjeles listák, az OL címkét pedig számozott listák létrehozására használják. Ezek a címkék párosított és blokkoló címkék, akárcsak az LI elem.
Külön listaelemek helyezkednek el a nyitó és záró címkék között, amelyek viszont a nyitó és záró LI elemben vannak. A HTML-listák tetején és alján a böngésző egysoros behúzást ad hozzá, hasonlóan a bekezdéscímke által létrehozott behúzáshoz.
Nézzünk például egy címkézett verziót, amely így nézhet ki:
- Első sor
- Második
- Utolsó elem
A nyitó és záró UL címkéken belül csak LI elemek helyezhetők el, és már ezekbe az elemekbe (bekezdésekbe) tetszőleges tartalom (szöveg, képek, címsorok, bekezdések, hivatkozások, sőt egyéb listák) is beilleszthető.
Azok. Az UL csak egy felsorolásjeles (nem rendezett) lista megszervezésére szolgál, és minden, amit egy weboldalon látni fog, az LI elemek tartalmával van megvalósítva.
UL esetén megváltoztathatja a marker megjelenését, ha különböző értékeket állít be a "Típus" attribútumhoz. Ha az UL elemnél nincs megadva a "Típus" (a markerek megjelenésének kezelése), akkor az alapértelmezett markertípus jelenik meg (a lemez a szöveg színével kitöltött kör):
- — kitöltött kör (alapértelmezett);
- - kitöltetlen kör;
- - négyzet
A fenti példákban a "Type" attribútumot az UL elemben írtuk be, és minden elemnél ezt a típusú jelölőt használtuk. De a "Type" attribútum minden egyes LI címkéhez is írható, saját jelölőtípust állítva be ehhez az elemhez.
Példa egy felsorolásjeles listára, amely minden elemhez különböző típusú felsorolásjeleket tartalmaz:
- Megtöltött lemezjelölő
- Marker árnyékolatlan lemez formájában
- Négyzet
Számozott listák HTML-ben az OL címke alapján
Számozott lista létrehozásához OL címkéket használnak, amelyeken belül ismét LI elemek fognak elhelyezkedni. Az OL és LI, ahogy már említettem, blokkszintűek (vagyis hajlamosak minden rendelkezésükre álló helyet elfoglalni szélességben), és az OL-en belül az LI elemeken kívül semmi nem helyezhető el.
Kiderült, hogy az OL és az UL szolgáltatási címkék, amelyekre csak azért van szükség, hogy közöljék a böngészővel, hogy milyen listát hozunk létre (felsorolt vagy számozott). Számozott esetén az egyes tételek bal oldalán nem egy jelölőt, hanem egy számot és egy pontot fogunk látni mögötte:
- Első sor
- Második bekezdés
- Harmadik sor
Ahogy fentebb említettem, az UL, OL és LI elemek képesek a TYPE attribútum használatára. Lehetővé teszi a jelölő típusának beállítását vagy megadását, hogy a listaelemek milyen számokkal vagy betűkkel legyenek számozva. Rendezett lista esetén ennek az attribútumnak a paraméterei a következő értékeket vehetik fel:
- — a számozást közönséges arab számok fogják végrehajtani (a „Típus” attribútum hiányában alapértelmezés szerint ugyanazt a lehetőséget használjuk);
- - nagybetűk számozásként;
- - kisbetűk;
- - nagy római számok;
- - kisbetűs római számok;
Példa egy számozott listára, ahol minden elemhez különböző típusú számozás tartozik:
- nagy római számokkal vannak számozva
- Számozás kis latin betűkkel
- Számozás kis római számokkal
A számozott listák készítésénél az is lehetséges, hogy a számozást nem egyről, hanem a START attribútumban megadott számról kezdjük. Például:
- Az első elem, amelynek számát a start="23" attribútum határozza meg az OL címkében
- A következő tétel, még egy számmal
- Még egyet
Az OL esetében új számozást is indíthat tetszőleges értékből, tetszőleges elemtől kezdve, ha a VALUE attribútumot a szükséges számmal írja be ennek az elemnek a nyitó LI-jébe. Például:
- Első számú tétel
- Ez az elem a value="32" attribútumban megadott számot kapja
- Tétel nagy számmal
A listák megjelenésének stílusa a CSS-ben (stíluslapok)
De általában most a markerek megjelenése nem a TYPE attribútumon keresztül van beállítva, hanem , amelyhez a megfelelő tulajdonságok vannak írva.
Itt csak egy példát mutatok be a rendezetlen listák különféle jelölőire, amelyek megjelenése egy külön fájlon keresztül történik, lépcsőzetes stíluslapokkal.
- Első pont
- Második
- Utolsó
De erről a következő cikkekben fogunk beszélni. Így van beállítva az UL jelölőinek megjelenése ezen a blogon. A képeket jelölőként használjuk: számozatlan lista közönséges elemeihez — , számozatlan lista beágyazott elemeihez — .
Speciális és beágyazott listák HTML-kódban
A harmadik és egyben utolsó típus az úgynevezett "definíciós listák", és három címkével vannak beállítva - DL, DT és DD. A DL közli a böngészővel, hogy a definíciók listája következik.
Jellemzően ezt a típust használják (vagy használták) szótárbejegyzések írásához, amelyek kifejezéseket tartalmaznak (amelyek a DT címkékben találhatók) és azok leírásai (a DD címkékben találhatók).
- Első időszak
- Leírás
- Második időszak
- A leírása
Ha megnézi a fenti példát, észre fogja venni, hogy a DD elem (kifejezésleírás) el van tolva (40 képponttal) a DT elemhez (magához a kifejezéshez) képest.
Általánosságban elmondható, hogy a DL, DT és DD blokkcímkék, és a DT elemen belül csak a soron belüli címkékkel ellátott tartalom illeszthető be (kiderült, hogy a címsorok és bekezdések blokkelemei nem használhatók a DT-n belül). A DD-címkéken belül pedig bármilyen elemet beilleszthet, akár inline, akár blokkoló elemet.
beágyazott lista A HTML-ben egy egyszerűvel analóg módon jön létre, de a fő listán belül néhány elem ismét a nyitó és záró UL vagy OL címkék közé kerül.
Felhívjuk figyelmét, hogy annak az elemnek a záró LI-je, amelyben a beágyazott elem létrejön, csak a beágyazott lista teljes kódja után kerül elhelyezésre (ez nagyon fontos a weboldalon való helyes megjelenítéshez). A beágyazott lista valahogy így nézhet ki:
- Az első bekezdés a fő számozott
- Második bekezdés
- A beágyazott címkézés első eleme
- Második
- A megjelölt harmadik és utolsó pontja
- A számozott harmadik eleme
Sok szerencsét! Hamarosan találkozunk a blogoldalak oldalán
Lehet, hogy érdekel
Hivatkozás és kép (fotó) beszúrása HTML-be - IMG és A címkék Kijelölés, Opció, Szövegterület, Címke, Mezőkészlet, Jelmagyarázat – A legördülő lista űrlapjának és szövegmezőjének HTML-címkéi 
Html-űrlapok a webhelyhez - Űrlap, Bevitel és Kijelölés, Opció, Szövegterület, Címke és egyebek címkék webes űrlapelemek létrehozásához 
A színek beállítása a HTML- és CSS-kódban, az RGB-árnyalatok kiválasztása a táblázatokban, a Yandex eredmények és más programok 
Beágyazás és objektum – Html-címkék médiatartalom (videó, flash, hang) megjelenítéséhez a weboldalakon 
A H1-H6 címsorok, a Hr vízszintes vonal, a Br sortörés és a P bekezdés címkéi és attribútumai a Html 4.01 szabvány szerint 
Táblázatok HTML-ben – Táblázat, Tr és Td címkék, valamint Colspan, Cellpadding, Cellspacing és Rowspan a létrehozásukhoz 
Mi az a HTML hiperszöveg jelölőnyelv, és hogyan kell felsorolni az összes címkét a W3C érvényesítőben 
Betűtípus (arc, méret és szín), Blockquote és előcímkék – elavult szövegformázás tiszta HTML-ben (CSS használata nélkül) 
Iframe és Frame – mik ezek, és hogyan lehet a legjobban használni a kereteket HTML-ben 
Img - Html címke kép beszúrásához (Src), szöveghez igazításához és körbefűzéséhez (igazítás), valamint háttér (háttér) beállításáhozA HTML három különböző típusú listát támogat, mindegyiknek megvan a maga típusa:
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
Címke- elem 1
- 2. elem
- 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
- Szerezd meg a kulcsot
- Helyezze be a kulcsot a zárba
- Fordítsa el a kulcsot két fordulattal
- Vegye ki a kulcsot a zárból
- Nyissa ki az ajtót
Lépésről lépésre szóló utasítás
- Szerezd meg a kulcsot
- Helyezze be a kulcsot a zárba
- Fordítsa el a kulcsot két fordulattal
- Vegye ki a kulcsot a zárból
- Nyissa ki az ajtót
Néha a meglévő HTML-kódok megtekintésekor találkozni fog az érvvel típus elemben
- 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).
- a következő módon:
-
Ebben az esetben a lista sorszámozása megszakad és innentő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
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:
- . A böngésző minden listaelemet behúz, és automatikusan megjeleníti a felsorolásjeleket.
- Első pont
- Második bekezdés
- Harmadik bekezdés
- nem szükséges csak szöveget elhelyezni, a streaming tartalom bármely eleme (linkek, bekezdések, képek stb.) elhelyezhető.
- 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ás 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.
- Próbáld ki magad "
- hétfő
- Levél küldés
- Látogatás a szerkesztőnél
- Témaválasztás
- Dekoratív design
- Zárójelentés
- Esti üzenet megtekintése
- kedd
- Módosítsa az ütemtervet
- Képek beküldése
- Szerda...
- hétfő
- Levél küldés
- Látogatás a szerkesztőnél
- Témaválasztás
- Dekoratív design
- Zárójelentés
- Esti üzenet megtekintése
- kedd
- Módosítsa az ütemtervet
- Képek beküldése
- Szerda...
- Próbáld ki magad "
- Kávé
- Kávé
- Kávé
- Kávé
- Kávé
- Tej
- Kávé
- Tej
- Kávé
- Tej
- Kávé
- Tej
- Próbáld ki magad "
- Bika
- Ikrek
- Kos
- Bika
- Ikrek
- (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).
- Első időszak
- Az első kifejezés leírása
- Második időszak
- A második kifejezés leírása
- Próbáld ki magad "
- 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.
- Weboldal
- - különálló weboldalak halmaza, amelyeket linkek és egyetlen design kapcsolnak össze.
- találkozási helyen
- , a böngésző automatikusan sortörést ad hozzá;
- a lista tetején és alján behúzások találhatók;
- a jelölők alapértelmezés szerint kitöltött körként jelennek meg;
- a lista minden eleme jobbra tolódik el a törzsszöveghez képest.
- lemez - jelölők kitöltött kör formájában;
- kör - jelölők kitöltetlen kör formájában;
- négyzet - négyzet jelölők.
- sepulki
- Sepulcarii
- Sepulenia
- nem fog működni, ezért meg kell oldani. Ehhez rejtse el a listajelzőket a listastílus tulajdonság használatával, amelynek értéke none, és a tartalom előtti szövegben
- add hozzá a saját karakteredet a ::before pszeudoelemmel. A 2. példában egy háromszög működik ilyen markerként.
2. példa: A::befor használata
Listák - sepulki
- Sepulcarii
- Sepulenia
Ennek a példának az eredménye az ábrán látható. 2. Mivel a lista stílusú tulajdonság none értékű használata egyáltalán nem távolítja el a jelölőket, csak elrejti őket a látás elől, ezért a lista jobbra tolódik. Ennek a sajátosságnak a kiküszöbölése érdekében a példa hozzáadja a text-indent tulajdonságot negatív értékkel. Feladata, hogy a szöveget egy karakterrel balra mozgassa.
Rizs. 2. Önkényes jelölők a listában
A karakternek nem kell hexadecimális formátumban lennie, közvetlenül a szövegbe is beilleszthető. A lényeg az, hogy a dokumentumot UTF-8 kódolásban mentse, és a szerkesztő támogassa azt. Magukat a karaktereket és kódjaikat például a LibreOffice Writerből vehetjük át (3. ábra).
Rizs. 3. Szimbólum kiválasztása a LibreOffice-ban
Lista rajzolt golyókkal
A Stílusok lehetővé teszik, hogy bármilyen megfelelő képet állítson be jelölőként a list-style-image tulajdonságon keresztül. Az érték a grafikus fájl relatív vagy abszolút elérési útja, amint az a 3. példában látható.
3. példa: Kép használata jelölőként
Listák - sepulki
- Sepulcarii
- Sepulenia
A legjobb, ha kis méretű képet választunk, hogy ne válasszuk a listaelemeket ábrafeliratokká. ábrán. A 4. ábra a kis képek markerként való használatára vonatkozó példaművelet eredményét mutatja.
Rizs. 4. Rajz mint jelölő
A lista stílusú képnek van néhány hátránya:
- a minta nem mozgatható fel vagy le;
- a különböző böngészőkben a kép szöveghez viszonyított helyzete eltérő lehet.
Ezek a problémák elkerülhetők a háttérképet beállító background tulajdonság használatával. Minden listaelemhez
- eltávolítjuk az eredeti jelölőket, és ismétlés nélkül beállítjuk a háttérképet. És hogy a szöveg ne jelenjen meg a kép tetején, jobbra toljuk a padding-bal (4. példa) segítségével.
4. példa Háttér használata
Ul ( margó balra: -1em; ) li ( listastílus: nincs; háttér: url(images/bullet.png) no-repeat 0 2px; kitöltés balra: 20px; )
Szöveg és golyó helyzete
A szöveghez képest kétféleképpen lehet jelölőt elhelyezni: a jelölőt a listaelemek határán kívül helyezik el, vagy körbetekerik szöveggel (5. ábra).
belül kívül Rizs. 5. Jelölők elhelyezése a szöveghez képest
A listastílus-pozíció tulajdonság a markerek pozíciójának szabályozására szolgál. Két jelentése van: kívül - a felsorolásjelek a szövegblokkon kívül helyezkednek el (ez az alapértelmezett) és belül - a felsorolásjelek a szövegblokk részét képezik, és a listaelemben jelennek meg (5. példa).
5. példa Változtassa meg a jelölők helyzetét
Listák - A munka megkezdése előtt ellenőrizze a 3BM készletben található berendezések elérhetőségét.
- Egy vagy több periféria hiányában azonnal forduljon a CC műszaki személyzetéhez.
- A munkaterület szemrevételezése után gondosan bekapcsolhatja a 3BM-et.
Ennek a példának az eredménye az ábrán látható. 6.
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
A felsorolásjeles listák lényegében hasonlóak a számozott listákhoz, csak nem tartalmazzák az elemek sorszámozását. A felsorolásjeles listák blokk elem használatával jönnek létre
CímkeA következő példában láthatja, hogy alapértelmezés szerint minden listaelem elé egy kis kitöltött körjelölő kerül hozzáadásra:
A címke belsejében
Beágyazott listák
Bármely lista beágyazható egy másikba. Egy elem belsejébenPélda: Beágyazott listák
Felsorolásos listák formázása
A listajelölő megjelenésének megváltoztatásához használja a tulajdonságot 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
Lemez:
kör:
Négyzet:
Egyik sem:
Grafikus markerek.
A HTML-ben lehetőség van grafikus jelölőkkel való lista létrehozására. Az egy dolog, ha a listajelző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
csillagjegyek
csillagjegyek
Definíciók listája (leírások)
A definíciós listák nagyon hasznosak például személyes szószedet létrehozásához. A definíciók listájában minden elem két részből áll: a kifejezésből és annak meghatározásából.
A teljes listát egy elembe helyezed
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ő:
A következő példa egy definíciós lista egy lehetséges felhasználását mutatja be:
Példa: Definíciók listája
World Wide Web - angolbó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 közös kialakítással rendelkeznek.
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 felsorolásjeles listák lehetővé teszik a nagy szövegek különálló blokkokra bontását, amelyek mindegyike ponttal kezdődik – általában egy kis ponttal. Ez felhívja az olvasó figyelmét a szövegre, és javítja annak olvashatóságát.
Elemekkel
- a következő funkciókhoz kapcsolódik:
Az 1. ábra a példa eredményét mutatja, illusztrálva a felsorolásjeles lista fenti jellemzőit.
Rizs. 1. A felsorolásjeles lista megtekintése
Marker típusa
A jelölők három formája lehet: kitöltött kör (alapértelmezett), üres kör és négyzet. A jelölőtípus kiválasztásához használja a list-style-type tulajdonságot vagy az általános listastílust (1. példa). A következő értékek érvényesek:
1. példa – Módosítsa a jelölő megjelenését
Listák
A példa bemutatja, hogyan hozhat létre felsorolásjeles listát, amely egy kis, egyszínű négyzetet használ felsorolásjelként. Bár az értékek száma háromra van korlátozva, ez nem jelenti azt, hogy csak háromféle marker áll a rendelkezésünkre. Számos speciális karakter létezik, amelyek sikeresen jelölőikonként működhetnek. "Csavarja be" őket közvetlenül
Itt: írja be - a lista karakterei:
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 XLIX kezdőértékkel:A számozás az attribútummal is elindítható érték, amely hozzáadódik az elemhez
Íme egy példa egy HTML dokumentumra, amely definíciók listáját használja:
Példa a definíciós listára A tipikus emberi temperamentumok osztályozása,
alapítottHippokratész nézeteiről
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 - .
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
hasonló formában, mint a UNIX és MS-DOS operációs rendszerek könyvtárainak listázása a /W billentyű 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 ügyelni kell.
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.
Beágyazott lista példa Egyes bolygók műholdai
- , 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.
-
P rekord 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
- 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
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:
TYPE = A - jelölőket állít be nagybetűs latin betű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
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ék
- És
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
- Az egyes listaelemekre mutató szabványos listaelem-jelölőket biztosít.
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 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 kitöltött 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 a TYPE = 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 a Netscape és Internet Explorer böngészők legújabb verzióiban. 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 markereinek típusa. Ehhez a TYPE paraméter a megfelelő értékkel adható meg a listaelem címkéjében
- .
- ,
- ,
- , 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 >
Felsorolásos 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
Hogyan lehet belépni a hálózati és megosztási központba
Hogyan teszteljünk egy radardetektort otthon
A processzor órajele a számítógép egyik legfontosabb összetevője.