Προσθήκη οριζόντιων γραμμών για διαίρεση περιεχομένου στη σελίδα

Πώς να χρησιμοποιήσετε την ετικέτα HR για ένα έγγραφο ιστού

Η ετικέτα HR έχει παραδοσιακά χρησιμοποιηθεί για να προσθέσει μια οριζόντια γραμμή (μερικές φορές αποκαλείται οριζόντιος κανόνας) σε ένα έγγραφο ιστού. Για να προσθέσετε μια γραμμή, πληκτρολογείτε:


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

Είναι η ετικέτα HR Semantic;

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

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

Χαρακτηριστικά HR σε HTML4 και HTML5

Στην HTML4, η ετικέτα HR θα μπορούσε να αποδίδει απλά χαρακτηριστικά, όπως "ευθυγράμμιση", "πλάτος" και "noshade". Η ευθυγράμμιση θα μπορούσε να οριστεί αριστερά, στο κέντρο, δεξιά ή να δικαιολογήσει. Το πλάτος ρύθμισε το πλάτος της οριζόντιας γραμμής από το προεπιλεγμένο 100% που επέκτεινε τη γραμμή στη σελίδα. Το χαρακτηριστικό noshade αποδίδει μια συμπαγή γραμμή χρώματος αντί σκιασμένου χρώματος. Αυτά τα χαρακτηριστικά είναι ξεπερασμένα στο HTML5 και θα πρέπει να χρησιμοποιήσετε το CSS για να διαμορφώσετε τις ετικέτες HR σας σε HTML5. Για παράδειγμα, σε HTML 4:


δημιουργεί μια οριζόντια γραμμή με ύψος 10 pixel.

Χρησιμοποιώντας το CSS με HTML5, μια οριζόντια γραμμή ύψους 10 pixel έχει το στυλ:


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