Αποκλεισμός διάταξης των tag tags div

Ακόμα πριν από περίπου δέκα χρόνια στο runet το πιοσυχνά χρησιμοποιούσαν τη λεγόμενη διάταξη πίνακα. Λόγω του γεγονότος ότι τα πρότυπα ορισμένων προγραμμάτων περιήγησης διαφέρουν σημαντικά μεταξύ τους, έπρεπε να αναζητήσουμε μια λύση που θα επέτρεπε την σωστή εμφάνιση του εγγράφου Internet σε όλες τις εφαρμογές. Αλλά ο χρόνος πέρασε, τα πρότυπα εξελίχθηκαν και ένας άκαμπτος και άκαμπτος πίνακας αντικαταστάθηκε από μια καλά προσαρμοσμένη και ανταποκρινόμενη διάταξη του μπλοκ. Στην πρώτη γραμμή αυτής της τεχνολογίας βρίσκεται η αρχή της χρήσης των στοιχείων <div>. Τα έγγραφα HTML άρχισαν να κατασκευάζονται με βάση ξεχωριστά τετράγωνα, τα οποία, σε αντίθεση με τη διάταξη των τραπεζιών, μπορούν να είναι ανεξάρτητα το ένα από το άλλο.

Η εμφάνιση

Συμπλήρωση ιστοσελίδων και ανάπτυξη υπολογιστήη τεχνολογία έχει οδηγήσει στο γεγονός ότι το έγγραφο web χωρίστηκε σε δύο μέρη - ένα σκελετό (κώδικας HTML) και το σχεδιασμό (φύλλα στυλ). Χάρη σε αυτό κατορθώσαμε να επιτύχουμε μια πρωτοφανή εξέλιξη του ιστού, τα αποτελέσματα των οποίων μπορούμε να δούμε τώρα στα πιο σύγχρονα sites. Εκτός από τη βελτίωση της διαδικασίας ανάπτυξης <div> HTML επιτρέπεται να ορίζει για κάθε μεμονωμένο στοιχείο τους κανόνες σχεδίασης. Αυτό βοήθησε στη βελτίωση της αναγνωσιμότητας του κώδικα της ιστοσελίδας και στη μείωση του χρόνου φόρτωσης του εγγράφου. Τώρα οι μηχανές αναζήτησης είναι πολύ γρηγορότερες και καλύτερη επεξεργασία των πληροφοριών που διατίθενται στην περιοχή.

Πρότυπα και επαλήθευση

Η ετικέτα <div> στη HTML χρησιμοποιείται σε αυστηρέςσυμμόρφωση με τα πρότυπα του W3C (Consortium World Wide Web). Ο κώδικας σελίδας ελέγχεται από ένα ειδικό εργαλείο - το validator, το οποίο parsit (σαρώνει και αναζητά) κάθε πιθανό σφάλμα στη σελίδα. Μια έγκυρη σελίδα σημαίνει ότι όλες οι ετικέτες έχουν χρησιμοποιηθεί σωστά και ότι πληρούν πλήρως τις απαιτήσεις των προτύπων.

Οι ετικέτες <div> σάς επιτρέπουν να δημιουργείτε μπλοκ ή, όπως τουςακόμα καλούνται, δοχεία. Σε αυτή την περίπτωση, μεμονωμένα στοιχεία μπορούν να ενωθούν μεταξύ τους, δημιουργώντας δομές της απαραίτητης διαμόρφωσης και πολυπλοκότητας. Χρησιμοποιώντας μια ετικέτα <div> χωρίς συνοδεία από μια τάξη ή ένα αναγνωριστικό δεν συναντάται σχεδόν ποτέ. Αυτό οφείλεται στην «αδυναμία» του στοιχείου. Αν δεν ορίσει μια κλάση, τότε τελικά όλα τα εμπορευματοκιβώτια θα έχουν την ίδια διαμόρφωση.

Προκειμένου να δημιουργηθεί μια πραγματικά σωστήέγγραφο, πρέπει να χρησιμοποιήσετε την ακόλουθη δομή της ετικέτας <div> class = "some_name". Αναφερόμενοι στο όνομα της κλάσης, στα φύλλα στυλ, μπορείτε να καθορίσετε τη θέση, το μέγεθος, το μόλυβδο και άλλες παραμέτρους ενός μεμονωμένου μπλοκ στο έγγραφο.

Χρήση κλάσεων και αναγνωριστικών

Το μπλοκ <div> HTML μπορεί να οριστεί ωςid και τάξη. Η διαφορά μεταξύ του πρώτου και του δεύτερου είναι ότι το αναγνωριστικό χρησιμοποιείται μόνο μία φορά στη σελίδα του εγγράφου. Δηλαδή, χρησιμοποιείται για τον ορισμό μοναδικών στοιχείων που δεν επαναλαμβάνονται οπουδήποτε αλλού στον κώδικα σελίδας. Το χαρακτηριστικό κλάσης σας επιτρέπει να εφαρμόζετε τους ίδιους κανόνες στυλ σε πολλά στοιχεία. Αυτή η προσέγγιση απλοποιεί σε μεγάλο βαθμό την ανάπτυξη και την υποστήριξη του κώδικα. Επιπλέον, ένα αντικείμενο μπορεί να έχει πολλές κλάσεις ταυτόχρονα. Για σωστή αναγνώριση, διαχωρίζονται απλά με κενά.

Φυσικά, η δομή του μπλοκ του εγγράφου δεν είναισυνεπάγεται τη χρήση μόνο μιας <div> ετικέτας. Η δομή της κάθε ιστοσελίδας θα είναι πάντα άλλα στοιχεία. Επιπλέον, στο ίδιο μπλοκ <div> στοιχείο μπορεί να έχει ένα διαφορετικό είδος της οθόνης. Αυτό γίνεται χρησιμοποιώντας την ιδιότητα εμφάνισης. Το στοιχείο μπορεί να είναι ένα string ή μια οθόνη πίνακα, που μπορεί να αυξήσει σημαντικά την ευελιξία της χρήσης της συσκευής και να δημιουργήσει μια ιστοσελίδα για κάθε διαμόρφωση.

Η ετικέτα <div>. Ιδιότητες HTML

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

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

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

Τοποθέτηση μπλοκ

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

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

Άλλα χαρακτηριστικά

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

Ελπίζουμε ότι αυτό το άρθρο συνέβαλε στην κατανόηση του ζητήματος του τι είναι <div> σε HTML.