Αποφυγή κοινών λαθών στη σήμανση HTML5. Μπλοκ διάταξη div - βασικά Τι σημαίνει div;
Οποιαδήποτε ιστοσελίδα αποτελείται από στοιχεία που βρίσκονται σε αυτήν και η διάταξη μπλοκ div είναι σχεδόν πάντα υπεύθυνη για την τοποθέτησή τους. Φυσικά, υπάρχει και διάταξη πίνακα με χρήση ετικετών
,
,
, και υπάρχει ακόμη και συζήτηση σχετικά με το ποιο σύστημα είναι καλύτερο να χρησιμοποιηθεί - μπλοκ ή πίνακα. Ωστόσο, στην πραγματικότητα, προς το παρόν δεν θα βρείτε κανέναν από τους σύγχρονους, δημοφιλείς και βολικούς ιστότοπους που χρησιμοποιούν μόνο διάταξη πίνακα. Στην καλύτερη περίπτωση, χρησιμοποιείται μόνο για αυτό για το οποίο προορίζεται - δηλαδή για τη δημιουργία πινάκων, αλλά όχι για τη διαμόρφωση της ίδιας της δομής του ιστότοπου.
Το γεγονός είναι ότι η διάταξη div του ιστότοπου σας επιτρέπει να ορίσετε πολλές ιδιότητες CSS που δεν είναι διαθέσιμες για πίνακες. Επιπλέον, το μεγαλύτερο μειονέκτημα ενός συστήματος πίνακα είναι ότι ο πίνακας δεν θα εμφανίζεται στην οθόνη μέχρι να φορτωθεί πλήρως από το πρόγραμμα περιήγησης. Εάν ολόκληρος ο ιστότοπος είναι κατασκευασμένος σε πίνακα, τότε θα εμφανιστεί στην οθόνη μόνο αφού φορτωθεί πλήρως ολόκληρος ο κώδικας html της σελίδας.
Ετικέτα DIV και ιδιοκτησία float
Η βάση του συστήματος μπλοκ είναι η ετικέτα
, που είναι το δοχείο για το περιεχόμενο. Μπορεί επίσης να περιέχει άλλα δοχεία στο εσωτερικό του .
Η χρήση μιας ετικέτας DIV δεν είναι πιο δύσκολη από . Κατά κανόνα, η τυπική δομή του ιστότοπου διαμορφώνεται ως εξής: υπάρχει ένα κύριο δοχείο
(συχνά της εκχωρείται μια κλάση που ονομάζεται περιτύλιγμα, δοχείο, κύρια κ.λπ.). Μέσα σε αυτό το κοντέινερ υπάρχουν μπλοκ του μενού, τμήμα περιεχομένου και πλαϊνή γραμμή.
Από προεπιλογή, κάθε νέο μπλοκ τοποθετείται σε μια νέα γραμμή. Για να τοποθετήσετε ένα μπλοκ στα αριστερά ή στα δεξιά ενός άλλου (για παράδειγμα, για να τοποθετήσετε μια πλαϊνή γραμμή στα δεξιά), χρησιμοποιείται η ιδιότητα float. Από προεπιλογή έχει την τιμή "κανένα", αλλά μπορείτε επίσης να ορίσετε τις τιμές "αριστερά" και "δεξιά".
Ας δούμε αυτήν την ιδιότητα χρησιμοποιώντας ένα παράδειγμα με δύο μπλοκ.
Μπλοκ περιεχομένου
Μπλοκ πλευρικής γραμμής
Αυτός ο κώδικας θα δώσει το ακόλουθο αποτέλεσμα:
καθαρή ιδιοκτησία
Είναι σημαντικό να ληφθεί υπόψη ότι η ιδιότητα float δεν ισχύει μόνο για το ίδιο το μπλοκ στο οποίο είναι καταχωρημένο, αλλά και για το επόμενο στοιχείο που θα ακολουθήσει αυτό το μπλοκ. Δηλαδή, εάν προσθέσουμε ένα άλλο μπλοκ στα δύο μπλοκ που περιγράφονται παραπάνω χωρίς να του προσδιορίσουμε καμία ιδιότητα, τότε δεν θα βρίσκεται σε μια νέα γραμμή, αλλά θα ξεκινά στα δεξιά του δεύτερου μπλοκ.
Για να αποφευχθεί αυτό, η διάταξη μπλοκ div χρησιμοποιεί την ιδιότητα διαγραφής, η οποία πρέπει να οριστεί για το μπλοκ που θέλουμε να τοποθετήσουμε σε μια νέα γραμμή. Τις περισσότερες φορές, ορίζεται σε "και τα δύο" για αυτό, αλλά μπορούμε επίσης να το ρυθμίσουμε σε "αριστερά" ή "δεξιά" εάν θέλουμε όχι μόνο να τοποθετήσουμε το μπλοκ σε μια νέα γραμμή, αλλά και να ορίσουμε την ευθυγράμμισή του.
Ας προσθέσουμε ένα νέο στοιχείο στο παραπάνω παράδειγμα:
Μπλοκ περιεχομένου
Μπλοκ πλευρικής γραμμής
Νέο μπλοκ που βρίσκεται παρακάτω
Αποτέλεσμα:
Εσοχή σε διάταξη μπλοκ
Εκτός από τη θέση των μπλοκ, είναι σημαντικό να ορίσετε εσοχές τόσο μεταξύ των μπλοκ όσο και εντός αυτών. Για αυτό, χρησιμοποιούνται οι ιδιότητες περιθωρίου και επένδυσης, αντίστοιχα.
Οι εσοχές ορίζονται ξεχωριστά για το επάνω, το δεξί, το κάτω και το αριστερό μέρος του στοιχείου. Μπορούν να καθοριστούν σε μία γραμμή παραθέτοντας τέσσερις τιμές:
Περιθώριο: 20 px 10 px 0 40 px
Ένα μπλοκ με αυτές τις παραμέτρους θα τοποθετηθεί 20 εικονοστοιχεία κάτω από το γονικό στοιχείο, δέκα εικονοστοιχεία από το δεξιό στοιχείο, θα έχει μηδενική επένδυση στο κάτω μέρος και θα έχει 40 εικονοστοιχεία πλήρωσης στα αριστερά.
Εάν καθορίζονται όλοι οι ίδιοι δείκτες στην ιδιότητα padding, τότε αυτές θα είναι η εσωτερική συμπλήρωση για το περιεχόμενο σε σχέση με τα όρια του μπλοκ στο οποίο βρίσκεται.
Μπορείτε επίσης να ορίσετε μεμονωμένες ιδιότητες για μεμονωμένες ακμές χρησιμοποιώντας margin-top, margin-bottom, margin-αριστερό, margin-right (και παρομοίως για padding). Σε αυτήν την περίπτωση, εάν κάποια από τις άκρες δεν έχει καθοριστεί, τότε η εσοχή στην πλευρά της θα είναι μηδέν ή θα καθορίζεται από τις γενικές ιδιότητες css που καθορίζονται για μπλοκ στη σελίδα.
Στοιχείο
είναι ένα στοιχείο μπλοκ και προορίζεται για την επισήμανση ενός τμήματος ενός εγγράφου προκειμένου να αλλάξει η εμφάνιση του περιεχομένου. Συνήθως, η εμφάνιση ενός μπλοκ ελέγχεται χρησιμοποιώντας στυλ. Για να μην περιγράφετε το στυλ μέσα στην ετικέτα κάθε φορά, μπορείτε να διαχωρίσετε το στυλ σε ένα εξωτερικό φύλλο στυλ και να προσθέσετε μια παράμετρο κλάσης ή αναγνωριστικού στην ετικέτα με το όνομα του επιλογέα.
Όπως και με άλλα στοιχεία μπλοκ, το περιεχόμενο της ετικέτας
ξεκινά πάντα από μια νέα γραμμή. Μετά από αυτό προστίθεται επίσης μια αλλαγή γραμμής.
Σύνταξη
...
Επιλογές
align Ορίζει τη στοίχιση των περιεχομένων της ετικέτας
. τίτλος Προσθέτει μια επεξήγηση εργαλείου στο περιεχόμενο.
Ετικέτα κλεισίματος
Απαιτείται.
Παράδειγμα 1: Χρήση ετικέτας
Ετικέτα DIV
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Περιγραφή των παραμέτρων της ετικέτας DIV
Παράμετρος ALIGN
HTML:
3.2
4
XHTML:
1.0
1.1
Περιγραφή
Ευθυγράμμιση των περιεχομένων του δοχείου
στην άκρη.
Σύνταξη
...
Επιχειρήματα
κέντρο Ευθυγραμμίζει το κείμενο στο κέντρο. Το κείμενο τοποθετείται οριζόντια στο παράθυρο του προγράμματος περιήγησης ή στο κοντέινερ όπου βρίσκεται το μπλοκ κειμένου. Οι γραμμές κειμένου φαίνεται να είναι χορδισμένες σε έναν αόρατο άξονα που διατρέχει το κέντρο της ιστοσελίδας. Αυτή η μέθοδος ευθυγράμμισης χρησιμοποιείται ενεργά σε επικεφαλίδες και διάφορες υπογραφές, όπως λεζάντες, δίνει μια επίσημη και σταθερή εμφάνιση στο σχέδιο του κειμένου. Σε όλες τις άλλες περιπτώσεις, η στοίχιση στο κέντρο χρησιμοποιείται σπάνια για το λόγο ότι δεν είναι βολικό να διαβάσετε μεγάλο όγκο τέτοιου κειμένου. αριστερά Ευθυγραμμίζει το κείμενο προς τα αριστερά. Σε αυτήν την περίπτωση, οι γραμμές του κειμένου ευθυγραμμίζονται προς τα αριστερά και η δεξιά άκρη είναι διατεταγμένη ως σκάλα. Αυτή η μέθοδος ευθυγράμμισης είναι η πιο δημοφιλής στους ιστότοπους, καθώς επιτρέπει στον χρήστη να αναζητά εύκολα μια νέα γραμμή και να διαβάζει άνετα μεγάλο κείμενο. δεξιά Ευθυγραμμίζει το κείμενο προς τα δεξιά. Αυτή η μέθοδος ευθυγράμμισης δρα ως ανταγωνιστής του προηγούμενου τύπου. Δηλαδή, οι γραμμές του κειμένου είναι ευθυγραμμισμένες στη δεξιά άκρη, αλλά η αριστερή παραμένει «σκισμένη». Επειδή το αριστερό άκρο δεν είναι ευθυγραμμισμένο, όπου διαβάζονται οι νέες γραμμές, αυτό το κείμενο είναι πιο δύσκολο να διαβαστεί από ό,τι αν ήταν αριστερή στοίχιση. Επομένως, η δεξιά στοίχιση χρησιμοποιείται συνήθως για σύντομες επικεφαλίδες που δεν υπερβαίνουν τις τρεις γραμμές. Δεν θεωρούμε συγκεκριμένους ιστότοπους όπου το κείμενο πρέπει να διαβαστεί από τα δεξιά προς τα αριστερά, όπου ίσως μια παρόμοια μέθοδος ευθυγράμμισης θα είναι χρήσιμη. Που όμως στη χώρα μας έχετε δει τέτοια site; justify Justified, που σημαίνει ευθυγραμμισμένος αριστερά και δεξιά ταυτόχρονα. Για να εκτελέσετε αυτήν την ενέργεια, το πρόγραμμα περιήγησης σε αυτήν την περίπτωση προσθέτει κενά μεταξύ των λέξεων.
Προεπιλεγμένη τιμή
Παρόμοιο με το CSS
Παράδειγμα 2: Στοίχιση κειμένου
Ετικέτα DIV, παράμετρος στοίχισης
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Παράμετρος TITLE
HTML:
3.2
4
XHTML:
1.0
1.1
Περιγραφή
Προσθέτει επεξηγηματικό κείμενο στο κοντέινερ
με τη μορφή επεξήγησης εργαλείου που εμφανίζεται όταν ο δείκτης του ποντικιού τοποθετείται πάνω από το περιεχόμενο.
Σύνταξη
...
Επιχειρήματα
Οποιαδήποτε συμβολοσειρά κειμένου. Η συμβολοσειρά πρέπει να περικλείεται σε διπλά ή μονά εισαγωγικά.
Προεπιλεγμένη τιμή
Παράδειγμα 3. Υπόδειξη κειμένου
Ετικέτα DIV, παράμετρος τίτλου
title="Κανονικά ψάρια"
!}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Σήμερα είναι δύσκολο να βρεθεί ένας ιστότοπος όπου δεν χρησιμοποιείται μια τόσο απαραίτητη και σημαντική ετικέτα
. Κοιτάξτε τον κωδικό οποιουδήποτε ιστότοπου βρείτε στο Διαδίκτυο και θα δείτε ότι η ετικέτα
εμφανίζεται πιο συχνά από άλλες ετικέτες στο HTMLέγγραφο. Ο λόγος για αυτή τη δημοτικότητα είναι η διάταξη μπλοκ. Με άλλα λόγια, χρησιμοποιώντας μια ετικέτα μπλοκ
κατασκευάζονται ιστοσελίδες.
Χάρη σε αυτήν την ετικέτα όλα HTMLΟ κώδικας του εγγράφου έχει μια σαφή και λογικά κατανοητή δομή. Είναι εύκολο να γίνει κατανοητό όχι μόνο για τον σχεδιαστή διάταξης, αλλά και για άλλους ειδικούς που εργάζονται μαζί σε ένα έργο. Ωστόσο, η ετικέτα
χωρίς τους «δορυφόρους» του - επιλογείς ταυτότηταΚαι τάξηάνευ αξίας.
Τάξεις και ταυτότητες
Τάξεις (τάξη)και αναγνωριστικά (ταυτότητα)εκτελούν τις ίδιες εργασίες. Ορίζουν διαφορετικά στυλ για την ετικέτα
, όπως και στο εξωτερικό CSSαρχείο και μέσα στο έγγραφο, μέσω της ετικέτας στυλ. Εδώ είναι απαραίτητο να διευκρινιστεί ότι λειτουργούν σε συνδυασμό όχι μόνο με την ετικέτα
, αλλά και με πολλές άλλες ετικέτες.
Εξετάστε τον ακόλουθο κώδικα σήμανσης HTML ως παράδειγμα:
Ποτέ δεν είναι αργά για να μάθεις!
Η επανάληψη είναι η μητέρα της διδασκαλίας
Ας ορίσουμε την εμφάνιση HTMLέγγραφο χρησιμοποιώντας CSSαρχείο στυλ:
/* σύμβολο # πριν από το όνομα - προσδιορισμός αναγνωριστικού */
Ονόματα ταυτότηταΚαι τάξηορίζεται από τον ίδιο τον προγραμματιστή αυθαίρετα, με βάση το σημασιολογικό φορτίο. Απλώς τους ονομάσαμε περιεχόμενο. Δεν μπορείτε να δώσετε ονόματα με ρωσικά γράμματα, μπορείτε να χρησιμοποιήσετε αριθμούς και το σύμβολο της παύλας (-)
και υπογραμμίζει (_)
.
Βλέπουμε δύο απολύτως πανομοιότυπα μπλοκ. Ένας επιλογέας εφαρμόζεται στο επάνω μπλοκ ταυτότητα, και ο επιλογέας θα εφαρμοστεί στο κάτω μπλοκ τάξη. Μπορείτε να ρωτήσετε πού είναι η διαφορά μεταξύ αναγνωριστικό και κλάση divs? Καθαρά εξωτερικά, καμία διαφορά ακόμα, αρκεί να εφαρμόζουμε ένα κάθε φορά ταυτότηταΚαι τάξησε μια σελίδα.
Ποια είναι λοιπόν η διαφορά μεταξύ τάξηΚαι ταυτότητα?
Η διαφορά έγκειται στο ίδιο το όνομα ταυτότητα, σημαίνει αναγνωριστικό, δηλαδή μοναδικό. Η κύρια διαφορά από τις τάξεις είναι ότι ο επιλογέας ταυτότηταμπορεί να χρησιμοποιηθεί μόνο μία φορά σε μια σελίδα. Εκλέκτορας τάξη, αντίθετα, μπορεί να χρησιμοποιηθεί σε μια σελίδα άπειρες φορές.
Για παράδειγμα:
Το περιεχόμενο /* μπορεί να εφαρμοστεί σε οποιεσδήποτε ετικέτες */ div.content /* ισχύει μόνο για ετικέτες div με class .content */ div#content /* για id μια τέτοια καταχώρηση δεν έχει νόημα, είναι μοναδική */
Αξίζει επίσης να σημειωθεί ότι ταυτότηταΟι ιδιότητες έχουν υψηλότερη προτεραιότητα από τις ιδιότητες κλάσης.
κόκκινο κείμενο
Αυτό το παράδειγμα καταδεικνύει ξεκάθαρα ότι παρά το γεγονός ότι τάξημε μπλε κείμενο είναι από κάτω, το κείμενο είναι ακόμα κόκκινο. Αν ταυτότηταδεν είχε προτεραιότητα, το κείμενο θα ήταν μπλε.
Επιπλέον, μπορείτε να αντιστοιχίσετε πολλές κλάσεις σε μια συγκεκριμένη ετικέτα, παραθέτοντας τις χωρισμένες με ένα κενό διάστημα. Αυτό το σύστημα σας επιτρέπει να μην δημιουργείτε περιττές κλάσεις, αλλά να τις χρησιμοποιείτε πιο αποτελεσματικά. U ταυτότηταΦυσικά, δεν υπάρχει επιλογέας για αυτό.
Υπάρχει μια ακόμη σημαντική διαφορά, αφορά τους προγραμματιστές. Εάν σκοπεύετε να αποκτήσετε πρόσβαση σε ένα στοιχείο HTMLέγγραφο μέσω της γλώσσας JavaScript, τότε πρέπει οπωσδήποτε να χρησιμοποιήσετε ταυτότητα, η εφαρμογή αυτού μέσω των τάξεων είναι πολύ πιο δύσκολη.
Πότε είναι καλύτερο να το χρησιμοποιήσετε ταυτότητα, και πότε τάξη?
Εάν οποιοδήποτε από τα στοιχεία της σελίδας, για παράδειγμα, η κεφαλίδα, το μενού, το κουμπί, χρησιμοποιείται μόνο μία φορά, τότε πρέπει να χρησιμοποιήσετε ταυτότητα. Εκλέκτορας τάξηισχύει για μία ετικέτα ή για διαφορετικές ετικέτες όσες φορές εμφανίζονται στη σελίδα. Για παράδειγμα, εικόνες, λίστες με κουκκίδες, παράγραφοι.
Εν κατακλείδι, θέλω να δώσω φιλικές συμβουλές σε όλους όσους θέλουν να μάθουν πώς να δημιουργούν ιστοσελίδες μόνοι τους. Είναι πολύ χρονοβόρο και αναποτελεσματικό να αποκτήσετε γνώσεις για τη δημιουργία ιστοσελίδων από άρθρα και μαθήματα. Παρακαλώ δώστε προσοχή σε αυτό το θέμα. Αυτό είναι ένα από τα καλύτερα μαθήματα για αρχάριους.
). Δημιουργήθηκε ένας μεγάλος πίνακας, ο οποίος στη συνέχεια χωρίστηκε σε διάφορες περιοχές: κεφαλίδα, αριστερό μπλοκ, δεξί μπλοκ, κέντρο και κάτω μέρος. Με την έλευση του tag
όλοι οι webmasters άρχισαν να το χρησιμοποιούν για να δημιουργήσουν τον «σκελετό» του μελλοντικού ιστότοπου. Για παράδειγμα, η δομή της σελίδας του ιστότοπου μπορεί να μοιάζει με αυτό:
Σύνταξη ετικέτας
...
Ετικέτα HTML
είναι ένα στοιχείο μπλοκ. Το πιο σημαντικό χαρακτηριστικό του είναι η κλάση. Χρησιμοποιώντας το, μπορείτε να δημιουργήσετε μπλοκ με τα επιθυμητά στυλ CSS.
Παράδειγμα. Χρήση μπλοκ div
Παράδειγμα χρήσης μπλοκ div
Παράδειγμα χρήσης μπλοκ div
Αυτό είναι ένα βασικό παράδειγμα χρήσης της ετικέτας
. Οι δυνατότητές του εκτείνονται πολύ πέρα από το πεδίο εφαρμογής αυτού του παραδείγματος. Για παράδειγμα, χρησιμοποιώντας αυτήν την ετικέτα μπορείτε να δημιουργήσετε όμορφα μενού (δείτε πώς να δημιουργήσετε ένα αναπτυσσόμενο μενού στο css ")
Τώρα ας ρίξουμε μια πιο προσεκτική ματιά σε όλα τα χαρακτηριστικά της ετικέτας div.
Προσθήκη ετικετών στις ιδιότητες και τις ιδιότητες
align="parameter" - ορίζει τη στοίχιση. Μπορεί να λάβει τις ακόλουθες τιμές:
κέντρο - στοίχιση κειμένου στο κέντρο
αριστερά - στοίχιση κειμένου προς τα αριστερά
δεξιά - στοίχιση κειμένου προς τα δεξιά
δικαιολογώ - ευθυγράμμιση αριστερά και δεξιά
title="text"
- всплывающая подсказка к тегу. Почти никогда не используется.!}
class="name" - ορίζει τη συμμετοχή στην τάξη.
style="στυλ χωρισμένα με κόμματα"- ικανότητα ορισμού στυλ.
Πρακτικές περιπτώσεις χρήσης
Ας δούμε μερικά πρακτικά παραδείγματα με την ετικέτα
.
Παράδειγμα. Κεντράρισμα περιεχομένου με χρήση div
Αυτό το κείμενο θα είναι κεντραρισμένο
Μετατρέπεται στα ακόλουθα στη σελίδα:
Αυτό το κείμενο θα είναι κεντραρισμένο
Τώρα αντί για την ετικέτα
μπορείς να γράψεις και το κείμενο θα είναι κεντραρισμένο. Αυτό συμμορφώνεται με τις απαιτήσεις του προτύπου HTML (επικύρωση ιστότοπου).
Παράδειγμα. Όμορφη κορνίζα με div
Εμφάνιση κειμένου σε ένα όμορφο μπλοκ
Μετατρέπεται στα ακόλουθα στη σελίδα:
Εμφάνιση κειμένου σε ένα όμορφο μπλοκ
Παράδειγμα. Υλοποίηση teaser στην ιστοσελίδα
Η ευκολία της ετικέτας div είναι ότι τοποθετείται κατά μπλοκ σε σχέση μεταξύ τους. Ένα πρακτικό παράδειγμα είναι η έξοδος διαδοχικών μπλοκ που θα αναδιπλωθούν αυτόματα σε μια νέα γραμμή όταν φτάσει στο τέλος.
Υπάρχουν πολλά τέτοια στοιχεία που μπορούν να γίνουν. Ως αποτέλεσμα, παίρνετε κάτι τέτοιο.
Μόλις πριν από δέκα χρόνια, η λεγόμενη διάταξη πίνακα χρησιμοποιήθηκε συχνότερα στο RuNet. Λόγω του γεγονότος ότι τα πρότυπα ορισμένων προγραμμάτων περιήγησης διέφεραν σημαντικά μεταξύ τους, ήταν απαραίτητο να αναζητηθεί μια λύση που θα επέτρεπε τη σωστή εμφάνιση του εγγράφου Διαδικτύου σε όλες τις εφαρμογές. Αλλά ο χρόνος πέρασε, τα πρότυπα αναπτύχθηκαν και το μάλλον άκαμπτο και άκαμπτο πίνακα αντικαταστάθηκε από ένα καλά μεταβαλλόμενο και ανταποκρινόμενο στην πρώτη γραμμή αυτής της τεχνολογίας είναι η αρχή της χρήσης στοιχείων
. Τα έγγραφα HTML ως επί το πλείστον άρχισαν να δημιουργούνται με βάση μεμονωμένα μπλοκ, τα οποία, σε αντίθεση με τη διάταξη πίνακα, μπορούν να είναι ανεξάρτητα το ένα από το άλλο.
Εμφάνιση
Η αυξανόμενη πολυπλοκότητα των ιστοσελίδων και η ανάπτυξη της τεχνολογίας υπολογιστών οδήγησαν στο γεγονός ότι το έγγραφο ιστού χωρίστηκε σε δύο μέρη - το πλαίσιο (κώδικας HTML) και το σχέδιο (φύλλα στυλ). Χάρη σε αυτό, κατέστη δυνατή η άνευ προηγουμένου ανάπτυξη του Διαδικτύου, τα αποτελέσματα της οποίας μπορούμε πλέον να δούμε στους περισσότερους σύγχρονους ιστότοπους. Εκτός από τη βελτίωση της διαδικασίας ανάπτυξης
Η HTML κατέστησε δυνατό να ορίσει τους δικούς της κανόνες σχεδίασης για κάθε μεμονωμένο στοιχείο. Αυτό βοήθησε στη βελτίωση της αναγνωσιμότητας του κώδικα της ιστοσελίδας και στη μείωση του χρόνου φόρτωσης εγγράφων. Τώρα οι μηχανές αναζήτησης επεξεργάζονται πολύ πιο γρήγορα και καλύτερα τις πληροφορίες που είναι διαθέσιμες στον ιστότοπο.
Πρότυπα και δοκιμές
Ετικέτα
Η HTML χρησιμοποιείται αυστηρά σύμφωνα με τα πρότυπα του W3C (World Wide Web Consortium). Ο κώδικας της σελίδας ελέγχεται από ένα ειδικό εργαλείο - έναν επικυρωτή, ο οποίος αναλύει (σαρώνει και αναζητά) όλα τα είδη σφαλμάτων στη σελίδα. Μια έγκυρη σελίδα σημαίνει ότι όλες οι ετικέτες χρησιμοποιήθηκαν σωστά και πληρούν πλήρως τις απαιτήσεις των προτύπων.
Ετικέτες
σας επιτρέπουν να δημιουργήσετε μπλοκ ή, όπως ονομάζονται επίσης, κοντέινερ. Σε αυτή την περίπτωση, μεμονωμένα στοιχεία μπορούν να ενσωματωθούν το ένα μέσα στο άλλο, δημιουργώντας δομές της απαιτούμενης διαμόρφωσης και πολυπλοκότητας. Χρησιμοποιώντας μια ετικέτα
σχεδόν ποτέ δεν εμφανίζεται χωρίς κλάση ή αναγνωριστικό. Αυτό οφείλεται στο «απρόσωπο» του στοιχείου. Εάν δεν του εκχωρήσετε μια κλάση, τότε στο τέλος όλα τα κοντέινερ θα έχουν την ίδια διαμόρφωση.
Για να δημιουργήσετε ένα πραγματικά σωστό έγγραφο, πρέπει να χρησιμοποιήσετε την ακόλουθη δομή ετικέτας
class = "some_name". Αναφερόμενοι στο όνομα της κλάσης, τα φύλλα στυλ μπορούν να καθορίσουν τη θέση, το μέγεθος, το περιθώριο και άλλες παραμέτρους ενός μεμονωμένου μπλοκ στο έγγραφο.
Χρήση κλάσεων και αναγνωριστικών
ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ
Το HTML μπορεί να οριστεί είτε από το αναγνωριστικό είτε από το αναγνωριστικό Η διαφορά μεταξύ του πρώτου και του δεύτερου είναι ότι το αναγνωριστικό χρησιμοποιείται μόνο μία φορά στη σελίδα του εγγράφου. Δηλαδή, χρησιμοποιείται για τον εντοπισμό μοναδικών στοιχείων που δεν επαναλαμβάνονται πουθενά αλλού στον κώδικα της σελίδας. Το χαρακτηριστικό class επιτρέπει την ίδια εφαρμογή σε πολλά στοιχεία. Αυτή η προσέγγιση απλοποιεί σημαντικά την ανάπτυξη και τη συντήρηση κώδικα. Επιπλέον, ένα αντικείμενο μπορεί να έχει πολλές κλάσεις ταυτόχρονα. Για σωστή αναγνώριση, απλώς χωρίζονται με κενά.
Φυσικά, η δομή μπλοκ ενός εγγράφου δεν συνεπάγεται τη χρήση μόνο ετικετών.
. Θα υπάρχουν πάντα άλλα στοιχεία στη δομή οποιασδήποτε σελίδας στο Διαδίκτυο. Επιπλέον, το ίδιο το στοιχείο μπλοκ
μπορεί να έχει τελείως διαφορετική οθόνη. Αυτό γίνεται χρησιμοποιώντας την ιδιότητα εμφάνισης. Ένα στοιχείο μπορεί να έχει μια εμφάνιση γραμμής ή ακόμη και πίνακα, η οποία σας επιτρέπει να αυξήσετε σημαντικά την ευελιξία χρήσης του μπλοκ και να δημιουργήσετε έναν ιστότοπο οποιασδήποτε διαμόρφωσης.
Ετικέτα
. Ιδιότητες HTML
Όπως αναφέρθηκε παραπάνω, αυτή η ετικέτα δεν αλλάζει τη σχεδίαση ενός τμήματος σελίδας, αλλά χρησιμοποιείται για τη δημιουργία μιας σημασιολογικής δομής με επακόλουθο σχεδιασμό χρησιμοποιώντας φύλλα στυλ. Απαιτείται η χρήση ετικέτας κλεισίματος για αυτό το στοιχείο.
Αν και πολλά σύγχρονα προγράμματα περιήγησης θα είναι σε θέση να αναγνωρίσουν ένα τέτοιο σφάλμα, σε ορισμένες περιπτώσεις μια κλειστή ετικέτα μπορεί να προκαλέσει τη διάσπαση της δομής του εγγράφου και την εσφαλμένη εμφάνιση.
Δεδομένου ότι αυτό το στοιχείο είναι ένα στοιχείο μπλοκ, το περιεχόμενο που περιέχεται σε αυτό θα ξεκινήσει σε μια νέα γραμμή. Για να αλλάξετε αυτήν τη συμπεριφορά, πρέπει να αλλάξετε τις παραμέτρους εμφάνισης μπλοκ χρησιμοποιώντας την ιδιότητα εμφάνισης. Εκτός από την ομαδοποίηση ένθετων στοιχείων, η ετικέτα
σας επιτρέπει να μορφοποιήσετε τη διάταξη του περιεχομένου μέσα σε αυτό. Αυτό γίνεται χρησιμοποιώντας το χαρακτηριστικό align, το οποίο σας επιτρέπει να τοποθετήσετε κείμενο ή μια εικόνα στα αριστερά, δεξιά ή στο κέντρο του γονικού στοιχείου.
Τοποθέτηση μπλοκ
Η χρήση του χαρακτηριστικού θέσης σάς επιτρέπει να αλλάξετε τη μέθοδο τοποθέτησης του επιλεγμένου στοιχείου. Έτσι, υπάρχουν τρεις τύποι τοποθέτησης:
Στατική - χρησιμοποιείται από προεπιλογή. Σε αυτήν την περίπτωση, το στοιχείο τοποθετείται σύμφωνα με τη θέση του στον κώδικα HTML.
Συγγενής. Σε αυτήν την περίπτωση, η θέση του αντικειμένου υπολογίζεται με τον ίδιο τρόπο όπως στην περίπτωση της στατικής τοποθέτησης, αλλά αυτή η ιδιότητα σάς επιτρέπει να αλλάξετε τη θέση των θυγατρικών στοιχείων.
Η θέση του υπολογίζεται σε σχέση με το στοιχείο με σχετική τοποθέτηση.
Άλλα χαρακτηριστικά
Για να αλλάξετε τη θέση σε σχέση με την προέλευση, χρησιμοποιούνται τα χαρακτηριστικά επάνω και αριστερά. Οι τιμές μπορεί να είναι είτε θετικές είτε αρνητικές. Το πλάτος και το ύψος ενός στοιχείου μπλοκ καθορίζονται από τις ιδιότητες πλάτους και ύψους, αντίστοιχα. Εάν δεν καθορίστηκαν σε φύλλα στυλ, τότε το μπλοκ θα καταλάβει ολόκληρο το πλάτος του γονικού στοιχείου. Εάν το περιεχόμενο του μπλοκ δεν ταιριάζει σε όλο το πλάτος του "γονέα", τότε η συμπεριφορά του στοιχείου καθορίζεται από το χαρακτηριστικό υπερχείλισης.
Ελπίζουμε ότι αυτό το άρθρο βοήθησε να διευκρινιστεί το ερώτημα του τι είναι
