Liste HTML. Liste de descriere HTML: dl, dt, dd, li. Liste HTML imbricate. Utilizarea atributului start. Listă orizontală cu CSS.
Partajeaza in Google Classroom
Partajeaza cu Google Classroom
Susține Lectii-Virtuale!
Memorator: Descriere video Descarcă PDF
Liste de descriere HTML
HTML acceptă de asemenea listele de descrieri.
O listă de descrieri este o listă de termeni, cu o descriere a fiecărui termen.
Eticheta <dl> definește lista de descrieri, eticheta <dt> definește termenul (nume) și eticheta <dd> descrie fiecare termen:
Exemplu:
Liste HTML imbricate
Lista poate fi imbricată (listele din liste):
Exemplu:
Numărarea listelor de control
În mod implicit, o listă ordonată va începe să numere de la 1. Dacă doriți să începeți să numărați de la un număr specificat, puteți utiliza atributul start:
Exemplu:
Listă orizontală cu CSS
Listele HTML pot fi proiectate în mai multe moduri diferite cu CSS.
Un mod popular este să creezi o listă pe orizontală, să creezi un meniu de navigare:
Exemplu:
Rezumat
HTML acceptă de asemenea listele de descrieri.
O listă de descrieri este o listă de termeni, cu o descriere a fiecărui termen.
Eticheta <dl> definește lista de descrieri, eticheta <dt> definește termenul (nume) și eticheta <dd> descrie fiecare termen:
Exemplu:
<dl>
<dt> Cafea </dt>
<dd> - băutură caldă neagră </dd>
<dt> Lapte </dt>
<dd> - băutură rece albă </dd>
</dl>
Liste HTML imbricate
Lista poate fi imbricată (listele din liste):
Exemplu:
<ul>
<li> Cafea </li>
<li> Ceai
<ul>
<li> Ceai negru </li>
<li> Ceai verde </li>
</ul>
</li>
<li> Lapte </li>
</ul>
Notă: Elementele din listă pot conține o listă nouă și alte elemente HTML, cum ar fi imagini și link-uri etc.Numărarea listelor de control
În mod implicit, o listă ordonată va începe să numere de la 1. Dacă doriți să începeți să numărați de la un număr specificat, puteți utiliza atributul start:
Exemplu:
<ol start = "50">
<li> Cafea </li>
<li> Ceai </li>
<li> Lapte </li>
</ol>
Listă orizontală cu CSS
Listele HTML pot fi proiectate în mai multe moduri diferite cu CSS.
Un mod popular este să creezi o listă pe orizontală, să creezi un meniu de navigare:
Exemplu:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Acasă </a></li>
<li><a href="#news">Știri</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">Despre</a></li>
</ul>
</body>
</html>
Rezumat
- Utilizați elementul HTML <ul> pentru a defini o listă neordonată.
- Utilizați proprietatea CSS list-style-type pentru a defini marcajul elementelor de listă.
- Utilizați elementul HTML <ol> pentru a defini o listă ordonată.
- Utilizați atributul HTML type pentru a defini tipul de numerotare.
- Utilizați elementul HTML <li> pentru a defini un element de listă.
- Utilizați elementul HTML <dl> pentru a defini o listă de descrieri.
- Utilizați elementul HTML <dt> pentru a defini termenul de descriere.
- Utilizați elementul HTML <dd> pentru a descrie termenul dintr-o listă de descrieri.
- Listele pot fi amplasate în liste.
- Elementele din listă pot conține alte elemente HTML.
- Utilizați proprietatea CSS float: left sau display:inline pentru a afișa o listă pe orizontală.
| Etichetă | Descriere |
|---|---|
| <ul> | Definește o listă neordonată |
| <ol> | Definește o listă ordonată |
| <li> | Definește un element de listă |
| <dl> | Definește o listă de descrieri |
| <dt> | Definește un termen dintr-o listă de descrieri |
| <dd> | Descrie termenul dintr-o listă de descrieri |
Navigare în lectii
Cumpara abonament
Ajutor
Feedback-ul d-voastră este important pentru noi. Dacă observați vreo neregulă vă rugăm să ne-o semnalați apăsând butonul Trimite Feedback de mai jos.
