HTML <li> κείμενο
Ορισμός και χρήση
<li>
Ετικέτα που ορίζει το στοιχείο λίστας.
<li>
Ετικέτα για σειριακή λίστα (<ol>)、μη σειριακή λίστα (<ul>) και λίστας μενού (<menu>)
Στην <ul> και <menu>, τα στοιχεία λίστας εμφανίζονται συνήθως με σημαίες.
Στην <ol>, τα στοιχεία λίστας εμφανίζονται συνήθως με αριθμούς ή γράμματα.
Συμβουλή:Χρησιμοποιήστε CSS για ναΡύθμιση στυλ λίστας.
Για περισσότερες πληροφορίες:
Εκμάθηση HTML:Λίστες HTML
Εγχειρίδιο HTML DOM:Όνειρο
Εκμάθηση CSS:Ρύθμιση στυλ λίστας
Παράδειγμα
Παράδειγμα 1
Μια σειριακή (<ol>
) και μιας μη σειριακής (<ul>
) της λίστας HTML:
<ol> <li>Καφές</li> <li>Τεά</li> <li>Γάλα</li> </ol> <ul> <li>Καφές</li> <li>Τεά</li> <li>Γάλα</li> </ul>
Παράδειγμα 2
Χρήση της ιδιότητας value σε μια σειριακή λίστα:
<ol> <li value="100">Καφέ</li> <li>Τεά</li> <li>Γάλα</li> <li>Πενταδύναμος νερό</li> <li>Σόι</li> <li>Πиво</li> </ol>
Παράδειγμα 3
Ρύθμιση διαφορετικών τύπων στυλ λίστας (χρησιμοποιώντας CSS):
<ol> <li>Καφές</li> <li style="list-style-type:lower-alpha">Τεά</li> <li>Γάλα</li> </ol> <ul> <li>Καφές</li> <li style="list-style-type:square">Τεά</li> <li>Γάλα</li> </ul>
Παράδειγμα 4
Σελίδα κατατάξεων δημιουργίας μιας λίστας (υπό λίστα):
<ul> <li>Καφές</li> <li>Τσάι <ul> <li>Πουέρ</li> <li>绿茶</li> </ul> </li> <li>Γάλα</li> </ul>
Παράδειγμα 5
Δημιουργία μιας πιο σύνθετης ενσωματωμένης λίστας:
<ul> <li>Καφές</li> <li>Τσάι <ul> <li>Πουέρ</li> <li>Πράσινο τσάι <ul> <li>Πράσινη τσάι</li> <li>Λουιζιάννη</li> </ul> </li> </ul> </li> <li>Γάλα</li> </ul>
Ιδιότητα
Ιδιότητα | Τιμή | Περιγραφή |
---|---|---|
value | Αριθμός | Εφαρμόζεται μόνο στις λίστες <ol>. Ορίζει την αρχική τιμή του στοιχείου της λίστας. Οι επόμενες τιμές των στοιχείων της λίστας θα αυξάνονται από αυτήν την αριθμητική τιμή. |
Γενικές ιδιότητες
<li>
Η ετικέτα υποστηρίζει επίσης Γενικές ιδιότητες HTML.
ιδιότητες γεγονότων
<li>
Η ετικέτα υποστηρίζει επίσης Αντικειμενικές ιδιότητες γεγονότων στο HTML.
Προεπιλεγμένες ρυθμίσεις CSS
Οι περισσότεροι περιηγητές θα χρησιμοποιήσουν τις παρακάτω προεπιλεγμένες τιμές για την εμφάνιση <li>
Εлемент:
li { display: list-item; }
Υποστήριξη περιηγητών
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Υποστήριξη | Υποστήριξη | Υποστήριξη | Υποστήριξη | Υποστήριξη |