Η 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) είναι ένα κατανεμημένο σύστημα που παρέχει πρόσβαση σε σχετικά έγγραφα που βρίσκονται σε διαφορετικούς υπολογιστές συνδεδεμένους στο Διαδίκτυο.

               Διαδίκτυο

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

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

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

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

               Όταν είναι απαραίτητο να αριθμήσετε κάτι σε έναν ιστότοπο, χρησιμοποιείται πιο συχνά μια ταξινομημένη λίστα (

               ). Είναι λογικό να περιμένουμε ότι μπορεί να υπάρχει η επιθυμία να εργαστούμε για το σχεδιασμό αυτών των αριθμών. Στο CSS, ωστόσο, η συνειδητοποίηση αυτής της επιθυμίας είναι αρκετά προβληματική, αλλά, ευτυχώς, όχι αδύνατη. Στο σεμινάριο του, ο Roger Johansson δείχνει πώς αυτό μπορεί να εφαρμοστεί χρησιμοποιώντας το ψευδοστοιχείο:before, το οποίο μπορεί να ορίσει την ιδιότητα περιεχομένου σε counter .

               Το ψευδοστοιχείο:πριν χρησιμοποιείται για την εμφάνιση του επιθυμητού περιεχομένου πριν από το στοιχείο στο οποίο προστίθεται. Λειτουργεί σε συνδυασμό με την ιδιότητα περιεχομένου.

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

               ), το οποίο αποτελείται από ερωτήσεις και απαντήσεις για τις Συχνές Ερωτήσεις σας.

               Η σήμανση θα μοιάζει κάπως έτσι:

               Πόσο ξύλο θα έκανε ένα τσοκ ξύλου αν ένα τσοκ ξύλου μπορούσε να τσακίσει ξύλο;

               1,000,000

               Ποια είναι η ταχύτητα της ταχύτητας του αέρα ενός χελιδονιού χωρίς φορτίο;

               Τι εννοείς? Αφρικανικό ή ευρωπαϊκό χελιδόνι;

               Γιατί η κότα διέσχισε τον δρόμο?

               Για να φτάσουμε στην άλλη πλευρά

               Κάθε νέο

               Το στοιχείο είναι μια νέα ερώτηση, επομένως εφαρμόζουμε αρίθμηση σε αυτά. Θα φαίνεται εξαιρετικά απλό:

               Η ιδιότητα περιεχομένου σάς επιτρέπει να εισάγετε περιεχόμενο που δημιουργείται στο κείμενο μιας ιστοσελίδας που δεν υπάρχει αρχικά στο κείμενο.
               counter value Εκτυπώνει την τιμή του μετρητή που καθορίζεται από την ιδιότητα counter-reset.

               Η ιδιότητα counter-reset ορίζει ένα αναγνωριστικό για τον μετρητή και ορίζει την αρχική τιμή.
               Η ιδιότητα counter-increment καθορίζει το βήμα κατά το οποίο αυξάνεται η τιμή του μετρητή.

               Συνήθεις ερωτήσεις ( counter-reset: my-badass-counter; ) .faq dt:before ( περιεχόμενο: counter(my-badass-counter); counter-increment: my-badass-counter; )

               Στο ψευδοστοιχείο :before μπορεί να εκχωρηθεί οποιοδήποτε στυλ. Για παράδειγμα:

               

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

               

               Η αριθμητική ποικιλία αναπαρίσταται ως τιμές της ιδιότητας τύπου list-style.
               Και συγκεκριμένα:

               

               Το μόνο που απαιτείται είναι να υποδείξετε την επιθυμητή επιλογή στην τιμή του μετρητή.

               Περιεχόμενο: counter(my-counter, low-roman);

               Το μέλλον του CSS3

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

               Li::δείκτης (πλάτος: 30 εικονοστοιχεία; στοίχιση κειμένου: δεξιά, περιθώριο-δεξιά: 10 εικονοστοιχεία; εμφάνιση: ενσωματωμένο μπλοκ; ) ol ( στυλ λίστας: σύμβολα ("*""2020""2021""A7"); ) ul ( list-style-type: "θα πρέπει να υπάρχει ένας αστερίσκος εδώ)"; )

               Εάν έχετε προσπαθήσει ποτέ να αλλάξετε στυλ CSS αριθμών γραμμής (ψηφία) σε ταξινομημένες λίστες

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

               Ακολουθεί το απλούστερο παράδειγμα μιας λίστας χωρίς στυλ:

               html

               1. Να φυτέψει ένα δέντρο
               2. Χτίζω ένα σπίτι
               3. Μεγάλωσε έναν γιο

               Ας δούμε διάφορους τρόπους επίλυσης του παραπάνω προβλήματος.

               Παραδοσιακά ένας αδέξιος τρόπος.

               Ο παραδοσιακός τρόπος επίλυσης αυτού του προβλήματος είναι η απόκρυψη των αριθμών γραμμής που εκχωρούνται αυτόματα από το πρόγραμμα περιήγησης. Σε αυτήν την περίπτωση, χρησιμοποιείται η ιδιότητα list-style: none; .

               css

               li( στυλ λίστας: κανένα; ) .num( χρώμα: λευκό; φόντο: #2980B9; εμφάνιση: inline-block; στοίχιση κειμένου: κέντρο; περιθώριο: 5 px 10 px; ύψος γραμμής: 40 px; πλάτος: 40 px; ύψος: 40 εικονοστοιχεία;)

               html

               1. 1Να φυτέψει ένα δέντρο
               2. 2Χτίζω ένα σπίτι
               3. 3Μεγάλωσε έναν γιο

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

               Ας δούμε πώς μπορούμε να επιτύχουμε το ίδιο αποτέλεσμα χωρίς να μπλοκάρουμε τη διάταξη και να χρησιμοποιήσουμε το ψευδοστοιχείο::before και το περιεχόμενο των ιδιοτήτων CSS , counter-increment , counter-reset .

               Ένας όμορφος και σωστός τρόπος.

               Πρώτα θα παράσχουμε τον κωδικό και την επίδειξη και μετά θα καταλάβουμε τι είναι τι.

               css

               ol( counter-reset: myCounter; ) li(list-style: none;) li:before (counter-increment: myCounter; content:counter(myCounter); χρώμα: λευκό; background: #2980B9; display: inline-block; στοίχιση κειμένου: κέντρο, περιθώριο: 5 εικονοστοιχεία 10 εικονοστοιχεία, ύψος γραμμής: 40 εικονοστοιχεία, πλάτος: 40 εικονοστοιχεία, ύψος: 40 εικονοστοιχεία, )

               html

               1. Να φυτέψει ένα δέντρο
               2. Χτίζω ένα σπίτι
               3. Μεγάλωσε έναν γιο

               Όπως μπορείτε να δείτε, ο κώδικας html παραμένει καθαρός και όμορφος. Σε αυτήν την περίπτωση, όλο το στυλ των στοιχείων της λίστας μεταφέρεται στο css.

               Ας δούμε σημείο προς σημείο:

               • li::πριν– δημιουργεί ένα ψευδοστοιχείο μέσα στη λίστα, το οποίο παίρνει τη θέση του πρώτου παιδιού.
               • counter-reset:myCounter;– επαναφέρει τον μετρητή css myCounter μέσα στο καθένα
                 .
                 1. αντίθετη αύξηση: myCounter;– αυξάνει τον μετρητή css myCounter για κάθε ψευδοστοιχείο::before .
                 2. content:counter(myCounter);– εκτυπώνει την τρέχουσα τιμή του μετρητή myCounter μέσα στο::before ψευδοστοιχείο.

               Περισσότερες λεπτομέρειες σχετικά με τους μετρητές css μπορείτε να βρείτε στο

               
               

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

               Το CSS χρησιμοποιεί μετρητές για να αυτοματοποιήσει τη διαδικασία αρίθμησης.

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

               Αναγνώριση μετρητή

               Πρώτα πρέπει να αναγνωρίσετε τον μετρητή.

               Χρησιμοποιώντας την ιδιότητα counter-reset, εκχωρείται στον μετρητή ένα όνομα και μια αρχική τιμή. Το όνομα μπορεί να είναι οτιδήποτε, αλλά δεν μπορεί να ξεκινά με έναν αριθμό.

               Απόσπασμα κώδικα:

               Αυτό το λήμμα λέει ότι για την ετικέτα εγκαθίσταται ένας μετρητής με όνομα αριθμός με αρχική τιμή 3.

               Από προεπιλογή, η αρχική τιμή του μετρητή είναι 0.

               Αύξηση μετρητή

               Η ιδιότητα counter-increment χρησιμοποιείται για αυτό. Χρησιμοποιείται επίσης για τον καθορισμό προσαυξήσεων μετρητή - τον αριθμό κατά τον οποίο θα αυξηθεί η τιμή του μετρητή.

               Απόσπασμα κώδικα:

               σώμα (αντιεπιλογή: αριθμός 3 ;)
               σώμα p ( αντίθετη αύξηση : αριθμός 3 ; }

               Αυτό το απόσπασμα κώδικα λέει ότι οι παράγραφοι ( ετικέτα

               ) στο σώμα του εγγράφου θα αριθμηθεί με τον αριθμητικό μετρητή σε προσαυξήσεις του 3.

               Η πρώτη παράγραφος θα έχει αριθμό 6, αφού η αρχική τιμή του μετρητή είναι 3 και η προσαύξησή του είναι 3.

               Η προεπιλεγμένη τιμή για αυξήσεις μετρητή είναι 1.

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

               Οθόνη πάγκου

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

               Η ιδιότητα περιεχομένου εισάγει το περιεχόμενο πριν από ( πριν) ή μετά ( μετά) του καθορισμένου στοιχείου.

               Απόσπασμα κώδικα:

               σώμα (αντιεπιλογή: αριθμός 3 ;)
               σώμα p:after ( αντίθετη αύξηση : αριθμός 3 ; περιεχόμενο : " ισούται με " counter(number) "." ;)

               Έτσι, στο προηγούμενο απόσπασμα κώδικα προσθέσαμε μια ιδιότητα περιεχομένου που εκτυπώνει τη λέξη "ίσον" ακολουθούμενη από την τιμή του αριθμού μετρητή και μια τελεία "." . Όλα αυτά εισάγονται στη σελίδα μετά το περιεχόμενο της παραγράφου ( ετικέτα

               ), που λέει το μετά ψευδοστοιχείο.

               Τελικά...

               Παρακάτω είναι το περιγραφόμενο παράδειγμα.

               Απόσπασμα κώδικα:

               
               
               
               
               

               
               

               2 φορές 3

               
               

               3 φορές 3

               
               

               4 φορές 3

               
               

               5 φορές 3

               
               

               Αποτέλεσμα:

               Ένθετες λίστες με αυτόματη αρίθμηση

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

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

               Τι γίνεται με την αυτόματη αρίθμηση υποπροτάσεων όπως 1.1, 1.2, 2.1, 2.2 κ.λπ.;

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

               Απόσπασμα κώδικα:

               
               
               
               
               

               
               

               1. Πρώτο στοιχείο λίστας
               
               
               1. Πρώτο εδάφιο της παραγράφου 1
               
               
               2. Δεύτερο εδάφιο της 1ης παραγράφου
               
               
               2. Δεύτερο στοιχείο λίστας
               
               
               1. Πρώτο εδάφιο της παραγράφου 2
               
               
               2. Δεύτερο εδάφιο 2ης παραγράφου
               
               
               3. Τρίτο στοιχείο στη λίστα
               
               
               1. Πρώτο εδάφιο της παραγράφου 3
               
               
               2. Δεύτερο εδάφιο της 3ης παραγράφου
               
               
               3. Τρίτο εδάφιο της 3ης παραγράφου
               
               

               
               

               Αποτέλεσμα:

               Αυτός είναι ο τρόπος με τον οποίο αυτοματοποιείτε τη διαδικασία αρίθμησης ένθετων λιστών!

               Καλή μέρα!

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

               Αυτό το άρθρο είναι το τρίτο σε αυτό το σύντομο μάθημα για τα βασικά της HTML. Πριν διαβάσετε αυτό το μάθημα, σας προτείνω να διαβάσετε τα δύο προηγούμενα:

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

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

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

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

               Και αυτό είναι πώς φαίνεται στο πρόγραμμα περιήγησης:

               Ρύζι. 1.1. Τυπική προβολή της μη ταξινομημένης λίστας με κουκκίδες HTML στο πρόγραμμα περιήγησης

               1.1 Τυπικές κουκκίδες για λίστες με κουκκίδες

               Στην παραπάνω εικόνα (Εικόνα 1.1.) μπορείτε να δείτε τους κύκλους στην αρχή κάθε στοιχείου μενού. Αυτός είναι ο δείκτης. Από προεπιλογή, εμφανίζεται ως ένας γεμάτος κύκλος στο πρόγραμμα περιήγησης. Υπάρχουν διάφοροι τύποι δεικτών σε HTML: γεμάτος κύκλος, κενός κύκλος και τετράγωνο. Δεν απαιτούν εικόνες CSS ή τρίτων:

               1.2 Κατάλογος δείκτη με τη μορφή κενού κύκλου

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

               <html > <κεφάλι > <τίτλος >Παράδειγμα λίστας με κουκκίδες με κενό δείκτη κύκλου</τίτλος> </κεφάλι> <σώμα > <p>Αστέρια:</p> <ul type = "κύκλος" > <li >Σείριος</li> <li >Αρκτούρος</li> <li > Pollux</li> <li > Betelgeuse</li> <li >Ήλιος</li> </ul> </σώμα> </html>

               Ας δούμε αμέσως πώς θα φαίνεται αυτός ο κώδικας στο πρόγραμμα περιήγησης:

               Ρύζι. 1.2. Προβολή ενός δείκτη λίστας ως κύκλου στο πρόγραμμα περιήγησης

               1.3 Καταχωρίστε τον δείκτη με τη μορφή τετραγώνου

               Ας δούμε επίσης το τελευταίο παράδειγμα με τετράγωνο δείκτη για μια λίστα HTML:

               Προσοχή στον δείκτη, έχει γίνει τετράγωνο:

               Ρύζι. 1.3. Προβολή ενός δείκτη λίστας ως τετράγωνο στο πρόγραμμα περιήγησης

               Σημαντική σημείωση:Αυτή η μέθοδος δεν χρησιμοποιείται πλέον για τη δημιουργία στυλ για λίστες με κουκκίδες. Υπάρχει σαφής διαχωρισμός μεταξύ CSS (διαβάστε τι είναι CSS) και HTML. Το HTML είναι για σήμανση και το CSS για τη δημιουργία μιας ελκυστικής εμφάνισης.

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

               Το σφάλμα θα είναι το εξής:

               Ρύζι. 1.4. Σφάλμα στο εργαλείο επικύρωσης κατά τη χρήση του χαρακτηριστικού "type" μιας λίστας

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

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

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

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

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

               <html > <κεφάλι > <τίτλος >Παράδειγμα τυπικής αριθμημένης λίστας</τίτλος> </κεφάλι> <σώμα > <p>Από ένα έως πέντε:</p> <ol > <li >Πρώτα</li> <li >Δεύτερος</li> <li >Τρίτος</li> <li >Τέταρτος</li> <li >Πέμπτος</li> </ol> </σώμα> </html>

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

               Ρύζι. 2.1. Αριθμημένη λίστα στο πρόγραμμα περιήγησης με τυπικές ρυθμίσεις

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

               2.1 Τυπικές κουκκίδες για αριθμημένες λίστες

               Εδώ έχουμε μια επιλογή όχι από τρεις τύπους δεικτών, αλλά από πέντε:

               Όνομα δείκτη	τιμή χαρακτηριστικού "type".	Παράδειγμα λίστας
               Μαρκαδόροι με τη μορφή αραβικών αριθμών	1	Παιγνίδι όμοιο με τέννις Μπέιζμπολ
               Μαρκαδόροι με τη μορφή πεζών λατινικών γραμμάτων	ένα	Chomolungma Τσογκόρι Καντσεντζούνγκα
               Μαρκαδόροι με τη μορφή κεφαλαίων λατινικών γραμμάτων	ΕΝΑ	Summit Plummet Tantrum Alley Ινσάνο
               Μικροί λατινικοί αριθμοί δείκτες	Εγώ	Θάλασσα των Φιλιππίνων αραβική θάλασσα κοραλλιογενής θάλασσα
               Κεφαλαίοι λατινικοί αριθμητικοί δείκτες	Εγώ	το κόκκινο Πράσινος Μπλε

               2.2 Ίδια αρίθμηση στη λίστα HTML

               Εκτός από τη συνηθισμένη έξοδο μιας αριθμημένης λίστας, μπορούμε επίσης να ξεκινήσουμε την αρίθμησή μας από οποιονδήποτε αριθμό. Για να το κάνετε αυτό, πρέπει να ορίσετε το πρόσθετο χαρακτηριστικό "start" . Αυτή η αρίθμηση λειτουργεί σε όλους τους τύπους δεικτών για αριθμημένες λίστες. Πώς φαίνεται στην πράξη:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

               <html > <κεφάλι > <τίτλος >Προσαρμοσμένη αρίθμηση για αριθμημένη λίστα</τίτλος> </κεφάλι> <σώμα > <p>Ξεκινάμε την αρίθμηση από δώδεκα:</p> <ol type = "a" start = "12" > <li >Δώδεκα</li> <li >Δεκατρείς</li> <li >Δεκατέσσερα</li> <li >Δεκαπέντε</li> <li >Δεκαέξι</li> </ol> </σώμα> </html>

               Δείτε πώς θα εμφανιστεί στον πραγματικό ιστότοπο:

               Ρύζι. 2.2. Αρίθμηση από αυθαίρετο αριθμό σε αριθμημένη λίστα

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

               Λοιπόν, τώρα ας προχωρήσουμε στις ένθετες λίστες HTML.

               3. Πώς να δημιουργήσετε μια λίστα πολλών επιπέδων (ένθετη) σε HTML

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

               Χρησιμοποιώντας μοντέλα αυτοκινήτων ως παράδειγμα, θα δημιουργήσουμε μια λίστα πολλαπλών επιπέδων σε HTML:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

               <html > <κεφάλι > <τίτλος >Ένθετη λίστα κουκκίδων HTML</τίτλος> </κεφάλι> <σώμα > <ul > <li > Citroen<ul > <li > Berlingo</li> <li >Γ1</li> <li >Γ2</li> <li >Γ3 Πικάσο</li> <li > C4 Grand Picasso</li> </ul> </li> <li > KIA</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </σώμα> </html>

               Παρατηρήστε πώς φαίνεται η λίστα πολλών επιπέδων στο πρόγραμμα περιήγησης:

               Ρύζι. 3.1. Παράδειγμα λίστας πολλαπλών επιπέδων σε HTML

               Δημιουργήσαμε μια λίστα πολλαπλών επιπέδων χρησιμοποιώντας κουκκίδες (ετικέτα

               ). Εμφανίστηκε μια λίστα πολλαπλών επιπέδων με μοντέλα Citroen με άλλους δείκτες. Η κύρια λίστα έχει γεμίσει κουκκίδες και η λίστα 2ου επιπέδου έχει κενούς κύκλους. Αλλά, όπως θυμάστε, χρησιμοποιώντας το χαρακτηριστικό "type" μπορούμε να επαναπροσδιορίσουμε τους δείκτες (είναι καλύτερο να ορίσετε ).

               Μπορούμε όμως να ενωθούμε πολυεπίπεδες λίστεςαριθμημένα και σημειωμένα ως εξής:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

               <html > <κεφάλι > <τίτλος >Αριθμημένες, κουκκίδες και λίστες πολλαπλών επιπέδων σε HTML</τίτλος> </κεφάλι> <σώμα > <ul > <li >Πρώτη ομάδα τουλίπες<ol > <li >Πρώτη τάξη<ul > <li >Απλές πρώιμες τουλίπες</li> </ul> </li> <li >ΔΕΥΤΕΡΗ ταξη<ul > <li >Τουλίπες Terry</li> </ul> </li> </ol> </li> </ul> </σώμα> </html>

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

               Ας δούμε πώς φαίνεται στο πρόγραμμα περιήγησης:

               Ρύζι. 3.2. Παράδειγμα αριθμημένης λίστας πολλαπλών επιπέδων σε λίστα με κουκκίδες στο πρόγραμμα περιήγησης

               4. Χρήσιμο υλικό σε λίστες HTML

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

               4.1 Πώς να κάνετε μια λίστα HTML σε συμβολοσειρά

               Η μετατροπή μιας λίστας HTML σε συμβολοσειρά μπορεί να είναι απαραίτητη κατά τη δημιουργία ενός οριζόντιου μενού. Είναι πολύ εύκολο να γίνει:

               4.2 Πώς να δημιουργήσετε μια λίστα HTML χωρίς εικονίδιο

               Η ιδιότητα τύπου list-style στο CSS είναι υπεύθυνη για αυτό (περισσότερες λεπτομέρειες):

               4.3 Πώς να κεντράρετε μια λίστα σε HTML

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

               4.4 Πώς να δημιουργήσετε μια λίστα σε HTML με εικόνες

               Αρκεί μόνο μία ιδιότητα CSS, list-style-image . Μέσα στο url, καθορίστε τη διεύθυνση πριν από το εικονίδιο. Θέλω απλώς να σημειώσω ότι είναι καλύτερο να επιλέξετε αμέσως μια μικρή εικόνα, επειδή το ύψος της γραμμής λίστας εξαρτάται από αυτό:

               4.5 Λίστα με κουκκίδες Κάντε HTML της κουκκίδας σας

               Σε αυτήν την περίπτωση, πρέπει να συνδέσετε εκ των προτέρων εικονίδια γραμματοσειράς (για παράδειγμα, FontAwesome). Στη συνέχεια, μπορείτε να δημιουργήσετε οποιοδήποτε εικονίδιο αντί για έναν τυπικό δείκτη:

               4.6 Πώς να δημιουργήσετε μια λίστα σε HTML σε πολλές στήλες

               Για να δημιουργήσουμε μια λίστα σε πολλές στήλες θα χρησιμοποιήσουμε Ιδιότητα CSSπλήθος στηλών (η ιδιότητα υποστηρίζεται μόνο στα ακόλουθα προγράμματα περιήγησης: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Πρέπει επίσης να ορίσετε το ύψος της λίστας για να δείτε τη διαίρεση σε πολλές στήλες:

               5. Λίστα συνδυασμών HTML

               Για να φτιάξετε ένα σύνθετο πλαίσιο Το HTML είναι καλύτεροΑπλώς χρησιμοποιήστε γραμματοσειρές εικονιδίων. Για παράδειγμα, Flaticon ή Fontawesome.

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

               6. Εξασκηθείτε στην εργασία με λίστες

               Στο παρακάτω βίντεο μπορείτε να δείτε όλη την εργασία με λίστες HTML στην πράξη:

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

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

               Εάν χρειάζεστε περισσότερα από τα βασικά της δημιουργίας ιστοτόπων, αλλά θέλετε να κατακτήσετε το επάγγελμα του προγραμματιστή Front-end, τότε δώστε προσοχή στο μάθημα από το διαδικτυακό σχολείο Netology - "" και το διαδικτυακό σχολείο Skillbox και το μάθημα "".

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