Creazione di elenchi in html. Elenco numerato

Gli elenchi sono una parte importante del contenuto in quanto aiutano a organizzare le informazioni. Il testo negli elenchi è compreso meglio e più facile da ricordare.

Il più semplice è che ciascuno dei suoi elementi è preceduto da un marcatore: un cerchio, un quadrato o un cerchio. L'ordine degli elementi in un elenco puntato non è importante.

Per crearlo, devi utilizzare solo due tag:

e
• .
  è un contenitore contenente una lista, i cui elementi sono specificati dal tag
  • .
    • Una pietra
    • Forbici
    • Carta

    Per impostazione predefinita, un cerchio nero ( disco). Aggiungendo al tag

    attributo genere e assegnandogli un valore appropriato, il marker può essere cambiato in un cerchio ( cerchio) o quadrato nero ( quadrato).

    Differisce da quello contrassegnato in quanto l'ordine degli elementi in esso è importante e quindi, invece di un pennarello, qui vengono utilizzati numeri o lettere sequenziali. Non devi preoccuparti dell'ordine nell'elenco: il browser si occupa di questo compito. Se modifichi l'elenco (rimuovi o aggiungi un articolo fuori servizio), il browser lo ricalcolerà e lo visualizzerà correttamente.

    I tag vengono utilizzati per creare elenchi numerati

    e
    1. ... Contenitore
       definisce l'inizio e la fine della lista, il tag
       1. imposta l'inizio e la fine del suo elemento - tutto è come in un elenco puntato, solo
          sostituito da
          .
          1. Una pietra
          2. Forbici
          3. Carta

          

          Poiché gli elenchi numerati non sono sempre così semplici, per il tag

          ha creato i seguenti attributi (nota: di seguito è riportato un elenco numerato):

          1. genere... Questo attributo consente di numerare l'elenco non solo con l'arabo, ma anche con numeri romani o lettere latine di registro diverso. genere supporta i valori 1 (predefinito), a, A, i, I (prova a sperimentarli da solo).

          2. inizio... La numerazione non deve sempre iniziare con uno. Questo attributo ti consente di impostare il valore iniziale, il numero del primo elemento nell'elenco. In esso, puoi specificare che il rapporto inizia, ad esempio, con il numero 100 o la lettera K.

          3. invertito... Se l'elenco non deve andare da 1 a 10, ma da 10 a 1, è necessario utilizzare questo attributo. Se è specificato, la numerazione verrà eseguita in ordine inverso.

          Per impostare un numero arbitrario su un elemento nel mezzo dell'elenco, è necessario utilizzare nel tag

          1. attributo :

          2. Quarantacinquesimo elemento dopo trentottesimo

          Modificando il numero di un elemento al centro dell'elenco, modificherai anche la numerazione di tutti i seguenti elementi: il rapporto partirà dal valore nell'attributo value. Ad esempio, se hai assegnato il numero 35 all'elemento 18, i seguenti elementi avranno i numeri non 19, 20, 21, ma 36, ​​37, 38.

          Lista delle definizioni

          Tipo di elenco non così noto come discusso sopra. Consiste di termini e delle loro definizioni. Creato utilizzando i tag:

          - il contenitore contenente l'elenco.

          - etichetta termine.

          - tag di definizione

          Lo scopo degli elenchi di definizioni è glossari, libri di riferimento, test, dizionari e altre enumerazioni capienti del tipo "Termine - spiegazione".

          Ecco un esempio di un elenco di definizioni:

          descrittore

          L'unità di base del linguaggio di markup noto a tutti come "Tag".

          Attributo

          Una proprietà tag che offre opzioni di stile del testo aggiuntive.

          Etichetta

          Un singolo tag che non ha bisogno di essere chiuso.

          

          Un elenco composto da elenchi annidati. Può includere elenchi di diversi tipi. La complessità della creazione sta nell'osservare la corretta nidificazione dei tag, poiché è facile confondersi in una struttura a più livelli.

          Ecco un esempio di un elenco multilivello:

          I linguaggi di programmazione si dividono in:

          • Strutturale
          1. Pascal
          2. Oberon
          1. Limbo
          • Orientato agli oggetti
          1. Giava
          • Funzionale
          1. Lisp
          2. Pitone

          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.

          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
          1. ... 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

             4. Dovresti prenderti molta cura del tuo posto di lavoro.
             5. Regolare l'illuminazione della stanza in modo che la sorgente luminosa si trovi sul lato o dietro l'operatore.
             10. 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

             1. Primo
             2. Secondo
             3. Terzo
             4. 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, la lista stessa rimane quella originale, ad essa viene aggiunta solo la classe selezionata, chiamiamola cirilico (esempio 4).

             Esempio 4. Codice per creare una lista

             1. Uno
             2. Due
             3. 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 insieme 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

             1. borsch
             2. Cotolette di luccio
             3. Kulebyaka
             4. Funghi in panna acida
             5. Frittelle con caviale
             6. kvas

             Il risultato di questo esempio è mostrato in Fig. 3.

             Un elenco è una raccolta interconnessa di singole frasi o frasi che iniziano con un punto elenco o un numero. Gli elenchi offrono la possibilità di organizzare e organizzare dati diversi e di presentarli in modo visivo e intuitivo.

             Etichetta

             imposta un elenco numerato, ad es. ogni elemento dell'elenco inizia con un numero o una lettera e aumenta in ordine crescente.

             Stabilisce un elenco puntato, ogni elemento del quale inizia con un piccolo punto elenco.

             Etichetta

             1. definisce un singolo elemento dell'elenco. Tag esterno
                o
                imposta il tipo di elenco - puntato o numerato.

                ,

                ,

                I tre elementi servono per creare un elenco di definizioni. Ciascuno di questi elenchi inizia con un contenitore

                dove va il tag

                creazione di termini e tag

                definire questo termine. Tag di fine

                facoltativo, poiché il tag successivo segnala il completamento dell'elemento precedente. Tuttavia, è buona norma chiudere tutti i tag.

                Gli elenchi numerati sono una raccolta di elementi con i relativi numeri sequenziali. Il tipo e il tipo di numerazione dipendono dagli attributi del tag

                , che viene utilizzato per creare l'elenco. Ogni elemento in un elenco numerato è identificato da un tag
                1. come mostrato di seguito.
                   1. Primo punto
                   2. Secondo punto
                   3. Terzo punto

                   Se non specifichi alcun attributo aggiuntivo e scrivi semplicemente il tag

                   , quindi l'impostazione predefinita è una lista con numeri arabi (1, 2, 3, ...), come mostrato nell'Esempio 11.3.

                   Esempio 11.3. Crea un elenco numerato

                   Lavorare con il tempo

                   1. creazione di puntualità (non sarai mai in ritardo per nulla);
                   2. recupero dalla puntualità (mai precipitarsi da nessuna parte);
                   3. cambiare la percezione del tempo e delle ore.

                   Il risultato di questo esempio è mostrato in Fig. 11.3.

                   Riso. 11.3. Visualizzazione elenco numerato

                   Nota che l'elenco numerato aggiunge anche rientri automatici in alto, in basso e a sinistra del testo.

                   I seguenti valori possono essere utilizzati come elementi di numerazione:

                   • Numeri arabi (1, 2, 3, ...);
                   • lettere latine maiuscole (A, B, C, ...);
                   • lettere latine minuscole (a, b, c, ...);
                   • numeri romani maiuscoli (I, II, III, ...);
                   • numeri romani minuscoli (i, ii, iii, ...).

                   L'attributo type del tag viene utilizzato per indicare il tipo dell'elenco numerato.

                   ... I suoi possibili valori sono riportati nella tabella. 11.2.
                   tab. 11.2. Tipi di elenchi numerati

                   Tipo di elenco	codice HTML	Esempio
                   numeri arabi		1. Cheburashka 2. Gena di coccodrillo 3. Shapoklyak
                   Lettere maiuscole dell'alfabeto latino		A. Cheburashka B. Coccodrillo Gena C. Shapoklyak
                   Lettere minuscole dell'alfabeto latino		un. Cheburashka B. Coccodrillo Gena C. Shapoklyak
                   Numeri romani maiuscoli		I. Cheburashka II. Coccodrillo Gena III. Shapoklyak
                   Numeri romani minuscoli		io. Cheburashka ii. Coccodrillo Gena ii. Shapoklyak

                   Per iniziare l'elenco con un valore specifico, usa l'attributo di inizio del tag

                   ... Non importa quale tipo di elenco è impostato utilizzando type, l'attributo start funziona allo stesso modo con i numeri romani e arabi. L'Esempio 11.4 mostra come creare una lista usando numeri romani maiuscoli che iniziano con otto.

                   Esempio 11.4. Numerazione elenco

                   8. Re Magnum XLIV
                   9. Re Sigfrido XVI
                   10. Re Sigismondo XXI
                   11. Re Husbrandt I

                   Il risultato di questo esempio è mostrato in Fig. 11.4.

                   

                   Riso. 11.4. Elenco numerato con numeri romani