Λίστες στην HTML (HTML Lists)

Λίστες στην HTML (HTML Lists)

Λίστες στην HTML

Οι λίστες στην HTML μπορούν να είναι αριθμημένες <ol> </ol> ή μη αριθμημένες <ul> </ul>. Κάθε μέλος της λίστας έχει τις ετικέτες <li> </li>.

Αριθμημένες Λίστες

Στις αριθμημένες λίστες στην HTML μπορούμε να διαλέξουμε τον τύπο της αρίθμησης που θα χρησιμοποιήσουμε στην ιστοσελίδα μας.

Οι αριθμημένες λίστες στην HTML έχουν τους εξής τύπους:

  • type=”1″
  • type=”A”
  • type=”a”
  • type=”I”
  • type=”i”

Αριθμημένη Λίστα type=”1″

Σε αυτόν τον τύπο λίστας η αρίθμηση γίνεται με αριθμούς. Αυτός είναι ο προεπιλεγμένος τύπος αρίθμησης στην περίπτωση που δεν ορίσουμε κάποιο τύπο εμείς.

Παράδειγμα 

<ol type="1">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

Αποτέλεσμα

Λίστες στην HTML

Αριθμημένη Λίστα type=”A”

Σε αυτόν τον τύπο λίστας η αρίθμηση γίνεται με κεφαλαία γράμματα.

Παράδειγμα

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

Αποτέλεσμα

Λίστες στην HTML

Αριθμημένη Λίστα type=”a”

Σε αυτόν τον τύπο λίστας η αρίθμηση γίνεται με πεζά γράμματα.

Παράδειγμα

<ol type="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

Αποτέλεσμα

Λίστες στην HTML

Αριθμημένη Λίστα type=”I”

Σε αυτόν τον τύπο λίστας η αρίθμηση γίνεται με κεφαλαία Λατινικά.

Παράδειγμα

<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

Αποτέλεσμα

Λίστες στην HTML

Αριθμημένη Λίστα type=”i”

Σε αυτόν τον τύπο λίστας η αρίθμηση γίνεται με πεζά Λατινικά.

Παράδειγμα

<ol type="i">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

Αποτέλεσμα

Λίστες στην HTML

 Μη αριθμημένες Λίστες

Οι μη αριθμημένες λίστες αντί για αριθμούς έχουν δείκτες (markers). Σε αυτές τις λίστες μπορούμε να διαλέξουμε το τύπο του δείκτη που θα χρησιμοποιήσουμε στην ιστοσελίδα μας.

Οι μη αριθμημένες λίστες έχουν τους εξής τύπους:

  • list-style-type:disc
  • list-style-type:circle
  • list-style-type:square
  • list-style-type:none

Μη αριθμημένη Λίστα list-style-type:disc

Σε αυτόν τον τύπο λίστας οι δείκτες είναι μαύρες κουκκίδες. Αυτός είναι ο προεπιλεγμένος τύπος δεικτών στην περίπτωση που δεν ορίσουμε κάποιο τύπο εμείς.

Παράδειγμα 

<ul style="list-style-type:disc">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

Αποτέλεσμα

Λίστες στην HTML

Μη αριθμημένη Λίστα list-style-type:circle

Σε αυτόν τον τύπο λίστας οι δείκτες είναι κύκλοι.

Παράδειγμα

<ul style="list-style-type:circle">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

Αποτέλεσμα

Λίστες στην HTML

Μη αριθμημένη Λίστα list-style-type:square

Σε αυτόν τον τύπο λίστας οι δείκτες είναι μαύρα τετράγωνα.

Παράδειγμα

<ul style="list-style-type:square">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

Αποτέλεσμα

Λίστες στην HTML

Μη αριθμημένη Λίστα list-style-type:none

Σε αυτόν τον τύπο λίστας δεν υπάρχουν δείκτες.

Παράδειγμα

<ul style="list-style-type:none">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

Αποτέλεσμα

Λίστες στην HTML

Απάντηση

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε πώς υφίστανται επεξεργασία τα δεδομένα των σχολίων σας.