Exemplu de listă neordonată și o listă ordonată în HTML:
Lista neordonata:
- Articol
- Articol
- Articol
- Articol
Lista ordonata:
- Primul articol
- Al doilea articol
- Al treilea element
- Al patrulea element
Liste HTML neordonate
O lista neordonata începe cu <ul> tag - ul. Fiecare element din listă începe cu <li> tag - ul.
Elementele listă vor fi marcate cu gloanțe (small black circles) , (small black circles) :
Liste HTML neordonată - Style Atributul
Un style de atribut poate fi adăugat la o listă neordonată, pentru a defini stilul markerului:
| Stil | Descriere |
|---|---|
| list-style-type:disc | Elementele listă vor fi marcate cu gloanțe (default) |
| list-style-type:circle | Elementele listă vor fi marcate cu cercuri |
| list-style-type:square | Elementele listă vor fi marcate cu pătrate |
| list-style-type:none | Elementele de listă nu vor fi marcate |
Disc :
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Încearcă - l singur » Circle :
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Încearcă - l singur » Square :
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Încearcă - l singur » None :
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Încearcă - l singur » Liste HTML ordonate
O listă ordonată începe cu <ol> tag - ul. Fiecare element din listă începe cu <li> tag - ul.
Elementele listă vor fi marcate cu numere:
Liste HTML comandata - Type Atributul
Un type de atribut poate fi adăugat la o listă ordonată, pentru a defini tipul de marker:
| Tip | Descriere |
|---|---|
| type="1" | Elementele Lista vor fi numerotate cu cifre (default) |
| type="A" | Elementele Lista vor fi numerotate cu litere majuscule |
| type="a" | Elementele Lista vor fi numerotate cu litere mici |
| type="I" | Elementele Lista vor fi numerotate cu cifre romane majuscule |
| type="i" | Elementele Lista vor fi numerotate cu cifre romane cu litere mici |
Numbers Majuscule Roman:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Încearcă - l singur » Numbers Roman Minuscule:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Încearcă - l singur » HTML Descriere Liste
HTML sprijină, de asemenea, liste de descriere.
O listă descriere este o listă de termeni, cu o descriere a fiecărui termen.
<dl> Eticheta definește lista descrierii, <dt> Eticheta definește termenul (name) , iar <dd> tag - ul descrie fiecare termen:
Exemplu
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Încearcă - l singur » Liste HTML imbricate
Lista poate fi imbricate (lists inside lists) în (lists inside lists) :
Exemplu
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Încearcă - l singur » Elementele din listă pot conține nouă listă, precum și alte elemente HTML, cum ar fi imagini și link-uri, etc.
Liste orizontale
Listele HTML pot fi stil în mai multe moduri diferite, cu CSS.
O modalitate de popular, este de stil o listă care urmează să fie afișată pe orizontală:
Exemplu
<!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>
Încearcă - l singur » Cu un stil pic in plus, o puteți face să arate ca un meniu:
Exemplu
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;
}
Încearcă - l singur » Rezumatul capitolului
- Utilizați HTML <ul> elementul pentru a defini o listă neordonată
- Utilizați HTML style atribut pentru a defini stilul bullet
- Utilizați HTML <ol> elementul pentru a defini o listă ordonată
- Utilizați HTML de type atribut pentru a defini tipul de numerotare
- Utilizați HTML <li> Elementul pentru a defini un element din listă
- Folosiți HTML <dl> elementul pentru a defini o listă descriere
- Utilizați HTML <dt> elementul pentru a defini termenul de descriere
- Utilizați HTML <dd> elementul pentru a defini descrierea datelor
- Listele pot fi imbricate în interiorul listelor
- Listă elemente pot conține alte elemente HTML
- Utilizați afișajul de proprietate CSS: inline pentru a afișa o listă pe orizontală
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 » Exercițiul 6»
HTML Listă Tag-uri
| Etichetă | Descriere |
|---|---|
| <ul> | Definește o listă neordonată |
| <ol> | Definește o listă ordonată |
| <li> | Definește un element din listă |
| <dl> | Definește o listă descriere |
| <dt> | Definește termenul într-o listă descriere |
| <dd> | Definește descrierea într-o listă descriere |