Ένας από τους τύπους λίστας που εφαρμόζονται σε HTML είναι λίστα με κουκκίδες. Διαφορετικά, οι λίστες αυτού του τύπου ονομάζονται μη αριθμημένες ή μη ταξινομημένες. Το επώνυμο χρησιμοποιείται συχνά ως επίσημη μετάφραση του ονόματος της αντίστοιχης ετικέτας

, με τη βοήθεια του οποίου οι λίστες αυτού του τύπου οργανώνονται σε έγγραφα HTML (UL - Unordered List, unordered list).

Σε μια λίστα με κουκκίδες, ειδικοί χαρακτήρες που ονομάζονται δείκτες λίστας χρησιμοποιούνται για να τονίσουν τα στοιχεία της (συχνά ονομάζονται κουκκίδες, που είναι η επίσημη προφορά του αγγλικού όρου bullet). Η εμφάνιση των δεικτών λίστας καθορίζεται από το πρόγραμμα περιήγησης και όταν δημιουργούνται ένθετες λίστες, τα προγράμματα περιήγησης διαφοροποιούν αυτόματα την εμφάνιση των δεικτών σε διαφορετικά επίπεδα ένθεσης.

Ετικέτες

Και

Για να δημιουργήσετε μια λίστα με κουκκίδες, πρέπει να χρησιμοποιήσετε μια ετικέτα κοντέινερ, μέσα στην οποία βρίσκονται όλα τα στοιχεία της λίστας. Οι ετικέτες της λίστας ανοίγματος και κλεισίματος παρέχουν μια αλλαγή γραμμής πριν και μετά τη λίστα, διαχωρίζοντας έτσι τη λίστα από το κύριο περιεχόμενο του εγγράφου, επομένως δεν χρειάζεται να χρησιμοποιήσετε ετικέτες παραγράφου εδώ


.

Κάθε στοιχείο λίστας πρέπει να ξεκινά με μια ετικέτα

• (LI - Στοιχείο λίστας, στοιχείο λίστας). Ετικέτα
• δεν απαιτεί αντίστοιχη ετικέτα κλεισίματος, αν και η παρουσία της δεν απαγορεύεται κατ' αρχήν. Τα προγράμματα περιήγησης συνήθως ξεκινούν κάθε φορά που εμφανίζουν ένα έγγραφο. νέο στοιχείολίστα από νέα γραμμή.

  Οι πληροφορίες που παρέχονται είναι επαρκείς για τη δημιουργία μιας βασικής λίστας με κουκκίδες. Ας δώσουμε ένα παράδειγμα ενός εγγράφου HTML που χρησιμοποιεί μια λίστα με κουκκίδες, η εμφάνιση του οποίου από το πρόγραμμα περιήγησης φαίνεται στην Εικ. 2.1.

  Ζώδια:

  • Κριός

  • Ταύρος

  • δίδυμα

  • Παρθένος

  • Ζυγός

  • Σκορπιός

  • Τοξότης

  • Αιγόκερως

  • Υδροχόος

  • Ψάρι

  Ρύζι. 2.1.Εμφάνιση λίστας με κουκκίδες στο πρόγραμμα περιήγησης

  Σημειώστε ότι εκτός από τα στοιχεία της λίστας που επισημαίνονται με την ετικέτα

• , ενδέχεται να υπάρχουν άλλα στοιχεία HTML. Στο παραπάνω παράδειγμα, ένα από αυτά τα στοιχεία είναι το απλό κείμενο, το οποίο δεν είναι στοιχείο λίστας, αλλά λειτουργεί ως ο τίτλος του.

  Σημείωση

  Ορισμένα σχολικά βιβλία στη γλώσσα HTML υποδεικνύουν ότι πρέπει να χρησιμοποιηθεί μια ετικέτα κοντέινερ για τον ορισμό του τίτλου της λίστας (LH - Κεφαλίδα λίστας, κεφαλίδα λίστας). Αυτή η ετικέτα δεν αναγνωρίζεται προς το παρόν από κανένα κοινό πρόγραμμα περιήγησης και δεν αποτελεί μέρος της προδιαγραφής HTML. Έτσι, η χρήση του καθίσταται άσκοπη, αν και δεν θα οδηγήσει σε σφάλματα.

  Στην ετικέτα

  μπορούν να καθοριστούν δύο παράμετροι: COMPACT και TYPE.

  Η παράμετρος COMPACT γράφεται χωρίς τιμή και χρησιμοποιείται για να υποδείξει στο πρόγραμμα περιήγησης ότι αυτή τη λίσταπρέπει να παρουσιάζονται σε συμπαγή μορφή. Για παράδειγμα, η γραμματοσειρά ή η απόσταση μεταξύ των γραμμών λίστας κ.λπ. μπορεί να μειωθεί.

  Σημείωση

  Επί του παρόντος, η παρουσία της παραμέτρου COMPACT στην ετικέτα

  δεν επηρεάζει σε καμία περίπτωση την εμφάνιση λιστών σε κορυφαία προγράμματα περιήγησης. Επομένως η εφαρμογή αυτή η παράμετροςδεν έχει νόημα, ειδικά επειδή η χρήση του δεν συνιστάται από την προδιαγραφή HTML 4.0.

  Η παράμετρος TYPE μπορεί να λάβει τις ακόλουθες τιμές: δίσκος, κύκλος και τετράγωνο. Αυτή η παράμετρος χρησιμοποιείται για την επιβολή εμφάνισης κουκκίδων λίστας. Ο ακριβής τύπος δείκτη θα εξαρτηθεί από το πρόγραμμα περιήγησης που χρησιμοποιείτε. Οι τυπικές επιλογές εμφάνισης είναι οι εξής:

  TYPE = δίσκος - οι δείκτες εμφανίζονται ως γεμάτοι κύκλοι. TYPE = κύκλος - οι δείκτες εμφανίζονται ως ανοιχτοί κύκλοι. TYPE = τετράγωνο - οι δείκτες εμφανίζονται ως γεμάτα τετράγωνα. Παράδειγμα καταχώρισης:

  .

  Η προεπιλεγμένη τιμή είναι TYPE = δίσκος. Για ένθετες λίστες με κουκκίδες, η προεπιλεγμένη τιμή είναι δίσκος στο πρώτο επίπεδο, κύκλος στο δεύτερο επίπεδο, τετράγωνο στο τρίτο επίπεδο και μετά. Αυτό ακριβώς γίνεται στο πιο πρόσφατες εκδόσειςΠρογράμματα περιήγησης Netscape και Internet Explorer. Λάβετε υπόψη ότι άλλα προγράμματα περιήγησης ενδέχεται να εμφανίζουν διαφορετικούς δείκτες. Για παράδειγμα, σε Προδιαγραφές HTML 4.0 για τον τύπο του δείκτη που εμφανίζεται όταν η τιμή TYPE = τετράγωνο, υποδεικνύεται ένα μη συμπληρωμένο τετράγωνο (τετράγωνο περίγραμμα).

  Η παράμετρος TYPE με τις ίδιες τιμές μπορεί να χρησιμοποιηθεί για τον καθορισμό του τύπου των δεικτών για μεμονωμένα στοιχεία λίστας. Για να γίνει αυτό, η παράμετρος TYPE με την αντίστοιχη τιμή επιτρέπεται να καθοριστεί στην ετικέτα στοιχείου λίστας

  • .

    Παράδειγμα καταχώρισης:

  • .

    Σημείωση

    Τα προγράμματα περιήγησης ερμηνεύουν διαφορετικά την προδιαγραφή τύπου κουκκίδας για ένα μεμονωμένο στοιχείο λίστας. Το πρόγραμμα περιήγησης Netscape αλλάζει την εμφάνιση του δείκτη για αυτό και όλα τα επόμενα έως ότου εμφανιστεί ο επόμενος επαναπροσδιορισμός της εμφάνισης του δείκτη. Περιηγητής διαδυκτίουΟ Explorer αλλάζει την εμφάνιση του δείκτη μόνο για αυτό το στοιχείο.

    Γραφικοί δείκτες λίστας

    Μπορείτε να χρησιμοποιήσετε γραφικές εικόνες ως κουκκίδες λίστας, το οποίο χρησιμοποιείται ευρέως για τη δημιουργία ελκυστικών, καλά σχεδιασμένων εγγράφων HTML. Στην πραγματικότητα, μια τέτοια ευκαιρία δεν παρέχεται άμεσα Γλώσσα HTML, αλλά εφαρμόζεται κάπως τεχνητά. Αυτό δεν σημαίνει ότι κάτι τέτοιο δεν συνιστάται ή κατακριτέο, αλλά μόνο ότι δεν θα χρησιμοποιηθούν ειδικές δομές γλώσσας HTML εδώ.

    Για να κατανοήσετε την ιδέα, πρέπει να κατανοήσετε τον μηχανισμό για την υλοποίηση λιστών σε σελίδες HTML. Αποδεικνύεται ότι η ετικέτα λίστας

    (όπως, πράγματι, οι ετικέτες λίστας άλλων τύπων, που συζητούνται παρακάτω) εκτελεί μια μεμονωμένη εργασία - λέει στο πρόγραμμα περιήγησης ότι όλες οι πληροφορίες που βρίσκονται μετά από αυτήν την ετικέτα πρέπει να εμφανίζονται μετατοπισμένες προς τα δεξιά (με εσοχή) κατά ένα ορισμένο ποσό. Ετικέτες
    • , δείχνοντας μεμονωμένα στοιχεία λίστας, παρέχουν έξοδο τυπικοί δείκτεςστοιχεία λίστας.

      Εάν χρειάζεται να δημιουργήσουμε μια λίστα με γραφικούς δείκτες, τότε μπορούμε να κάνουμε χωρίς ετικέτες εντελώς

    • . Θα αρκεί να εισαγάγετε την επιθυμητή γραφική εικόνα πριν από κάθε στοιχείο της λίστας. Το μόνο πρόβλημα που πρέπει να λυθεί είναι ο διαχωρισμός των στοιχείων της λίστας μεταξύ τους. Μπορείτε να χρησιμοποιήσετε ετικέτες παραγράφου για αυτό

      Ή να αναγκάσετε μια τροφοδοσία γραμμής
      . Ένα παράδειγμα υλοποίησης λίστας με γραφικούς δείκτες, η εμφάνιση της οποίας φαίνεται στο Σχ. Το 2.2 φαίνεται παρακάτω:

      που θα μεταδοθεί μόνο μία φορά. Τα μεγέθη αρχείων μιας μικρής εικόνας είναι επίσης εξαιρετικά μικρά.

      Σημείωση

      Οι μέθοδοι δημιουργίας λιστών με κουκκίδες γραφικών συζητούνται με τη σειρά στο Κεφάλαιο 8.

      
      

      Κύριες χρήσεις των λιστών:

      Αριθμημένο - για να παραθέσετε τα στοιχεία που ακολουθούν με αυστηρά καθορισμένη σειρά.

      Κουκκίδες - για λίστα στοιχείων με τυχαία σειρά.

      Πολυεπίπεδο - για να καθορίσετε τις πληροφορίες ορισμένων στοιχείων.

      Λίστα ορισμών - χρησιμοποιείται για τη μορφοποίηση λεξικών.

      Σελίδα html με αριθμημένη λίστα

      Οι ετικέτες χρησιμοποιούνται για τη δημιουργία αριθμημένων λιστών

      1. Ετικέτα

         Ετικέτα

         1. Από προεπιλογή, τα στοιχεία της λίστας αριθμούνται με τη σειρά 1, 2, 3... Χρησιμοποιώντας το χαρακτηριστικό TYPE, μπορείτε να αλλάξετε το στυλ αρίθμησης.

            Αρίθμηση τιμής ΤΥΠΟΣ A, B, C.. a a, b, c.. I I, II, III.. i i, ii, iii.. 1 1. 2. 3..

            Εάν προσθέσετε ήδη υπάρχουσα λίστανέες τιμές, το πρόγραμμα περιήγησης θα τις υπολογίσει ξανά αυτόματα.

            Χρησιμοποιώντας τα χαρακτηριστικά START VALUE, μπορείτε να αλλάξετε τη σειρά αρίθμησης της λίστας.

            START - χρησιμεύει για τον καθορισμό του αρχικού αριθμού της λίστας, διαφορετικό από το 1.

            VALUE - καθιστά δυνατή την εκχώρηση ενός αυθαίρετου αριθμού σε οποιοδήποτε στοιχείο της λίστας.

            Παράδειγμα:

            Σελίδα html λίστας με κουκκίδες

            Οι ετικέτες χρησιμοποιούνται για τη δημιουργία λιστών με κουκκίδες

            Ετικέτα

            Σημειώνεται η αρχή/τέλος ολόκληρης της λίστας.

            Ετικέτα

            • υποδεικνύουν την αρχή/τέλος ενός μεμονωμένου στοιχείου λίστας.

              Από προεπιλογή, τα στοιχεία της λίστας επισημαίνονται με μαύρο κύκλο. Το χαρακτηριστικό TYPE μπορεί να χρησιμοποιηθεί για την αλλαγή του στυλ σήμανσης.

              Μέσα σε μία λίστα, μπορείτε να χρησιμοποιήσετε διαφορετικές σημάνσεις για στοιχεία λίστας.

              Παράδειγμα:

              Σελίδα html λίστας πολλαπλών επιπέδων

              Για να δημιουργήσετε λίστες πολλαπλών επιπέδων, μπορείτε να χρησιμοποιήσετε είτε λίστες με κουκκίδες είτε αριθμημένες λίστες ή συνδυασμό και των δύο. Μια λίστα πολλαπλών επιπέδων δημιουργείται με την ένθεση μιας λίστας στο σώμα μιας άλλης. Το κύριο καθήκον είναι να μην μπερδεύεστε. Για να το κάνετε αυτό, σας συμβουλεύω να κάνετε διαφορετικές εσοχές για μεμονωμένες λίστες.

              Λίστες με ορισμούς σελίδας html

              Τρεις ετικέτες χρησιμοποιούνται για τη δημιουργία λιστών ορισμών:

              - αρχή/τέλος της λίστας.

              - αρχή/τέλος συγκεκριμένου όρου.

              - αρχή/τέλος του επεξηγηματικού άρθρου του όρου.

              Ετικέτες

              Και

              δεν είναι απαραίτητο να εναλλάσσονται. Εκείνοι. Μπορείτε να «συνδέσετε» πολλούς όρους σε έναν ορισμό και το αντίστροφο.

              Παράδειγμα:

              Κώδικας HTML: Όρος 1 Περίληψη 1 έως όρος 1 Περίληψη 2 έως όρος 1

              Εμφάνιση προγράμματος περιήγησης: Όρος 1 Περίληψη 1 σε όρο 1 Περίληψη 2 σε όρο 1

              Εφόσον σε αυτόν τον ιστότοπο εφαρμόζονται ορισμένα στυλ σε ορισμένα στοιχεία, η εμφάνισή τους στον πίνακα είναι κάπως διαφορετική από αυτή που θα λάβετε.

              Λίστες HTMLχρησιμοποιείται για την ομαδοποίηση σχετικών πληροφοριών. Υπάρχουν τρεις τύποι λιστών:

              λίστα με κουκκίδες —

              - κάθε στοιχείο της λίστας
              • σημειωμένο με μαρκαδόρο,
                αριθμημένη λίστα —
                - κάθε στοιχείο της λίστας
                1. σημειώνεται με έναν αριθμό
                   κατάλογος ορισμών- - αποτελείται από ζεύγη όρων
                   —
                   ορισμός.

                   Κάθε λίστα είναι ένα κοντέινερ μέσα στο οποίο βρίσκονται στοιχεία λίστας ή ζεύγη ορισμού όρων. Τα στοιχεία λίστας συμπεριφέρονται σαν στοιχεία μπλοκ, στοιβάζονται το ένα κάτω από το άλλο και καταλαμβάνουν ολόκληρο το πλάτος του μπλοκ κοντέινερ. Κάθε στοιχείο λίστας έχει ένα πρόσθετο μπλοκ που βρίσκεται στο πλάι, το οποίο δεν συμμετέχει στη διάταξη.

                   Δημιουργία λιστών HTML

                   1. Λίστα με κουκκίδες

                   Λίστα με κουκκίδεςείναι μια μη ταξινομημένη λίστα (από την αγγλική Unordered List). Δημιουργήθηκε χρησιμοποιώντας μια ζευγοποιημένη ετικέτα

                   . Ο δείκτης ενός στοιχείου λίστας είναι μια ετικέτα, για παράδειγμα, ένας γεμάτος κύκλος.

                   Τα προγράμματα περιήγησης από προεπιλογή προσθέτουν την ακόλουθη μορφοποίηση στο μπλοκ λίστας:

                   Κάθε στοιχείο λίστας δημιουργείται χρησιμοποιώντας μια ζευγοποιημένη ετικέτα

                2. (από το στοιχείο αγγλικής λίστας).
                διαθέσιμος .
                • Microsoft
                • Google
                • μήλο
                Ρύζι. 1. Λίστα με κουκκίδες

                2. Αριθμημένη λίστα

                Αριθμημένη λίσταδημιουργείται χρησιμοποιώντας μια ζευγοποιημένη ετικέτα. Κάθε στοιχείο λίστας δημιουργείται επίσης χρησιμοποιώντας το στοιχείο

              • . Το πρόγραμμα περιήγησης αριθμεί αυτόματα τα στοιχεία με τη σειρά και εάν διαγράψετε ένα ή περισσότερα στοιχεία μιας τέτοιας λίστας, οι υπόλοιποι αριθμοί θα υπολογιστούν εκ νέου αυτόματα.

                Το μπλοκ λίστας έχει επίσης προεπιλεγμένα στυλ προγράμματος περιήγησης:

              • Το χαρακτηριστικό value είναι διαθέσιμο, το οποίο σας επιτρέπει να αλλάξετε τον προεπιλεγμένο αριθμό για το επιλεγμένο στοιχείο λίστας. Για παράδειγμα, εάν για το πρώτο στοιχείο της λίστας που ορίζετε
              • , τότε η υπόλοιπη αρίθμηση θα υπολογιστεί εκ νέου σε σχέση με τη νέα τιμή.

                Για ετικέτα

                Τα ακόλουθα χαρακτηριστικά είναι διαθέσιμα:
                Πίνακας 1. Χαρακτηριστικά ετικέτας

                Χαρακτηριστικό	Περιγραφή, αποδεκτή τιμή
                αντίστροφα	Το χαρακτηριστικό reversed προκαλεί την εμφάνιση της λίστας με αντίστροφη σειρά (για παράδειγμα, 9, 8, 7...).
                αρχή	Το χαρακτηριστικό start καθορίζει την αρχική τιμή από την οποία θα ξεκινήσει η αρίθμηση, για παράδειγμα, μια κατασκευή στο πρώτο στοιχείο θα εκχωρηθεί ο αύξων αριθμός «10». Μπορείτε επίσης να καθορίσετε τον τύπο αρίθμησης ταυτόχρονα, για παράδειγμα, .
                τύπος	Το χαρακτηριστικό type καθορίζει τον τύπο του δείκτη που θα χρησιμοποιηθεί στη λίστα (γράμματα ή αριθμούς). Αποδεκτές τιμές: 1 — προεπιλεγμένη τιμή, δεκαδική αρίθμηση. Α — αρίθμηση καταλόγου με αλφαβητική σειρά, κεφαλαία γράμματα(Α Β Γ Δ). α — αρίθμηση καταλόγου με αλφαβητική σειρά, πεζά γράμματα (a, b, c, d). I - αρίθμηση σε ρωμαϊκούς κεφαλαίους αριθμούς (I, II, III, IV). i — αρίθμηση σε ρωμαϊκούς πεζούς αριθμούς (i, ii, iii, iv).

                1. Microsoft
                2. Google
                3. μήλο
                Ρύζι. 2. Αριθμημένη λίστα

                3. Κατάλογος ορισμών

                Κατάλογοι ορισμώνδημιουργούνται με χρήση ετικέτας

                . Για να προσθέσετε έναν όρο, χρησιμοποιήστε μια ετικέτα
                , και για να εισαγάγετε έναν ορισμό - την ετικέτα
                .

                Το μπλοκ λίστας ορισμών έχει τα ακόλουθα προεπιλεγμένα στυλ προγράμματος περιήγησης:

                Για ετικέτες

                ,

                Και

                διαθέσιμος .

                Διευθυντής:

                Peter Tochilin

                Εκμαγείο:

                Andrey Gaidulyan

                Alexey Gavrilov

                Βιτάλι Γκογκούνσκι

                Mariya Kozhevnikova

                Ρύζι. 3. Κατάλογος ορισμών

                4. Ένθετη λίστα

                Συχνά, οι δυνατότητες απλών λιστών δεν είναι αρκετές· για παράδειγμα, όταν δημιουργείτε έναν πίνακα περιεχομένων, δεν υπάρχει τρόπος να το κάνετε χωρίς ένθετα αντικείμενα. Η σήμανση για την ένθετη λίστα θα είναι η εξής:

                • Παράγραφος 1.
                • Σημείο 2.
                  • Υποπαράγραφος 2.1.
                  • Υποπαράγραφος 2.2.
                    • Υποπαράγραφος 2.2.1.
                    • Υποπαράγραφος 2.2.2.
                  • Υποπαράγραφος 2.3.
                • Σημείο 3.

                
                Ρύζι. 4. Ένθετη λίστα

                5. Αριθμημένη λίστα πολλαπλών επιπέδων

                Μια λίστα πολλών επιπέδων χρησιμοποιείται για την εμφάνιση στοιχείων λίστας σε διαφορετικά επίπεδα με διαφορετικές εσοχές. Η σήμανση για μια αριθμημένη λίστα πολλών επιπέδων θα είναι η εξής:

                1. παράγραφος
                2. παράγραφος
                   1. παράγραφος
                   2. παράγραφος
                   3. παράγραφος
                      1. παράγραφος
                      2. παράγραφος
                      3. παράγραφος
                   4. παράγραφος
                3. παράγραφος
                4. παράγραφος

                Αυτή η προεπιλεγμένη σήμανση θα δημιουργήσει μια νέα αρίθμηση για κάθε ένθετη λίστα, ξεκινώντας με μία. Για να δημιουργήσετε ένθετη αρίθμηση, πρέπει να χρησιμοποιήσετε τις ακόλουθες ιδιότητες:
                Το counter-reset επαναφέρει έναν ή περισσότερους μετρητές, καθορίζοντας την τιμή που πρέπει να μηδενιστεί.
                Το counter-increment καθορίζει την τιμή αύξησης του μετρητή, δηλ. σε ποιες αυξήσεις θα αριθμηθεί κάθε επόμενο στοιχείο.
                περιεχόμενο — παραγόμενο περιεχόμενο, σε σε αυτήν την περίπτωσηείναι υπεύθυνος για την εμφάνιση του αριθμού πριν από κάθε στοιχείο της λίστας.

                Ol ( /* αφαιρέστε την τυπική αρίθμηση */ list-style: none; /* Προσδιορίστε τον μετρητή και δώστε του το όνομα li. Η τιμή του μετρητή δεν καθορίζεται - από προεπιλογή είναι 0 */ counter-reset: li; ) li :before ( /* Ορίζουμε το στοιχείο που θα αριθμηθεί - li. Το ψευδοστοιχείο πριν υποδηλώνει ότι το περιεχόμενο που εισάγεται χρησιμοποιώντας την ιδιότητα περιεχομένου θα τοποθετηθεί πριν από τα στοιχεία της λίστας. Εδώ ορίζουμε επίσης την τιμή της αύξησης του μετρητή (προεπιλογή είναι 1). */ counter-increment: li; / * Η ιδιότητα περιεχομένου εμφανίζει τον αριθμό του στοιχείου της λίστας. counters() σημαίνει ότι το κείμενο που δημιουργείται αντιπροσωπεύει τις τιμές όλων των μετρητών με αυτό το όνομα. Μια τελεία σε εισαγωγικά προσθέτει μια διαχωριστική περίοδο μεταξύ των αριθμών και μια τελεία με κενό προστίθεται πριν από το περιεχόμενο κάθε στοιχείου λίστας */ περιεχόμενο: μετρητές(li,".") "."; )
                Ρύζι. 5. Αριθμημένη λίστα πολλαπλών επιπέδων

              Η HTML υποστηρίζει λίστες τριών ΔΙΑΦΟΡΕΤΙΚΟΙ ΤΥΠΟΙ, καθένα από τα οποία έχει τις δικές του παραμέτρους:

              • – μια αριθμημένη (με χρήση αριθμών ή γραμμάτων) λίστα, κάθε στοιχείο της οποίας έχει έναν αύξοντα αριθμό (γράμμα).
                1. – μια λίστα με κουκκίδες (χωρίς αρίθμηση), δίπλα σε κάθε στοιχείο της οποίας τοποθετείται δείκτης (και όχι αριθμητικοί ή αλφαβητικοί χαρακτήρες που υποδεικνύουν αύξοντα αριθμό)·

                   • – μια λίστα ορισμών αποτελείται από ζεύγη ονόματος/τιμών, συμπεριλαμβανομένων όρων και ορισμών.

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

                   Σε μια αριθμημένη λίστα, το πρόγραμμα περιήγησης εισάγει αυτόματα τους αριθμούς στοιχείων με τη σειρά, ξεκινώντας με μια συγκεκριμένη τιμή (συνήθως 1). Αυτό σας επιτρέπει να εισαγάγετε και να διαγράψετε στοιχεία λίστας χωρίς να διαταραχθεί η αρίθμηση, καθώς οι υπόλοιποι αριθμοί θα επανυπολογιστούν αυτόματα.
                   Οι αριθμημένες λίστες δημιουργούνται χρησιμοποιώντας ένα στοιχείο μπλοκ

                   (από το English Ordered List - αριθμημένη λίστα). Δίπλα στο δοχείο
                   για κάθε στοιχείο λίστας τοποθετείται ένα στοιχείο
                   1. (από το αγγλικό στοιχείο λίστας - στοιχείο λίστας). Η προεπιλογή είναι μια αριθμημένη λίστα με αραβικούς αριθμούς.
                      Ετικέτα
                      έχει την εξής σύνταξη:
                      1. στοιχείο 1
                      2. στοιχείο 2
                      3. στοιχείο 3

                      Τα αριθμημένα στοιχεία λίστας πρέπει να περιέχουν πολλά στοιχεία λίστας, όπως φαίνεται στο ακόλουθο παράδειγμα:

                      Παράδειγμα: Αριθμημένη λίστα

                      • Δοκιμάστε το μόνοι σας"

                      Οδηγία βήμα προς βήμα

                      1. Πάρτε το κλειδί
                      2. Τοποθετήστε το κλειδί στην κλειδαριά
                      3. Γυρίστε το κλειδί δύο στροφές
                      4. Βγάλε το κλειδί από την κλειδαριά
                      5. Ανοιξε την πόρτα

                      Οδηγία βήμα προς βήμα

                      1. Πάρτε το κλειδί
                      2. Τοποθετήστε το κλειδί στην κλειδαριά
                      3. Γυρίστε το κλειδί δύο στροφές
                      4. Βγάλε το κλειδί από την κλειδαριά
                      5. Ανοιξε την πόρτα

                      Μερικές φορές, όταν εξετάζετε τους υπάρχοντες κώδικες HTML, θα συναντήσετε το επιχείρημα τύποςσε στοιχείο

                      , το οποίο χρησιμοποιείται για να υποδείξει τον τύπο αρίθμησης (γράμματα, ρωμαϊκά και Αραβικοί αριθμοίκαι ούτω καθεξής.). Σύνταξη:

                      Εδώ: πληκτρολογήστε – λίστα συμβόλων:

                      • A - κεφαλαία λατινικά γράμματα (A, B, C...).
                      • α - πεζά λατινικά γράμματα (a, b, c...).
                      • I - μεγάλοι ρωμαϊκοί αριθμοί (I, II, III...).
                      • i - μικροί λατινικοί αριθμοί (i, ii, iii...);
                      • 1 - Αραβικοί αριθμοί (1, 2, 3 . . . .) (χρησιμοποιούνται από προεπιλογή).

                      Εάν θέλετε η λίστα να ξεκινά με έναν αριθμό διαφορετικό από το 1, θα πρέπει να το καθορίσετε χρησιμοποιώντας το χαρακτηριστικό αρχήετικέτα

                      .
                      Το ακόλουθο παράδειγμα δείχνει μια αριθμημένη λίστα με μεγάλους λατινικούς αριθμούς και αρχική τιμή XLIX:

                      Η αρίθμηση μπορεί επίσης να ξεκινήσει χρησιμοποιώντας το χαρακτηριστικό αξία, το οποίο προστίθεται στο στοιχείο

                      1. με τον εξής τρόπο:

                      7. Σε αυτή την περίπτωση, η διαδοχική αρίθμηση της λίστας θα διακοπεί και από αυτό το σημείο θα ξεκινήσει ξανά η αρίθμηση, στην περίπτωση αυτή από το επτά.

                         Παράδειγμα χρήσης χαρακτηριστικών αξίαετικέτα

                      8. , το οποίο σας επιτρέπει να αλλάξετε τον αριθμό ενός δεδομένου στοιχείου λίστας:

                         Σε αυτό το παράδειγμα, το "Πρώτο στοιχείο λίστας" θα ήταν ο αριθμός 1, το "Δεύτερο στοιχείο λίστας" θα ήταν ο αριθμός 7 και το "Τρίτο στοιχείο λίστας" θα ήταν ο αριθμός 8.

                         Μορφοποίηση αριθμημένων λιστών με CSS

                         Για να αλλάξετε τους αριθμούς λίστας θα πρέπει να χρησιμοποιήσετε την ιδιότητα λίστα-στυλ-τύπουΦύλλα στυλ CSS:

                         Στυλ αριθμημένων λιστών

                         Παράδειγμα	Εννοια	Περιγραφή
                         α, β, γ	κατώτερο-άλφα	Πεζά
                         Α, Β, Γ	άνω-άλφα	Κεφαλαία γράμματα
                         i, ii, iii	κατώτερο ρωμαϊκό	Ρωμαϊκοί αριθμοί με πεζά γράμματα
                         I, II, III	πάνω-μυθιστόρημα	Ρωμαϊκοί αριθμοί με κεφαλαία γράμματα

                         Παράδειγμα: Εφαρμογή ιδιότητας CSS λίστα-στυλ-τύπου

                         Λίστες με κουκκίδες

                         Οι λίστες με κουκκίδες είναι ουσιαστικά παρόμοιες με τις αριθμημένες λίστες, μόνο που δεν περιέχουν διαδοχική αρίθμηση στοιχείων. Οι λίστες με κουκκίδες δημιουργούνται χρησιμοποιώντας ένα στοιχείο μπλοκ

                         (από την αγγλική Unordered List - unnumbered list). Κάθε στοιχείο λίστας, όπως στις αριθμημένες λίστες, ξεκινά με μια ετικέτα
                         • . Το πρόγραμμα περιήγησης δημιουργεί εσοχές σε κάθε στοιχείο λίστας και εμφανίζει αυτόματα κουκκίδες.
                           Ετικέτα
                           έχει την εξής σύνταξη:
                           • Πρώτο σημείο
                           • Δεύτερο σημείο
                           • Τρίτο σημείο

                           Στο παρακάτω παράδειγμα, μπορείτε να δείτε ότι, από προεπιλογή, ένας μικρός δείκτης με τη μορφή ενός γεμάτου κύκλου προστίθεται πριν από κάθε στοιχείο λίστας:

                           Μέσα σε μια ετικέτα

                           • Δεν είναι απαραίτητο να τοποθετήσετε μόνο κείμενο, είναι αποδεκτό να τοποθετήσετε οποιοδήποτε στοιχείο περιεχομένου ροής (συνδέσμοι, παράγραφοι, εικόνες κ.λπ.)

                             Ένθετες λίστες

                             Οποιαδήποτε λίστα μπορεί να είναι ένθετη σε μια άλλη. Μέσα σε ένα στοιχείο
                           • Επιτρέπεται η δημιουργία ένθετης λίστας ή λίστας δεύτερου επιπέδου. Για να ενσωματώσετε μια λίστα, περιγράψτε τη νέα λίστα μέσα στο στοιχείο
                           • ήδη υπάρχουσα λίστα. Όταν τοποθετείτε μια λίστα με κουκκίδες σε μια άλλη, το πρόγραμμα περιήγησης αλλάζει αυτόματα το στυλ κουκκίδων για τη λίστα δεύτερου επιπέδου. Οποιαδήποτε λίστα μπορεί να είναι ένθετη σε μια άλλη. Το ακόλουθο παράδειγμα δείχνει τη δομή μιας λίστας με κουκκίδες που είναι ένθετη μέσα στο δεύτερο στοιχείο μιας αριθμημένης λίστας.

                             Παράδειγμα: Ένθετες λίστες

                             • Δοκιμάστε το μόνοι σας"
                             • Δευτέρα
                               1. Αποστολή αλληλογραφίας
                               2. Επίσκεψη στον συντάκτη
                                  • Επιλογή θέματος
                                  • Διακοσμητικό σχέδιο
                                  • Τελική αναφορά
                               3. Απογευματινή προβολή μηνυμάτων
                             • Τρίτη
                               1. Αναθεώρηση χρονοδιαγράμματος
                               2. Αποστολή εικόνων
                             • Τετάρτη...
                             • Δευτέρα
                               1. Αποστολή αλληλογραφίας
                               2. Επίσκεψη στον συντάκτη
                                  • Επιλογή θέματος
                                  • Διακοσμητικό σχέδιο
                                  • Τελική αναφορά
                               3. Απογευματινή προβολή μηνυμάτων
                             • Τρίτη
                               1. Αναθεώρηση χρονοδιαγράμματος
                               2. Αποστολή εικόνων
                             • Τετάρτη...

                             Μορφοποίηση λιστών με κουκκίδες

                             Για αλλαγή εμφάνισηΠρέπει να χρησιμοποιηθεί η ιδιότητα δείκτη λίστας λίστα-στυλ-τύπουΦύλλα στυλ CSS:

                             Το ακόλουθο παράδειγμα δείχνει διαφορετικά στυλ λιστών με κουκκίδες:

                             Παράδειγμα: Στυλ λίστας κουκκίδων

                             • Δοκιμάστε το μόνοι σας"
                             • Καφές
                             • Καφές
                             • Καφές
                             • Καφές

                             Δίσκος:

                             • Καφές
                             • Γάλα

                             Κύκλος:

                             • Καφές
                             • Γάλα

                             Τετράγωνο:

                             • Καφές
                             • Γάλα

                             Κανένας:

                             • Καφές
                             • Γάλα

                             Γραφικοί δείκτες.

                             Σε HTML είναι δυνατή η δημιουργία λίστας με γραφικούς δείκτες. Είναι άλλο πράγμα όταν οι δείκτες λίστας είναι τυπικοί κύκλοι ή τετράγωνα και εντελώς άλλο όταν ο ίδιος ο προγραμματιστής επιλέγει τον δείκτη σύμφωνα με τη σχεδίαση της σελίδας. Για να γίνουν όμορφα τα στοιχεία της λίστας, χρησιμοποιούνται συχνά μικρές εικόνες.
                             Για να αντικαταστήσετε έναν κανονικό δείκτη με έναν γραφικό, αντικαταστήστε την ιδιότητα λίστα-στυλ-τύπουανά ιδιοκτησία λίστα-στυλ-εικόνακαι υποδείξτε τη διεύθυνση URL της εικόνας:

                             Παράδειγμα: Γραφικοί δείκτες

                             • Δοκιμάστε το μόνοι σας"

                             ζώδια

                             • Ταύρος
                             • Δίδυμοι

                             ζώδια

                             • Κριός
                             • Ταύρος
                             • Δίδυμοι

                             Λίστες ορισμών (περιγραφές)

                             Οι λίστες ορισμών είναι πολύ χρήσιμες για τη δημιουργία, για παράδειγμα, του προσωπικού σας λεξικού όρων. Κάθε στοιχείο λίστας ορισμού έχει δύο μέρη: τον όρο και τον ορισμό του.
                             Βάζετε ολόκληρη τη λίστα σε ένα στοιχείο

                             (από την αγγλική λίστα ορισμών - λίστα ορισμών). Περιλαμβάνει ετικέτες

                             (από τον αγγλικό όρο ορισμού - μια καθορισμένη λέξη, όρος) και

                             (από τον αγγλικό ορισμό Περιγραφή - περιγραφή του όρου που ορίζεται).
                             Οι κατάλογοι ορισμών χρησιμοποιούνται συχνά σε επιστημονικές, τεχνικές και εκπαιδευτικές δημοσιεύσεις, χρησιμοποιώντας τους για τη σύνταξη γλωσσαρίων, λεξικών, βιβλίων αναφοράς κ.λπ.

                             Η γενική δομή της λίστας περιγραφών έχει ως εξής:

                             Πρώτος όρος

                             Περιγραφή του πρώτου όρου

                             Δεύτερη περίοδος

                             Περιγραφή του δεύτερου όρου

                             Το παρακάτω παράδειγμα δείχνει ένα από τα πιθανές χρήσειςκατάλογος ορισμών:

                             Παράδειγμα: Λίστα ορισμών

                             • Δοκιμάστε το μόνοι σας"

                             World Wide Web - από τα αγγλικά. Ο Παγκόσμιος Ιστός (WWW) είναι ένα κατανεμημένο σύστημα που παρέχει πρόσβαση σε σχετικά έγγραφα που βρίσκονται σε διαφορετικούς υπολογιστές συνδεδεμένους στο Διαδίκτυο. Το Διαδίκτυο είναι ένα σύνολο δικτύων που χρησιμοποιούν ένα ενιαίο πρωτόκολλο ανταλλαγής για τη μετάδοση πληροφοριών. Ένας ιστότοπος είναι ένα σύνολο μεμονωμένων ιστοσελίδων που συνδέονται μεταξύ τους με συνδέσμους και ένα ομοιόμορφο σχέδιο.

                             Ο Παγκόσμιος Ιστός

                             - από τα Αγγλικά Ο Παγκόσμιος Ιστός (WWW) είναι ένα κατανεμημένο σύστημα που παρέχει πρόσβαση σε σχετικά έγγραφα που βρίσκονται σε διαφορετικούς υπολογιστές συνδεδεμένους στο Διαδίκτυο.

                             Διαδίκτυο

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

                             Δικτυακός τόπος

                             - ένα σύνολο μεμονωμένων ιστοσελίδων που συνδέονται μεταξύ τους με συνδέσμους και ομοιόμορφο σχεδιασμό.

                             Από προεπιλογή, το κείμενο του όρου πιέζεται στην αριστερή άκρη του παραθύρου του προγράμματος περιήγησης και η περιγραφή του όρου βρίσκεται παρακάτω και μετατοπίζεται προς τα δεξιά.

                             Οι αριθμημένες λίστες είναι μια συλλογή στοιχείων με τους σειριακούς αριθμούς τους. Ο τύπος και ο τύπος αρίθμησης εξαρτάται από τις παραμέτρους του στοιχείου

                             , το οποίο χρησιμοποιείται για τη δημιουργία της λίστας. Οι ακόλουθες τιμές μπορούν να χρησιμεύσουν ως στοιχεία αρίθμησης:
                             • Αραβικοί αριθμοί (1, 2, 3, ...);
                             • Αραβικοί αριθμοί με αρχικό μηδέν για αριθμούς μικρότερους από δέκα (01, 02, 03, ...,10).
                             • κεφαλαία λατινικά γράμματα (A, B, C, ...);
                             • πεζά λατινικά γράμματα (a, b, c, ...).
                             • κεφαλαίους λατινικούς αριθμούς (I, II, III, ...).
                             • πεζούς λατινικούς αριθμούς (i, ii, iii, ...);
                             • Αρμενική αρίθμηση;
                             • Γεωργιανή αρίθμηση.

                             Από πρακτική άποψη, οι αρχές της εμφάνισης στοιχείων σε μια λίστα με κουκκίδες μπορούν να εφαρμοστούν με παρόμοιο τρόπο σε μια αριθμημένη λίστα. Δεδομένου όμως ότι έχουμε να κάνουμε με μια απαρίθμηση, υπάρχουν ορισμένα χαρακτηριστικά που θα συζητηθούν περαιτέρω.

                             Αρίθμηση λίστας

                             Επιτρέπεται η έναρξη της λίστας από οποιονδήποτε αριθμό. Το χαρακτηριστικό start του στοιχείου χρησιμοποιείται για αυτό το σκοπό

                             ή αξία του στοιχείου
                             1. . Η τιμή είναι οποιοσδήποτε θετικός ακέραιος. Δεν έχει σημασία ποιος τύπος αρίθμησης έχει οριστεί, ακόμα κι αν χρησιμοποιούνται λατινικά γράμματα ως λίστα. Εάν και τα δύο χαρακτηριστικά έναρξης και τιμής εφαρμόζονται σε μια λίστα ταυτόχρονα, τότε η τελευταία έχει προτεραιότητα και η αρίθμηση εμφανίζεται από τον αριθμό που καθορίζεται από την τιμή , όπως φαίνεται στο Παράδειγμα 1.

                                Παράδειγμα 1: Αλλαγή της αρίθμησης της λίστας

                                4. Θα πρέπει να φροντίζετε καλά τον χώρο εργασίας σας.
                                5. Ρυθμίστε τον φωτισμό στο δωμάτιο έτσι ώστε η πηγή φωτός να βρίσκεται στο πλάι ή πίσω από τον χειριστή.
                                10. Για να αποφύγετε ιατρικές επιπλοκές, συνιστάται να επιλέξετε μια καρέκλα με μαλακό κάθισμα.

                                Το πρώτο στοιχείο της λίστας σε αυτό το παράδειγμα θα ξεκινά με τον ρωμαϊκό αριθμό IV, αφού το χαρακτηριστικό start="4" καθορίζεται, μετά έρχεται ο αριθμός V και το τελευταίο στοιχείο βγαίνει εκτός σειράς και του εκχωρείται ο αριθμός X (Εικόνα 1).

                                Ρύζι. 1. Ρωμαϊκοί αριθμοί στη λίστα

                                Γράψιμο αριθμών

                                Από προεπιλογή, μια αριθμημένη λίστα έχει μια συγκεκριμένη εμφάνιση: πρώτα υπάρχει ένας αριθμός, μετά μια τελεία και μετά το κείμενο εμφανίζεται χωρισμένο με κενό. Αυτή η μορφή γραφής είναι οπτική και βολική, αλλά ορισμένοι προγραμματιστές προτιμούν να βλέπουν έναν διαφορετικό τρόπο σχεδιασμού της αρίθμησης των λιστών. Δηλαδή, έτσι ώστε αντί για τελεία να υπάρχει ένα στήριγμα κλεισίματος, όπως φαίνεται στο Σχ. 2 ή κάτι παρόμοιο.

                                

                                Ρύζι. 2. Προβολή αριθμημένης λίστας με αγκύλη

                                Τα στυλ σάς επιτρέπουν να αλλάξετε τον τύπο της αρίθμησης της λίστας χρησιμοποιώντας τις ιδιότητες περιεχομένου και αντιπροσαύξησης. Αρχικά, ο επιλογέας ol πρέπει να ρυθμιστεί σε αντίστροφη επαναφορά : στοιχείο , αυτό είναι απαραίτητο ώστε η αρίθμηση σε κάθε νέα λίστα να ξεκινά εκ νέου. Διαφορετικά, η αρίθμηση θα συνεχιστεί και αντί για 1,2,3 θα δείτε 5,6,7. Η τιμή του στοιχείου είναι ένα μοναδικό αναγνωριστικό για τον μετρητή· το επιλέγουμε μόνοι μας. Στη συνέχεια, πρέπει να αποκρύψετε τους αρχικούς δείκτες μέσω της ιδιότητας στυλ list-style-type με την τιμή none .

                                Η ιδιότητα περιεχομένου συνήθως λειτουργεί σε συνδυασμό με τα ψευδοστοιχεία ::after και ::before. Έτσι, το li::before κατασκευή λέει ότι πρέπει να προστεθεί κάποιο περιεχόμενο πριν από κάθε στοιχείο της λίστας (παράδειγμα 2).

                                Παράδειγμα 2. Δημιουργία της δικής σας αρίθμησης

                                Li::before ( περιεχόμενο: counter(item) ") "; /* Προσθέστε μια παρένθεση στους αριθμούς */ counter-increment: item; /* Ορίστε το όνομα του μετρητή */ )

                                Η ιδιότητα περιεχομένου με τον μετρητή τιμής(στοιχείο) εμφανίζει έναν αριθμό. Προσθέτοντας μια παρένθεση, όπως φαίνεται σε αυτό το παράδειγμα, παίρνουμε τον απαιτούμενο τύπο αρίθμησης. Απαιτείται αντίθετη αύξηση για να αυξηθεί ο αριθμός της λίστας κατά ένα. Σημειώστε ότι το ίδιο αναγνωριστικό, με όνομα στοιχείο , χρησιμοποιείται παντού. Ο τελικός κωδικός φαίνεται στο Παράδειγμα 3.

                                Παράδειγμα 3: Αλλαγή της προβολής λίστας

                                1. Πρώτα
                                2. Δεύτερος
                                3. Τρίτος
                                4. Τέταρτος

                                Χρησιμοποιώντας την παραπάνω μέθοδο, μπορείτε να δημιουργήσετε οποιονδήποτε τύπο αριθμημένης λίστας, για παράδειγμα, να βάλετε έναν αριθμό σε αγκύλες, σε αυτήν την περίπτωση μόνο μία γραμμή θα αλλάξει στα στυλ.

                                Περιεχόμενο: "[" counter(item) "] ";

                                Λίστα με ρωσικά γράμματα

                                Υπάρχει μια αριθμημένη λίστα με λατινικά γράμματα, αλλά δεν υπάρχουν ρωσικά γράμματα για τη λίστα. Μπορούν να προστεθούν τεχνητά χρησιμοποιώντας την παραπάνω τεχνική. Εφόσον η αρίθμηση γίνεται μέσω στυλ, η ίδια η λίστα παραμένει πρωτότυπη, προστίθεται μόνο η επιλεγμένη κλάση, ας την ονομάσουμε κυριλική (παράδειγμα 4).

                                Παράδειγμα 4: Κωδικός για τη δημιουργία λίστας

                                1. Ενας
                                2. Δύο
                                3. Τρία

                                Η προσθήκη γραμμάτων γίνεται χρησιμοποιώντας το ψευδοστοιχείο ::before και την ιδιότητα περιεχομένου. Επειδή κάθε γραμμή πρέπει να έχει το δικό της γράμμα, θα χρησιμοποιήσουμε την ψευδο-κλάση :nth-child(1) , με τον αριθμό του γράμματος γραμμένο σε παρένθεση. Το πρώτο γράμμα, φυσικά, είναι Α, το δεύτερο είναι Β, το τρίτο είναι C, κ.λπ. Αυτό το σύνολο προστίθεται στον επιλογέα li ως εξής (παράδειγμα 5).

                                Παράδειγμα 5: Χρησιμοποιώντας την ψευδο-τάξη:nth-child

                                Κυριλικά li:nth-child(1)::before ( περιεχόμενο: "a)"; ) .cyrilic li:nth-child(2)::before ( περιεχόμενο: "β)"; ) .cyrilic li:nth-child(3)::before ( περιεχόμενο: "at)"; )

                                Σε αυτό το παράδειγμα, κάθε γράμμα ακολουθείται από μια παρένθεση, όλα τα γράμματα είναι πεζά. Μπορείτε να ορίσετε τον δικό σας τύπο αρίθμησης λίστας, για παράδειγμα μπορεί να περιέχει κεφαλαία γράμματα με τελεία, με μία ή δύο αγκύλες ή μόνο γράμματα. Σε αντίθεση με την τυπική αρίθμηση, είμαστε ελεύθεροι να κάνουμε ό,τι θέλουμε εδώ. Μια λίστα με δέκα γράμματα θα πρέπει να είναι αρκετή για σχεδόν όλες τις καταστάσεις, αλλά αν αυτό ξαφνικά αποδειχθεί ότι δεν είναι αρκετό, τίποτα δεν μας εμποδίζει να επεκτείνουμε τη λίστα μας ώστε να περιλαμβάνει τουλάχιστον όλα τα γράμματα του ρωσικού αλφαβήτου.

                                Τέλος, προσαρμόζουμε τη στοίχιση και τη θέση των γραμμάτων, καθορίζουμε προαιρετικά το μέγεθος γραμματοσειράς, το χρώμα και άλλες παραμέτρους (παράδειγμα 6).

                                Παράδειγμα 6. Λίστα με ρωσικά γράμματα

                                1. Borsch
                                2. Κοτολέτες λούτσων
                                3. Kulebyaka
                                4. Μανιτάρια σε κρέμα γάλακτος
                                5. Τηγανίτες με χαβιάρι
                                6. Kvass

                                Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο Σχ. 3.