Gli elenchi numerati sono una raccolta di elementi con i relativi numeri sequenziali. Il tipo e il tipo di numerazione dipendono dai parametri dell'elemento
- , che viene utilizzato per creare l'elenco. I seguenti valori possono essere utilizzati come elementi di numerazione:
- Numeri arabi (1, 2, 3, ...);
- Numeri arabi con zero iniziale per cifre inferiori a dieci (01, 02, 03, ..., 10);
- lettere latine maiuscole (A, B, C, ...);
- lettere latine minuscole (a, b, c, ...);
- numeri romani maiuscoli (I, II, III, ...);
- numeri romani minuscoli (i, ii, iii, ...);
- numerazione armena;
- numerazione georgiana.
- ... Qualsiasi numero intero positivo può essere specificato come valore. Non importa quale tipo di numerazione è impostato, anche se vengono utilizzate lettere latine come elenco. Se all'elenco vengono applicati contemporaneamente gli attributi start e value, quest'ultimo ha la precedenza e la numerazione viene visualizzata dal numero specificato da value, come mostrato nell'esempio 1.
Esempio 1. Rinumerazione di una lista
Elenchi - Dovresti prenderti molta cura del tuo posto di lavoro.
- Regolare l'illuminazione della stanza in modo che la sorgente luminosa si trovi sul lato o dietro l'operatore.
- Per evitare complicazioni mediche, si consiglia di scegliere una sedia con una seduta morbida.
Il primo elemento della lista in questo esempio inizierà con il numero romano IV, poiché è specificato l'attributo start = "4", quindi segue il numero V, e l'ultimo elemento segue fuori ordine e viene assegnato il numero X (Fig. .1).
Riso. 1. Numeri romani nell'elenco
Scrivere numeri
Per impostazione predefinita, un elenco numerato ha una certa forma: prima c'è un numero, poi un punto e poi il testo viene visualizzato attraverso uno spazio. Questa forma di scrittura è chiara e conveniente, ma alcuni sviluppatori preferiscono vedere un modo diverso di formattare la numerazione degli elenchi. Vale a dire, invece di un punto, c'è una parentesi chiusa, come mostrato in Fig. 2 o qualcosa di simile.
Riso. 2. Visualizzazione di un elenco numerato con parentesi
Gli stili consentono di modificare il modo in cui gli elenchi vengono rinumerati utilizzando le proprietà del contenuto e del controincremento. Per prima cosa è necessario impostare il counter-reset: voce per il selettore ol, questo è necessario affinché la numerazione in ogni nuova lista ricominci da capo. Altrimenti la numerazione continuerà e al posto di 1,2,3 vedrai 5,6,7. Il valore dell'articolo è un identificatore univoco per il contatore, lo scegliamo noi stessi. Successivamente, è necessario nascondere i marcatori originali tramite la proprietà di stile di tipo elenco in stile con un valore nessuno.
La proprietà content in genere funziona in combinazione con gli pseudo-elementi :: after e :: before. Quindi, li :: prima della costruzione dice che del contenuto deve essere aggiunto prima di ogni elemento della lista (esempio 2).
Esempio 2. Creazione della propria numerazione
Li :: prima (contenuto: contatore (elemento) ")"; / * Aggiunge una parentesi ai numeri * / counter-increment: item; / * Imposta il nome del contatore * /)
La proprietà del contenuto con il contatore del valore (elemento) restituisce un numero; aggiungendo una parentesi come mostrato in questo esempio, otteniamo la numerazione richiesta. è necessario un controincremento per incrementare il numero della lista di uno. Nota che lo stesso identificatore chiamato articolo viene utilizzato ovunque. Il codice finale è mostrato nell'esempio 3.
Esempio 3. Modifica della visualizzazione di un elenco
Elenchi - Primo
- Secondo
- Terzo
- Il quarto
In questo modo, puoi fare qualsiasi tipo di elenco numerato, ad esempio prendere un numero tra parentesi quadre, in questo caso solo una riga cambierà negli stili.
Contenuto: "[" contatore (elemento) "]";
Elenco con lettere russe
C'è un elenco numerato con lettere latine, ma non ci sono lettere russe per l'elenco. Possono essere aggiunti artificialmente usando la tecnica di cui sopra. Poiché la numerazione avviene tramite stili, l'elenco stesso rimane originale, ad esso viene aggiunta solo la classe selezionata, chiamiamola cirilico (esempio 4).
Esempio 4. Codice per creare una lista
- Uno
- Due
- Tre
L'aggiunta di lettere viene eseguita utilizzando lo pseudo-elemento :: before e la proprietà content. Poiché ogni riga deve avere la sua lettera, utilizzeremo la pseudo-classe: nth-child (1), il numero della lettera è scritto tra parentesi. La prima lettera, ovviamente, è A, la seconda è B, la terza è C e così via.L'intero set viene aggiunto al selettore li come segue (esempio 5).
Esempio 5. Utilizzo della pseudo-classe nth-child
Cyrilic li: nth-child (1) :: prima (contenuto: "a)"; ) .cyrilic li: nth-child (2) :: prima (contenuto: "b)"; ) .cyrilic li: nth-child (3) :: before (content: "in)"; )
In questo esempio, ogni lettera è seguita da una parentesi, tutta minuscola. Puoi definire il tuo modo di numerare l'elenco, ad esempio, può contenere lettere maiuscole con un punto, con una o due parentesi o solo lettere. A differenza della numerazione standard, qui siamo liberi di fare ciò che vogliamo. Un elenco di dieci lettere dovrebbe essere sufficiente per quasi tutte le situazioni, ma se questo si rivela improvvisamente non sufficiente, nulla ci impedisce di espandere il nostro elenco per includere almeno tutte le lettere dell'alfabeto russo.
Infine, impostiamo l'allineamento e la posizione delle lettere, se lo desideri, indichiamo la dimensione del carattere, il colore e altri parametri (esempio 6).
Esempio 6. Elenco con lettere russe
Elenco - borsch
- Cotolette di luccio
- Kulebyaka
- Funghi in panna acida
- Frittelle con caviale
- kvas
Il risultato di questo esempio è mostrato in Fig. 3.
Un elenco puntato viene definito aggiungendo un piccolo punto elenco davanti a ciascun elemento dell'elenco, di solito un cerchio pieno. L'elenco stesso è formato utilizzando un contenitore
- e ogni elemento dell'elenco inizia con un tag
- come mostrato di seguito.
- Primo punto
- Secondo punto
- Terzo punto
Il tag di fine deve essere presente nell'elenco.
sebbene non richiesto, ti consigliamo di aggiungerlo sempre per separare chiaramente le voci in elenco.
- Cheburashka
- Coccodrillo Gena
- Shapoklyak
- Ratto Larissa
- Primo
- Secondo
- Terzo
- Primo
- Secondo
- Terzo
- Primo
- Secondo
- Terzo
- cambiamento nel credo religioso (opzionale: buddismo, confucianesimo, induismo). Offerta speciale - Ebraismo e Islam insieme;
- un cambiamento nella fede nell'infallibilità della parte amata;
- la convinzione che gli alieni esistano;
- preferenza per il sistema politico come il migliore nel suo genere (opzionale: feudalesimo, socialismo, comunismo, capitalismo).
- (LI - Voce di elenco). Etichetta
- non necessita di un tag di chiusura appropriato, sebbene la sua presenza in linea di principio non sia vietata. I browser di solito iniziano ogni nuovo elemento dell'elenco su una nuova riga durante la visualizzazione di un documento.
Le informazioni fornite sono sufficienti per costruire un elenco puntato elementare. Ecco un esempio di un documento HTML che utilizza un elenco puntato, che viene visualizzato in un browser come mostrato in Fig. 2.1.
Esempio di elenco puntato Segni zodiacali:
- Ariete
- Toro
- Gemelli
- Vergine
- bilancia
- scorpione
- Sagittario
- Capricorno
- Acquario
- Pesci
Riso. 2.1. Elenco puntato della visualizzazione del browser
Nota che oltre agli elementi dell'elenco contrassegnati con il tag
- , potrebbero essere presenti altri elementi HTML. Nell'esempio sopra, uno di questi elementi è il testo normale, che non è un elemento dell'elenco, ma svolge il ruolo di intestazione.
Nota
Alcuni libri di testo HTML indicano di utilizzare il tag contenitore per impostare il titolo dell'elenco.
(LH - Intestazione elenco, intestazione elenco). Questo tag non è attualmente riconosciuto da nessuno dei browser tradizionali e non fa parte delle specifiche HTML. Pertanto, la sua applicazione diventa priva di significato, sebbene non comporti errori. Nel tag
- si possono specificare due parametri: COMPACT e TYPE.
- .
Esempio di registrazione:
- .
Nota
I browser hanno interpretazioni diverse per specificare un tipo di punto elenco per un singolo elemento dell'elenco. Il browser Netscape cambia il tipo di marker per questo e per tutti i successivi finché non incontra un'altra sostituzione del tipo di marker. Internet Explorer cambia l'indicatore solo per questo elemento.
Indicatori grafici dell'elenco
Gli elementi grafici possono essere utilizzati come indicatori di elenco, ampiamente utilizzati per creare documenti HTML attraenti e dal design accattivante. In effetti, tale possibilità non è fornita direttamente dal linguaggio HTML, ma è implementata in qualche modo artificialmente. Ciò non significa che non sia raccomandato o riprovevole farlo, ma significa solo che qui non verranno utilizzati costrutti di linguaggio HTML speciali.
Per capire l'idea, devi capire come gli elenchi sono implementati nelle pagine HTML. Si scopre che il tag della lista
- (come, per inciso, i tag di altri tipi di elenchi considerati di seguito) svolge l'unico compito: dice al browser che tutte le informazioni che si trovano dopo questo tag dovrebbero essere visualizzate con uno spostamento a destra (rientrato) di una certa quantità. tag
- che puntano a singoli elementi dell'elenco forniscono indicatori standard degli elementi dell'elenco.
Se abbiamo bisogno di creare un elenco con marcatori grafici, possiamo fare a meno dei tag.
- ... Sarà sufficiente inserire l'immagine grafica desiderata davanti ad ogni elemento della lista. L'unico problema che deve essere risolto in questo caso sarà quello di separare gli elementi dell'elenco l'uno dall'altro. Puoi usare i tag di paragrafo per questo
O avanzamento riga forzato
... Un esempio di implementazione di un elenco con indicatori grafici, la cui visualizzazione è mostrata in Fig. 2.2 è mostrato di seguito:che verrà trasmesso una sola volta. Anche la dimensione di un file contenente un'immagine piccola è estremamente ridotta.
Nota
I metodi per creare elenchi con indicatori grafici sono discussi a turno nel Capitolo 8.
HTML supporta tre diversi tipi di elenchi, ognuno dei quali ha il proprio elenco:
Elenchi numerati
In un elenco numerato, il browser inserisce automaticamente i numeri degli elementi in ordine, a partire da un valore (solitamente 1). Ciò consente di inserire ed eliminare elementi nell'elenco senza interrompere la numerazione, poiché il resto dei numeri verrà ricalcolato automaticamente.
Gli elenchi numerati vengono creati utilizzando un elemento di blocco
Etichetta- articolo 1
- articolo 2
- articolo 3
Gli elementi di un elenco numerato devono contenere più elementi di elenco, come mostrato nell'esempio seguente:
Esempio: elenco numerato
- Prova tu stesso "
Istruzioni passo passo
- Prendi la chiave
- Inserisci la chiave nella serratura
- Gira la chiave di due giri
- Tira fuori la chiave dalla serratura
- Apri la porta
Istruzioni passo passo
- Prendi la chiave
- Inserisci la chiave nella serratura
- Gira la chiave di due giri
- Tira fuori la chiave dalla serratura
- Apri la porta
A volte, quando guardi i codici HTML esistenti, ti imbatterai nell'argomento genere nell'elemento
- A - lettere latine maiuscole (A, B, C...);
- a - lettere latine minuscole (a, b, c...);
- I - grandi numeri romani (I, II, III...);
- i - numeri romani piccoli (i, ii, iii...);
- 1 - Numeri arabi (1, 2, 3...) (usati per impostazione predefinita).
- nel seguente modo:
-
In questo caso la numerazione progressiva della lista verrà interrotta e la numerazione ricomincerà da questo punto, in questo caso da sette.
Un esempio di utilizzo dell'attributo valore etichetta
In questo esempio, "Primo elemento dell'elenco" sarebbe il numero 1, "Secondo elemento dell'elenco" sarebbe il numero 7 e "Terzo elemento dell'elenco" sarebbe il numero 8.
Formattazione di elenchi numerati con CSS
Per modificare i numeri dell'elenco, utilizzare la proprietà tipo-stile-lista Fogli di stile CSS:
- ... Il browser fa rientrare ogni elemento dell'elenco e visualizza automaticamente i punti elenco.
- Primo punto
- Secondo punto
- Terzo punto
- non è necessario inserire solo testo, è consentito inserire qualsiasi elemento del contenuto in streaming (link, paragrafi, immagini, ecc.)
- è possibile creare un elenco annidato, oppure un elenco di secondo livello. Per annidare una lista, descrivi la nuova lista all'interno dell'elemento
- lista già disponibile. Quando si nidifica un elenco puntato in un altro, il browser cambia automaticamente lo stile del punto elenco per l'elenco di secondo livello. Qualsiasi elenco può essere nidificato all'interno di un altro. L'esempio seguente mostra la struttura di un elenco puntato nidificato all'interno di un secondo elemento numerato.
- Prova tu stesso "
- lunedì
- Inviare una mail
- Visita all'editore
- Scegliere un tema
- Design decorato
- Rapporto finale
- Visualizzazione dei messaggi serali
- Martedì
- Rivedi il programma
- Invia immagini
- Mercoledì...
- lunedì
- Inviare una mail
- Visita all'editore
- Scegliere un tema
- Design decorato
- Rapporto finale
- Visualizzazione dei messaggi serali
- Martedì
- Rivedi il programma
- Invia immagini
- Mercoledì...
- Prova tu stesso "
- Caffè
- Caffè
- Caffè
- Caffè
- Caffè
- Latte
- Caffè
- Latte
- Caffè
- Latte
- Caffè
- Latte
- Prova tu stesso "
- Toro
- Gemelli
- Ariete
- Toro
- Gemelli
- (dal termine di definizione inglese - una parola definita, termine) e
- (dalla definizione inglese Descrizione - la descrizione del termine definito).
- Primo termine
- Descrizione del primo termine
- Secondo termine
- Descrizione del secondo termine
- Prova tu stesso "
- Il World Wide Web
- - dall'inglese. Il World Wide Web (WWW) è un sistema distribuito che fornisce l'accesso a documenti correlati che si trovano su vari computer connessi a Internet.
- Internet
- - un insieme di reti che utilizzano un unico protocollo di scambio per trasferire informazioni.
- Posto
- - un insieme di singole pagine web collegate da link e un unico design.
- Badminton
- Baseball
- Chomolungma
- Chogori
- Kanchenjunga
- Vertice precipitare
- Vicolo dei capricci
- Insano
- mare delle Filippine
- Mar Arabico
- mare di corallo
- rosso
- Verde
- Blu
Stili per elenchi numerati
Esempio Significato Descrizione a, b, c alfa inferiore minuscolo A, B, C alfa-superiore Lettere maiuscole io, ii, iii basso-romano Numeri romani in lettere minuscole I, II, III alto-romano Numeri romani maiuscoli Esempio: applicazione di una proprietà CSS tipo-stile-lista
Elenchi puntati
Gli elenchi puntati sono essenzialmente simili agli elenchi numerati, tranne per il fatto che non contengono la numerazione sequenziale degli elementi. Gli elenchi puntati vengono creati utilizzando un elemento di blocco
EtichettaNell'esempio seguente, puoi vedere che, per impostazione predefinita, viene aggiunto un piccolo indicatore di cerchio pieno davanti a ogni elemento dell'elenco:
All'interno del tag
Elenchi annidati
Qualsiasi elenco può essere nidificato all'interno di un altro. Elemento internoEsempio: elenchi annidati
Formattazione di elenchi puntati
Per modificare l'aspetto dell'indicatore di elenco, utilizzare la proprietà tipo-stile-lista Fogli di stile CSS:
L'esempio seguente mostra i diversi stili degli elenchi puntati:
Esempio: stili di elenco puntato
Disco:
Cerchio:
Quadrato:
Nessuno:
Marcatori grafici.
HTML ha la capacità di creare un elenco con marcatori grafici. Una cosa è quando i punti elenco dell'elenco sono cerchi o quadrati standard, e un'altra quando lo sviluppatore stesso seleziona il marcatore in base al design della pagina. Le immagini piccole vengono spesso utilizzate per rendere belli gli elementi dell'elenco.
Per sostituire un marker normale con uno grafico, sostituire la proprietà tipo-stile-lista per proprietà immagine-stile-elenco e specificare l'indirizzo URL dell'immagine:Esempio: marcatori grafici
segni zodiacali
segni zodiacali
Elenchi di definizioni (descrizione)
Gli elenchi di definizioni sono molto utili per creare, ad esempio, il tuo vocabolario personale di termini. Ogni elemento nell'elenco delle definizioni ha due parti: un termine e la sua definizione.
Metti l'intera lista in un elemento
Gli elenchi di definizioni sono spesso usati nelle pubblicazioni scientifiche, tecniche ed educative, componendo con il loro aiuto glossari, dizionari, libri di riferimento, ecc.La struttura generale dell'elenco di descrizione è la seguente:
L'esempio seguente mostra uno dei possibili usi per un elenco di definizioni:
Esempio: elenco di definizioni
World Wide Web - dall'inglese. Il World Wide Web (WWW) è un sistema distribuito che fornisce l'accesso a documenti correlati che si trovano su vari computer connessi a Internet. Internet è un insieme di reti che utilizzano un unico protocollo di scambio per trasferire informazioni. Il sito è un insieme di singole pagine Web collegate da collegamenti e un unico design.
Per impostazione predefinita, il testo del termine viene premuto sul bordo sinistro della finestra del browser e la descrizione del termine è posizionata sotto e spostata a destra.
Buona giornata!
In questo articolo imparerai tutte le possibilità degli elenchi, capirai come creare un elenco numerato, padroneggi i tag che ti aiuteranno a rendere un semplice elenco puntato più interessante e evidente con punti elenco arbitrari. Dopo aver completato la lezione, capirai dove vengono utilizzati gli elenchi e in quali circostanze possono essere utilizzati.
Questo articolo è il terzo di questo breve tutorial sull'HTML di base. Prima di leggere questa lezione, ti consiglio di ripassare le due precedenti:
L'articolo è appena iniziato e potresti già notare l'uso di un elenco puntato standard. Sul mio sito web, sembra abbastanza semplice: a sinistra c'è un piccolo rientro con una linea e un pennarello quadrato. Più avanti nell'articolo, daremo un'occhiata più da vicino a cosa sono i marcatori, come creare numeri e anche come creare il tuo pennarello.
In ogni parte dell'articolo, la creazione di determinate liste sarà accompagnata da dettagliate spiegazioni per l'inserimento di una particolare lista.
1. Elenchi puntati in HTML
Questo tipo di elenchi viene utilizzato per enumerare un insieme di elementi di significato simile nel testo. Può essere un elenco di collegamenti correlati allo stesso argomento, una spiegazione dettagliata per singole parti del testo. Ma vediamo come appaiono gli elenchi puntati nel codice:
Ed ecco come appare nel browser:
Riso. 1.1. Visualizzazione standard dell'elenco puntato HTML non ordinato nel browser1.1 Punti elenco standard per elenchi puntati
Nell'immagine sopra (Fig 1.1.), puoi vedere i cerchi all'inizio di ogni voce di menu. Questo è il marcatore. Per impostazione predefinita, è un cerchio pieno nel browser. Esistono diversi tipi di marcatori in HTML: cerchio pieno, cerchio vuoto e quadrato. Non richiedono CSS o immagini di terze parti:
1.2 Indicatore elenco come un cerchio vuoto
Conosci i valori degli attributi, ma ora vediamo come creare un elenco puntato HTML nel codice. Dalla tabella sopra, abbiamo selezionato il secondo valore "cerchio" per l'attributo type e lo abbiamo assegnato al nostro elenco puntato:
<html> <testa> <titolo> Un esempio di elenco puntato con un indicatore di cerchio vuoto</ titolo> </ testa> <corpo> <p> Stelle:</ p> <ul type = "cerchio"> <li> Sirius</ li> <li> Arturo</ li> <li> Polluce</ li> <li> Betelgeuse</ li> <li> Il Sole</ li> </ul> </ corpo> </ html> Vediamo come apparirà questo codice nel browser:
Riso. 1.2. Visualizzazione puntata per un elenco sotto forma di cerchio nel browser1.3 Segnalibro a forma di quadrato
Vediamo anche l'ultimo esempio con un punto elenco quadrato per l'elenco HTML:
Notare il marcatore, è diventato quadrato:
Riso. 1.3. Marcatore per una casella di riepilogo come un quadrato in un browserNota importante: questo non è più utilizzato per definire gli elenchi puntati. C'è una chiara separazione tra CSS (leggi cos'è CSS) e HTML. L'HTML è per il markup e il CSS è per il bell'aspetto.
Il codice che contiene questo attributo, quando si specifica il tipo del documento corrente come HTML5 (""), darà un errore durante la convalida. Se non hai sentito cos'è la convalida, dovresti andare qui -.
L'errore sarà il seguente:
Riso. 1.4. Errore sul validatore quando si utilizza l'attributo "tipo" della listaAbbiamo scoperto gli elenchi puntati. Passiamo ora agli elenchi numerati, quindi esamineremo gli elenchi nidificati e alcuni esempi già pronti che vengono utilizzati più spesso su siti reali.
2. Elenchi numerati in HTML
A differenza del tipo precedente di elenchi, gli elenchi numerati hanno una caratteristica importante: aggiungono automaticamente la numerazione. Ciò è utile quando è necessario numerare un elenco di grandi dimensioni. Ci vorrà molto tempo manualmente e puoi ancora perderti. Un elenco numerato viene specificato utilizzando un tag. Come appare in pratica:
Un esempio di elenco numerato:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <testa> <titolo> Esempio di un elenco numerato standard</ titolo> </ testa> <corpo> <p> Da uno a cinque:</ p> <ol> <li> Primo</ li> <li> Secondo</ li> <li> Terzo</ li> <li> Il quarto</ li> <li> Quinto</ li> </ ol> </ corpo> </ html> Ecco come appare un elenco numerato con le impostazioni predefinite nel browser:
Riso. 2.1. Elenco numerato in un browser con impostazioni standardCome il suo predecessore (elenco puntato), ha i propri stili per la visualizzazione dei numeri. La numerazione semplice non è l'unico tipo di punti elenco per un elenco numerato in HTML.
2.1 Punti elenco standard per un elenco numerato
Qui abbiamo una scelta non di tre tipi di marcatori, ma di cinque:
Nome marcatore Il valore dell'attributo "tipo" Esempio di elenco Indicatori di numeri arabi 1 Marcatori a forma di lettere latine minuscole un Pennarelli in forma di lettere latine maiuscole UN Indicatori di numeri romani minuscoli io Numeri romani maiuscoli io 2.2 Numerazione personalizzata nell'elenco HTML
Oltre al consueto output di un elenco numerato, possiamo anche iniziare la nostra numerazione da qualsiasi cifra. Per fare ciò, è necessario impostare l'attributo aggiuntivo "start". Questa numerazione funziona per tutti i tipi di elenchi puntati per elenchi numerati. Come appare in pratica:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <testa> <titolo> Numerazione casuale per un elenco numerato</ titolo> </ testa> <corpo> <p> Cominciamo a numerare da dodici:</ p> <ol type = "a" start = "12"> <li> Dodici</ li> <li> Tredici</ li> <li> Quattordici</ li> <li> Quindici</ li> <li> Sedici</ li> </ ol> </ corpo> </ html> Ecco come verrà visualizzato su un sito live:
Riso. 2.2. Numerazione da un numero arbitrario in un elenco numeratoNell'immagine sopra, abbiamo numerato l'elenco a partire da dodici, creando dei marcatori sotto forma di lettere latine minuscole. Ora, penso, sia diventato chiaro come utilizzare questi attributi nei tuoi progetti.
Per ora, passiamo agli elenchi HTML nidificati.
3. Come creare un elenco multilivello (nidificato) in HTML
Gli elenchi multilivello vengono utilizzati nel sito nella creazione del menu. Questo menu molto spesso ha l'aspetto di un menu a discesa (lezione attiva) o di un menu a discesa a sinistra oa destra. Tali menu consentono di memorizzare altre voci di menu in una forma compatta.
Usando i modelli di auto come esempio, costruiremo un elenco a più livelli in HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html> <testa> <titolo> Elenco puntato nidificato HTML</ titolo> </ testa> <corpo> <ul> <li> Citroen<ul> <li> Berlingo</ li> <li> do1</ li> <li> do2</ li> <li> C3 Picasso</ li> <li> C4 Grand Picasso</ li> </ul> </ li> <li> ANATRA</ li> <li> Toyota</ li> <li> Audi</ li> <li> Lexus</ li> </ul> </ corpo> </ html> Nota come appare un elenco a più livelli in un browser:
Riso. 3.1. Un esempio di elenco multilivello in HTMLAbbiamo creato un elenco multilivello utilizzando un puntato (tag
- ). L'elenco a più livelli con i modelli Citroen è arrivato con altri indicatori. L'elenco principale con punti elenco pieni e l'elenco di secondo livello con cerchi vuoti. Ma, ricorda, con l'attributo "type" possiamo sovrascrivere i marker (è meglio impostarli).
Ma possiamo combinare elenchi multilivello numerati e puntati in questo modo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <testa> <titolo> Elenchi numerati, puntati e numerati in HTML</ titolo> </ testa> <corpo> <ul> <li> Il primo gruppo di tulipani<ol> <li> Primo grado<ul> <li> Tulipani precoci semplici</ li> </ul> </ li> <li> Seconda classe<ul> <li> Tulipani doppi</ li> </ul> </ li> </ ol> </ li> </ul> </ corpo> </ html> Nell'esempio sopra, abbiamo un doppio annidamento (2 livelli). Per prima cosa, inseriamo un elenco di due classi di tulipani, lo abbiamo numerato. Quindi, un elenco puntato viene nidificato in ciascuno degli elementi nell'elenco numerato.
Guardiamo il suo aspetto nel browser:
Riso. 3.2. Un esempio di un elenco numerato multilivello in un elenco puntato in un browser4. Risorse utili per gli elenchi HTML
Contiene informazioni che richiedono la comprensione delle proprietà CSS. Per fare questo, ti consiglio di studiare le seguenti lezioni:. Tutti gli esempi saranno immediatamente con il codice sorgente e suddivisi nelle schede HTML (struttura), CSS (stili) e Risultato (risultato).
4.1 Come trasformare un elenco HTML in una stringa
Potrebbe essere necessario trasformare l'elenco HTML in una stringa durante la creazione di un menu orizzontale. È molto semplice realizzarlo:
4.2 Come creare un elenco HTML senza un'icona
La proprietà list-style-type in CSS è responsabile di questo (maggiori dettagli):
4.3 Come creare un elenco in HTML centrato
Un elemento dell'elenco è un elemento di blocco, quindi deve essere centrato utilizzando il padding. Ma c'è un punto importante: dobbiamo specificare esplicitamente la larghezza affinché l'allineamento funzioni:
4.4 Come creare un elenco in HTML con immagini
È sufficiente solo una proprietà CSS list-style-image. All'interno dell'URL, specificare l'indirizzo prima dell'icona. Voglio solo notare che è meglio selezionare subito una piccola immagine, perché l'altezza della riga dell'elenco dipende da essa:
4.5 Elenco puntato HTML Il tuo marcatore
In questo caso, è necessario collegare preventivamente le icone dei caratteri (ad esempio FontAwesome). Quindi puoi creare qualsiasi icona invece del marcatore standard:
4.6 Come creare un elenco in HTML con più colonne
Per creare un elenco a più colonne utilizzeremo la proprietà CSS Column-count (questa proprietà è supportata solo nei seguenti browser: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). È inoltre necessario impostare l'altezza dell'elenco per visualizzare la suddivisione in più colonne:
5. Pratica di lavorare con le liste
Nel video qui sotto, puoi vedere tutto il lavoro con gli elenchi HTML in pratica:
Per consolidare le informazioni ricevute, consiglio di eseguire tutti i passaggi manualmente. Prova diversi elenchi puntati per gli elenchi, crea elenchi numerati, quindi passa a elenchi multilivello (nidificati) e sperimentali.
Qui è dove finiamo con gli elenchi e passiamo alla prossima lezione sulle immagini.
Esercitati di più!
Lezione 3. Come creare un elenco in HTML 4.91 /5 (98.26%) 23 voto/i
Qui: type sono i caratteri della lista:
Se vuoi che l'elenco inizi con un numero diverso da 1, devi specificarlo utilizzando l'attributo cominciare etichetta
L'esempio seguente mostra un elenco numerato con grandi numeri romani e un valore iniziale di XLIX:Puoi iniziare la numerazione con l'attributo valore che si aggiunge all'elemento
- che puntano a singoli elementi dell'elenco forniscono indicatori standard degli elementi dell'elenco.
Il parametro COMPACT è scritto senza valori e serve per istruire il browser a visualizzare questo elenco in un formato compatto. Ad esempio, il carattere può essere ridotto o la distanza tra le righe dell'elenco, ecc.
Nota
Attualmente, la presenza del parametro COMPACT nel tag
- non pregiudica in alcun modo la visualizzazione degli elenchi da parte dei principali browser. Pertanto, l'uso di questo parametro non ha senso, soprattutto perché il suo utilizzo non è raccomandato dalla specifica HTML 4.0.
Il parametro TYPE può assumere i seguenti valori: disco, cerchio e quadrato. Questo parametro viene utilizzato per forzare la comparsa degli indicatori di elenco. Il tipo esatto di marker dipenderà dal browser utilizzato. Le opzioni di visualizzazione tipiche sono le seguenti:
TYPE = disco - i marker vengono visualizzati con cerchi pieni; TYPE = circle - i marker vengono visualizzati con cerchi aperti; TIPO = quadrato - i marker vengono visualizzati con quadrati pieni. Esempio di registrazione:
- .
L'impostazione predefinita è TYPE = disco. Per gli elenchi puntati nidificati, l'impostazione predefinita è disco al primo livello, cerchio al secondo e quadrato al terzo e oltre. Questo è esattamente ciò che viene fatto nelle ultime versioni dei browser Netscape e Internet Explorer. Tieni presente che altri browser potrebbero visualizzare i marker in modo diverso. Ad esempio, la specifica HTML 4.0 specifica un contorno quadrato per l'aspetto dell'indicatore visualizzato quando TYPE = quadrato.
Il parametro TYPE con gli stessi valori può essere utilizzato per specificare il tipo di marker per le singole voci dell'elenco. Per questo, il parametro TYPE con il valore corrispondente può essere specificato nel tag della voce di elenco
- .
In pratica, i principi della visualizzazione degli elementi di un elenco puntato possono essere applicati in modo simile a un elenco numerato. Ma dato che si tratta di un'enumerazione, ci sono alcune caratteristiche, che verranno discusse di seguito.
Numerazione elenco
E' consentito iniziare la lista da qualsiasi numero; l'attributo start dell'elemento è usato per questo scopo
- o il valore dell'elemento
L'Esempio 11.1 fornisce HTML per aggiungere un elenco puntato a una pagina web.
Esempio 11.1. Crea un elenco puntato
Il risultato di questo esempio è mostrato in Fig. 11.1.
Riso. 11.1. Visualizzazione elenco puntato
Notare il riempimento nella parte superiore, inferiore e sinistra dell'elenco. Tali rientri vengono aggiunti automaticamente.
I marker possono essere di tre tipi: cerchio (predefinito), cerchio e quadrato. L'attributo type del tag viene utilizzato per selezionare lo stile del marker.
- ... I valori consentiti sono riportati nella tabella. 11.1
| Tipo di elenco | codice HTML | Esempio |
|---|---|---|
| Elenco con proiettili a forma di cerchio | ||
| Elenco con proiettili a forma di cerchio | ||
| Elenco con indicatori quadrati |
L'aspetto dei marcatori può variare leggermente nei diversi browser, così come quando si modificano il carattere e la dimensione del testo.
La creazione di una lista con indicatori quadrati è mostrata nell'Esempio 11.2.
Esempio 11.2. Tipo di marcatore
Cambiare convinzioni
Il risultato di questo esempio è mostrato in Fig. 11.2.
Uno dei tipi di elenchi implementati in HTML è un elenco puntato. In caso contrario, gli elenchi di questo tipo vengono chiamati non ordinati o non ordinati. Quest'ultimo nome è spesso usato come traduzione formale del nome del tag corrispondente.
- , con l'aiuto del quale elenchi di questo tipo sono organizzati in documenti HTML (UL - Unordered List, unordered list).
Un elenco puntato utilizza caratteri speciali chiamati elenchi puntati (spesso chiamati punti elenco, che è la pronuncia formale del termine inglese bullet) per evidenziare i suoi elementi. Il tipo di marcatori di elenco è determinato dal browser e, durante la creazione di elenchi annidati, i browser diversificheranno automaticamente l'aspetto dei marcatori a vari livelli di annidamento.
tag e
Per creare un elenco puntato, è necessario utilizzare un tag contenitore, all'interno del quale si trovano tutti gli elementi dell'elenco. I tag di apertura e chiusura dell'elenco forniscono feed di riga prima e dopo l'elenco, separando così l'elenco dal contenuto principale del documento, quindi non è necessario utilizzare i tag di paragrafo qui.
.
Ogni elemento dell'elenco deve iniziare con un tag
