HTML Liste Descrizione
Un elenco descrizione, che consiste di gruppi nome-valore, ed era noto come una lista di definizioni prima HTML5. Descrizione liste sono destinati a gruppi di "termini e definizioni, argomenti di metadati e valori, domande e risposte, o qualsiasi altro gruppo di dati nome-valore".
DL esisteva in tag HTML, ed è stato standardizzato in HTML 2.0; ancora attuali.
Esempio di una lista non ordinata e un elenco ordinato in HTML:
Lista non ordinata:
- Articolo
- Articolo
- Articolo
- Articolo
Elenco ordinato:
- prima voce
- seconda voce
- terzo elemento
- quarto punto
Le liste non ordinate HTML
Una lista non ordinata inizia con il <ul> tag. Ogni elemento della lista comincia con la <li> tag.
Le voci di elenco saranno contrassegnati con proiettili (small black circles) :
Le liste non ordinate HTML - Lo Style attributo
Uno style attributo può essere aggiunto a una lista non ordinata, per definire lo stile del marcatore:
| Stile | Descrizione |
|---|---|
| list-style-type:disc | Le voci di elenco saranno contrassegnati con proiettili (default) |
| list-style-type:circle | Le voci di elenco saranno contrassegnati con i cerchi |
| list-style-type:square | Le voci di elenco saranno contrassegnati con i quadrati |
| list-style-type:none | Le voci di elenco non saranno contrassegnati |
Disc :
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Prova tu stesso " Circle :
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Prova tu stesso " Square :
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Prova tu stesso " None :
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Prova tu stesso " Elenchi HTML ordinate
Una lista ordinata comincia con la <ol> tag. Ogni elemento della lista comincia con la <li> tag.
Le voci di elenco saranno contrassegnati con i numeri:
Liste HTML ordinato - Il Type attributo
Un type attributo può essere aggiunto a una lista ordinata, per definire il tipo di marcatore:
| Tipo | Descrizione |
|---|---|
| type="1" | Le voci di elenco saranno numerate con numeri (default) |
| type="A" | Le voci di elenco saranno numerati con lettere maiuscole |
| type="a" | Le voci di elenco saranno numerati con lettere minuscole |
| type="I" | Le voci di elenco saranno numerate con numeri romani maiuscoli |
| type="i" | Le voci di elenco saranno numerate con numeri romani minuscoli |
Numbers romane maiuscole:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Prova tu stesso " Minuscole numeri romani:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Prova tu stesso " HTML Descrizione Elenca
HTML supporta anche la descrizione liste.
Un elenco descrizione è un elenco di termini, con la descrizione di ogni termine.
Il <dl> tag definisce l'elenco descrizione, il <dt> tag definisce il termine (name) , ed il <dd> tag descrive ogni termine:
Esempio
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> Prova tu stesso " Elenchi HTML nidificate
Lista può essere annidato (lists inside lists) :
Esempio
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul> Prova tu stesso " Elenco articoli possono contenere nuovo elenco, e altri elementi HTML, come immagini e link, ecc
elenchi orizzontali
elenchi HTML può essere uno stile in molti modi diversi con i CSS.
Un modo popolare, è per lo stile un elenco da visualizzare in orizzontale:
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html> Prova tu stesso " Con un po 'di stile in più, si può far sembrare un menu:
Esempio
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
} Prova tu stesso " Riassunto capitolo
- Utilizzare il codice HTML <ul> elemento per definire una lista non ordinata
- Utilizzare il codice HTML style attributo per definire lo stile proiettile
- Utilizzare il codice HTML <ol> elemento per definire un elenco ordinato
- Utilizzare il codice HTML type di attributo per definire il tipo di numerazione
- Utilizzare il codice HTML <li> elemento per definire un elemento della lista
- Utilizzare il codice HTML <dl> elemento per definire un elenco descrizione
- Utilizzare il codice HTML <dt> elemento per definire il termine descrizione
- Utilizzare il codice HTML <dd> elemento per definire i dati descrizione
- Le liste possono essere annidati all'interno liste
- Elenco articoli possono contenere altri elementi HTML
- Utilizzare il display proprietà CSS: inline per visualizzare un elenco orizzontale
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 » Esercizio 6»
HTML Elenco Etichette
| Etichetta | Descrizione |
|---|---|
| <ul> | Definisce una lista non ordinata |
| <ol> | Definisce un elenco ordinato |
| <li> | Definisce una voce di elenco |
| <dl> | Definisce una lista descrizione |
| <dt> | Definisce il termine in un elenco descrizione |
| <dd> | Definisce la descrizione in un elenco descrizione |