Kako ustvariti seznam z oznakami v html. Seznam z oznakami. Uporabni materiali na seznamih HTML

V HTML obstajata dve vrsti seznamov: oštevilčeni in neoštevilčeni. Njihovo ustvarjanje je skoraj enako. Tudi oznake se razlikujejo za en znak. Ustvarite lahko tudi, ki lahko vključuje tako oštevilčene kot označevalne.

Te sezname je mogoče preoblikovati poljubno. Vse je odvisno od vaše domišljije. Najprej si bomo ogledali standardne sezname, enake kot v urejevalniku Word, nato pa jih bomo izboljšali in oblikovali do nerazpoznavnosti.

HTML oštevilčen seznam

Navadno oštevilčeno lahko ustvarite z naslednjimi oznakami:

Prvi element seznama

Drugi element na seznamu

Tretji element na seznamu

Preprosti seznami izgledajo takole

V skladu s standardi mora biti vsak element seznama znotraj začetne in končne oznake li. Če pa ne vstavite zaključne oznake, bo rezultat popolnoma enak. Procesor je precej pameten. Med pretvorbo seznama razčleni začetne oznake. Če vidi novega

, nato samodejno postavi pred njo

Tako je mogoče sestaviti sezname, kot je prikazano spodaj.

Toda z vidika strokovnjakov je to napačno.

Neoštevilčeni (oz. označeni) seznami se ustvarijo na enak način, le da namesto oznake ol piše ul.

Ni številk ali črk - samo različni simboli, imenovani markerji.

Večnivojski oštevilčen seznam HTML

Veliko uporabnikov zanima ta možnost. Zato je treba opozoriti, da je vsak oštevilčen seznam HTML mogoče narediti na več ravneh. Dodatne ravni so lahko enake ali označene.

Če želite ustvariti seznam, prikazan v zgornjem primeru, morate napisati naslednje.

Upoštevajte, da je v tej kodi za razliko od prvih primerov dodan atribut type. Zahvaljujoč temu lahko določite vrsto razvrščanja za oštevilčene in označene sezname.

Za oštevilčene navedemo abecedo ali vrsto številk, za druge primere pa vrsto označevalca.

Če uporabite posebno oznako HTML, lahko oštevilčen seznam postane karkoli želite.

Atribut tipa lahko podate s poljubno vrednostjo iz tabele. Ali pa v razredu slogov css določite list-style-type z želeno vrsto razvrščanja.

Prevod vrednosti je precej preprost. Dovolj je osnovno znanje angleščine. Toda tudi če ne morete prevesti besed "krog", "kvadrat" itd., Lahko vizualno razumete, kakšen bo rezultat, ko navedete te vrednosti v atributu tipa.

Za oštevilčene sezname uporabite naslednje možnosti:

1 - arabske številke;
A - velike črke;
a - male latinske črke;
I - velike rimske številke;
i - male rimske številke.

Privzeto je vedno seznam z To pomeni, da če ne podate ničesar, je enako kot type="1".

Poleg tega se lahko oštevilčeni seznami začnejo na katerem koli želenem mestu. Privzeto se izhod začne od 1. Če pa želite, lahko začnete vsaj od sto. Če želite to narediti, morate podati začetni atribut s poljubno vrednostjo.

Poleg tega lahko zaključek naredite v obratnem vrstnem redu. Če želite to narediti, morate pisati obrnjeno.

Oblikovanje seznamov

Oštevilčen seznam HTML je lahko oblikovan tako lepo, da morda ne boste takoj ugotovili, da je to običajen seznam in ne slika, narejena v Photoshopu.

Tukaj so primeri čudovitih seznamov.

Kot je razvidno iz primera, lahko spremenite videz oštevilčenja in samih elementov.

Ustvarite lahko navaden seznam, kot je ta.

V slogih css morate določiti obliko za oznake ol. Upoštevajte, da bodo v tem primeru nastavitve uporabljene za vse sezname na spletnem mestu, kjer se uporablja ta slogovna datoteka.

Najprej razmislimo o možnosti z zasnovo okroglega seznama. Nazaj na kodo seznama. Tam je naveden zaokroženi seznam razreda. To je razred, s katerim se morate poigrati, da ustvarite takšno lepoto. Razred lahko poimenujete, kakor želite.

Zdaj pa poglejmo kvadratno zasnovo.

Stila sta precej podobna. Razlika je v tem, da je v prvem primeru element zaokrožen z uporabo zmogljivosti CSS.

Profesionalni oblikovalec postavitev mora predvideti in razumeti, da vsi uporabniki ne uporabljajo sodobnih računalnikov. Nimajo vsi nameščenih Windows 7, 8, 10 Obstaja odstotek uporabnikov, ki še vedno uporabljajo Windows XP in uporabljajo stare različice brskalnika Internet Explorer.

Skoraj vse sodobne oblikovne izboljšave elementov praviloma niso podprte z njimi. Uporabniku se bo zdelo, da na oblikovanju spletnega mesta sploh ni bilo dela. Da se je vse odmaknilo. Elementi trčijo drug ob drugega. Da bi se temu izognili, morate upoštevati vse možnosti.

Nekateri spletni skrbniki si pred njimi zatiskajo oči, saj njihov delež na sodobnem trgu postaja čedalje manjši. A za profesionalca je pomemben vsak obiskovalec, sploh če gre za komercialno stran.

Naredite nekaj primernega za vsakogar ali upoštevajte vse različice brskalnika.

Oštevilčeni seznami so zbirka elementov z njihovimi serijskimi številkami. Vrsta in vrsta oštevilčenja sta odvisna od parametrov elementa

arabske številke (1, 2, 3, ...);
arabske številke z ničlo na začetku za števila, manjša od deset (01, 02, 03, ...,10);
velike latinične črke (A, B, C, ...);
male latinične črke (a, b, c, ...);
velike rimske številke (I, II, III, ...);
male rimske številke (i, ii, iii, ...);
Armensko oštevilčenje;
Gruzijsko oštevilčenje.

S praktičnega vidika je mogoče načela prikazovanja elementov na označenem seznamu uporabiti na podoben način za oštevilčen seznam. Toda glede na to, da imamo opravka s štetjem, bo o nekaterih značilnostih še govora.

Številčenje seznama

Seznam je dovoljeno začeti s poljubno številko; za ta namen se uporablja začetni atribut elementa

. Vrednost je poljubno pozitivno celo število. Ni pomembno, kakšna vrsta oštevilčenja je nastavljena, tudi če se kot seznam uporabljajo latinične črke. Če sta za seznam hkrati uporabljena atributa začetni in vrednostni, potem ima slednji prednost in oštevilčenje je prikazano od števila, podanega z vrednostjo, kot je prikazano v 1. primeru.

Primer 1: Spreminjanje oštevilčenja seznama

Seznami

Dobro bi morali skrbeti za svoje delovno mesto.
Prilagodite osvetlitev v prostoru tako, da je vir svetlobe ob strani ali za operaterjem.
Da bi se izognili zdravstvenim zapletom, je priporočljivo izbrati stol z mehkim sedežem.

Prvi element seznama v tem primeru se bo začel z rimsko številko IV, ker je naveden atribut start="4", nato sledi številka V, zadnji element pa pride iz vrstnega reda in mu je dodeljena številka X (slika 1).

riž. 1. Rimske številke v seznamu

Pisanje številk

Oštevilčen seznam ima privzeto določen videz: najprej je številka, nato pika, nato pa se besedilo prikaže ločeno s presledkom. Ta oblika pisanja je vizualna in priročna, vendar nekateri razvijalci raje vidijo drugačen način oblikovanja oštevilčenja seznamov. In sicer tako, da je namesto pike zaključni oklepaj, kot je prikazano na sl. 2 ali kaj podobnega.

riž. 2. Oštevilčen pogled seznama z oklepajem

Slogi vam omogočajo, da spremenite vrsto oštevilčenja seznama z uporabo lastnosti vsebine in nasprotnega prirastka. Najprej je treba izbirnik ol nastaviti na counter-reset : item , to je potrebno, da se oštevilčenje na vsakem novem seznamu začne znova. V nasprotnem primeru se bo številčenje nadaljevalo in namesto 1,2,3 boste videli 5,6,7. Vrednost artikla je enolični identifikator števca, ki ga izberemo sami. Nato morate skriti izvirne oznake prek lastnosti sloga list-style-type z vrednostjo none.

Lastnost vsebine običajno deluje v povezavi s psevdoelementoma ::after in ::before. Tako konstrukcija li::before pravi, da je treba pred vsakim elementom seznama dodati nekaj vsebine (2. primer).

Primer 2. Ustvarjanje lastnega oštevilčenja

Li::before (vsebina: counter(item) ") "; /* Dodajte oklepaj k številkam */ counter-increment: item; /* Nastavite ime števca */ )

Lastnost vsebine z vrednostjo counter(item) prikaže število; Z dodajanjem oklepaja, kot je prikazano v tem primeru, dobimo zahtevano vrsto oštevilčenja. za povečanje številke seznama za eno je potrebno nasprotno povečanje. Upoštevajte, da se povsod uporablja isti identifikator z imenom item. Končna koda je prikazana v 3. primeru.

Primer 3: Spreminjanje pogleda seznama

Seznami

najprej
drugič
Tretjič
Četrtič

Z zgornjo metodo lahko naredite katero koli vrsto oštevilčenega seznama, na primer postavite številko v oglate oklepaje, v tem primeru se bo v slogih spremenila samo ena vrstica.

Vsebina: "[" counter(item) "] ";

Seznam z ruskimi črkami

Obstaja oštevilčen seznam z latiničnimi črkami, vendar na seznamu ni ruskih črk. Lahko jih dodamo umetno z uporabo zgornje tehnike. Ker oštevilčevanje poteka preko slogov, sam seznam ostane originalen, doda se mu le izbrani razred, recimo temu cirilica (primer 4).

Primer 4: Koda za ustvarjanje seznama

Dodajanje črk poteka z uporabo psevdoelementa ::before in lastnosti vsebine. Ker mora imeti vsaka vrstica svojo črko, bomo uporabili psevdorazred :nth-child(1) , pri čemer bo številka črke zapisana v oklepaju. Prva črka je seveda A, druga B, tretja C itd. Celoten niz je dodan izbirniku li na naslednji način (primer 5).

Primer 5: Uporaba psevdo-razreda:nth-child

Cirilica li:nth-child(1)::before (vsebina: "a)"; ) .cirilica li:nth-child(2)::before (vsebina: "b)"; ) .cyrilic li:nth-child(3)::before (vsebina: "at)"; )

V tem primeru vsaki črki sledi oklepaj, vse črke so male. Določite lahko svojo vrsto oštevilčenja seznama, na primer lahko vsebuje velike črke s piko, z enim ali dvema oklepajema ali samo črke. Za razliko od standardnega številčenja lahko tukaj počnemo, kar hočemo. Seznam desetih črk bi moral zadostovati za skoraj vse situacije, če pa se nenadoma izkaže, da ni dovolj, nam nič ne preprečuje, da bi svoj seznam razširili tako, da bi vključili vsaj vse črke ruske abecede.

Na koncu prilagodimo poravnavo in položaj črk, po želji določimo velikost pisave, barvo in druge parametre (primer 6).

Primer 6. Seznam z ruskimi črkami

Seznam

boršč
Pike kotleti
Kulebyaka
Gobe v kisli smetani
Palačinke s kaviarjem
Kvass

Rezultat tega primera je prikazan na sl. 3.

V označevalnem jeziku HTML obstajajo 3 vrste seznamov - urejeni (oštevilčeni), neurejeni (neoštevilčeni) in definicijski seznami.

Za izdelavo takšnega seznama potrebujete 2 vrsti elementov: 'ul' (okrajšava za unordered list, tj. neurejen seznam) in 'li' (element seznama). Vse, kar je napisano znotraj 'li', je označeno z flomastrom.

Videz takega seznama je mogoče nadzirati s podajanjem vrst označevalcev.

Vrste markerjev

Obstaja poseben atribut vrste, ki je postavljen v oba elementa seznama. To je vaša vrsta markerja. Obstajajo samo 3 vrste: krog, disk in kvadrat:

Odvisno od tega, kje določite vrsto označevalca, jo lahko spremenite za celoten seznam ali za določen element.

Urejen seznam

Za izdelavo seznama potrebujete tudi 2 elementa: 'ol' in 'li' (element seznama). Oznake zamenjamo s številkami s piko. Primer preprostega seznama:

prvi element
drugi element
zadnji element

Videz urejenega seznama lahko nadzorujete tako, da določite različne vrste oštevilčenja.

Vrste oštevilčenja

Obstaja poseben atribut vrste, ki je postavljen v element "ol" ali "li". To je vaša vrsta seznama. Skupaj je 5 vrst:

Odvisno od tega, kje določite vrsto oštevilčenja, jo lahko spremenite za celoten seznam ali za določen element.

Seznam definicij

Za slovarske sestavke je bil razvit seznam definicij.

Obstaja splošni vsebnik 'dl'. V njem sta "dt" (termin definicije) in "dd" (opis definicije). Najenostavnejši primer:

Oddelek za trženje: Ta oddelek se ukvarja s promocijo blaga in storitev
Finančni oddelek: Ta oddelek se ukvarja z vsemi finančnimi transakcijami

Vsi elementi vseh seznamov so elementi blokov. Znotraj elementa 'dt' pa se lahko postavijo samo elementi v vrstici. V elementa 'dd' in 'li' lahko vstavite karkoli želite. Od tod prihajajo ugnezdeni seznami.

Ugnezdeni (mešani seznami)

To so večnivojski seznami, znotraj katerih obstaja hierarhija. Takšni seznami se pogosto uporabljajo pri izdelavi zemljevida spletnega mesta. primer:

NOVICA DNEVA: Danes dež
Deževalo bo ves dan
NOČNA NOVICA

Ponoči bo deževalo
Jutri se bo začel nov dan
NOČNA NOVICA: Ponoči bo deževalo
Jutri se bo začel nov dan

Seznami HTML uporablja za združevanje povezanih informacij. Obstajajo tri vrste seznamov:

označeni seznam —
- vsak element seznama
označeno z markerjem,
oštevilčen seznam —
- vsak element seznama
označeno s številko
seznam definicij- - je sestavljen iz terminskih parov
—
definicija.
Vsak seznam je vsebnik, znotraj katerega se nahajajo elementi seznama ali pari izraz-definicija. Elementi seznama se obnašajo kot elementi bloka, ki so zloženi drug pod drugim in zasedajo celotno širino bloka vsebnika. Vsaka postavka seznama ima ob strani dodaten blok, ki ne sodeluje pri postavitvi.

Ustvarjanje seznamov HTML

1. Seznam z oznakami

Seznam z oznakami je neurejen seznam (iz angleškega neurejenega seznama). Ustvarjeno z uporabo seznanjene oznake
. Oznaka elementa seznama je oznaka, na primer zapolnjen krog.
Brskalniki bloku seznama privzeto dodajo naslednje oblikovanje:
Vsak element seznama je ustvarjen z uporabo seznanjene oznake
(iz angleščine List Item).

na voljo.

Microsoft

Google

Apple

riž. 1. Seznam z oznakami
2. Oštevilčen seznam

Oštevilčen seznam se ustvari z uporabo seznanjene oznake. Vsaka postavka seznama je prav tako ustvarjena z uporabo elementa
. Brskalnik samodejno oštevilči elemente po vrstnem redu in če izbrišete enega ali več elementov takšnega seznama, bodo preostale številke samodejno preračunane.
Blok seznama ima tudi privzete sloge brskalnika:
Na voljo je atribut vrednosti, ki vam omogoča, da spremenite privzeto številko za izbrano postavko seznama. Na primer, če za prvi element na seznamu nastavite
, potem bo preostalo oštevilčenje preračunano glede na novo vrednost.
Za oznako
Na voljo so naslednji atributi:
Tabela 1. Atributi oznake

Atribut Opis, sprejeta vrednost
obrnjeno Atribut reversed povzroči, da je seznam prikazan v obratnem vrstnem redu (na primer 9, 8, 7 ...).
začetek Začetni atribut določa začetno vrednost, od katere se začne oštevilčenje, na primer konstrukcija
prvemu artiklu bo dodeljena serijska številka "10". Hkrati lahko določite tudi vrsto oštevilčenja, npr.
.

vrsta Atribut tipa določa vrsto označevalca, ki bo uporabljen na seznamu (črke ali številke). Sprejete vrednosti:
1 — privzeta vrednost, decimalno številčenje.
A — oštevilčenje seznama po abecednem vrstnem redu, velike tiskane črke (A, B, C, D).
a — oštevilčenje seznama po abecednem vrstnem redu, male črke (a, b, c, d).
I - oštevilčenje z velikimi rimskimi številkami (I, II, III, IV).
i — oštevilčenje z malimi rimskimi številkami (i, ii, iii, iv).

Microsoft

Google

Apple

riž. 2. Oštevilčen seznam
3. Seznam definicij

Seznami definicij so ustvarjeni z uporabo oznake
. Če želite dodati izraz, uporabite oznako
, in za vstavljanje definicije - oznake
.

Blok seznama definicij ima naslednje privzete sloge brskalnika:
Za oznake
,
in
na voljo.

Direktor:

Peter Točilin

igrajo:

Andrej Gaiduljan

Aleksej Gavrilov

Vitalij Gogunski

Marija Koževnikova

riž. 3. Seznam definicij
4. Ugnezdeni seznam

Pogosto zmožnosti preprostih seznamov niso dovolj, na primer, ko ustvarjate kazalo, brez tega ne gre ugnezdeni elementi. Oznaka za ugnezdeni seznam bi bila naslednja:

1. odstavek.

Točka 2.

Podčlen 2.1.

Podčlen 2.2.

Podčlen 2.2.1.

Podčlen 2.2.2.

Podčlen 2.3.

Točka 3.

riž. 4. Ugnezdeni seznam
5. Večnivojski oštevilčen seznam

Večnivojski seznam se uporablja za prikaz elementov seznama na različnih ravneh z različnimi zamiki. Oznaka za večnivojski oštevilčen seznam bi bila naslednja:

odstavek

odstavek

odstavek

odstavek

odstavek

odstavek

odstavek

odstavek

odstavek

odstavek

odstavek

Ta privzeta oznaka bo ustvarila novo oštevilčenje za vsak ugnezdeni seznam, začenši z enim. Če želite ustvariti ugnezdeno oštevilčenje, morate uporabiti naslednje lastnosti:
ponastavitev števca ponastavi enega ali več števcev in poda vrednost, ki jo je treba ponastaviti;
counter-increment podaja vrednost prirastka števca, tj. v kakšnih korakih bo oštevilčen vsak naslednji element;
vsebina - generirana vsebina, v tem primeru je odgovorna za prikaz številke pred vsako postavko seznama.
Ol ( /* odstranite standardno oštevilčevanje */ list-style: none; /* Identificirajte števec in mu dajte ime li. Vrednost števca ni določena - privzeto je 0 */ counter-reset: li; ) li :before ( /* Definiramo element, ki bo oštevilčen - li Psevdoelement before označuje, da bo vsebina, vstavljena z lastnostjo vsebine, postavljena pred elemente seznama. Tukaj je nastavljena vrednost prirastka števca (privzeto je 1 */ counter-increment: li /). * Lastnost vsebine prikazuje številko elementa seznama counters() pomeni, da ustvarjeno besedilo predstavlja vrednosti vseh števcev s tem imenom med številkami, pred vsebino vsake postavke seznama pa je dodana pika s presledkom */ content: counters(li,".") "."
riž. 5. Večnivojski oštevilčen seznam

Zadnja posodobitev: 08.04.2016

Seznam definicij je seznam, ki vsebuje izraz in definicijo za ta izraz. In na seznamu je lahko veliko takih parov izraz-definicija. Oznake se uporabljajo za ustvarjanje seznama definicij
in
. Elementi seznama so nameščeni znotraj teh oznak.

Vsak element seznama je sestavljen iz izraza in definicije. Izraz je postavljen v oznake
in
(dt je okrajšava za "definicijski izraz"), definicija pa je v oznakah
in
(dd je okrajšava za "opis definicije")

Oglejmo si najpreprostejši seznam definicij:
Seznami v HTML5

Ontologija

Veja filozofije, ki preučuje temeljna načela obstoja

epistemologija

Filozofska disciplina, ki se ukvarja z raziskovanjem, kritiko in teorijami znanja

Produkcijski odnosi

Niz odnosov med ljudmi, ki se razvijejo v procesu družbene proizvodnje, izmenjave in distribucije materialnih dobrin in storitev.

Atribut	Opis, sprejeta vrednost
obrnjeno	Atribut reversed povzroči, da je seznam prikazan v obratnem vrstnem redu (na primer 9, 8, 7 ...).
začetek	Začetni atribut določa začetno vrednost, od katere se začne oštevilčenje, na primer konstrukcija prvemu artiklu bo dodeljena serijska številka "10". Hkrati lahko določite tudi vrsto oštevilčenja, npr. .
vrsta	Atribut tipa določa vrsto označevalca, ki bo uporabljen na seznamu (črke ali številke). Sprejete vrednosti: 1 — privzeta vrednost, decimalno številčenje. A — oštevilčenje seznama po abecednem vrstnem redu, velike tiskane črke (A, B, C, D). a — oštevilčenje seznama po abecednem vrstnem redu, male črke (a, b, c, d). I - oštevilčenje z velikimi rimskimi številkami (I, II, III, IV). i — oštevilčenje z malimi rimskimi številkami (i, ii, iii, iv).