Βασικά στοιχεία HTML. Γενικοί κανόνες. Μπλοκ και ενσωματωμένα στοιχεία

Σε αυτό το κεφάλαιο:

Σύνταξη στοιχείων

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

Όλα τα στοιχεία σε HTML έχουν την ίδια μορφή:

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

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

Κενά στοιχεία

Υπάρχουν αρκετά στοιχεία στην HTML που δεν έχουν ετικέτα κλεισίματος, όπως π.χ ή
. Τέτοια στοιχεία ονομάζονται αδειάζω, επειδή δεν περιέχουν περιεχόμενο και δεν έχουν ετικέτα κλεισίματος.

Ένθετα στοιχεία

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

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

Η πρώτη μου παράγραφος

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

Αυτό Πολύ

Υπάρχουν δύο κύριες κατηγορίες στοιχείων HTML, που αντιστοιχούν στους τύπους περιεχομένου και τη συμπεριφορά τους στη δομή μιας ιστοσελίδας - ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟΚαι ενσωματωμένα στοιχεία. Χρησιμοποιώντας στοιχεία μπλοκ μπορείτε να δημιουργήσετε τη δομή μιας ιστοσελίδας που χρησιμοποιούνται για τη μορφοποίηση θραυσμάτων κειμένου (με εξαίρεση τα στοιχεία Και ).

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

Μοντέλο οπτικής μορφοποίησης CSS

1. Μοντέλο οπτικής μορφοποίησης

Το μοντέλο οπτικής μορφοποίησης CSS είναι ένας αλγόριθμος που επεξεργάζεται ένα έγγραφο HTML και το εμφανίζει στην οθόνη της συσκευής. Αυτό το μοντέλο μετασχηματίζει κάθε στοιχείο εγγράφου έτσι ώστε να δημιουργεί μηδέν ή περισσότερα ορθογώνια πλαίσια σύμφωνα με το μοντέλο πλαισίου CSS. Η θέση αυτών των πλαισίων στη σελίδα καθορίζεται από τους ακόλουθους παράγοντες:
— το μέγεθος του στοιχείου (λαμβάνοντας υπόψη εάν προσδιορίζονται ρητά ή όχι)·
— τύπος στοιχείου (γραμμή ή μπλοκ).
— σχήμα τοποθέτησης (κανονική ροή, τοποθετημένα ή αιωρούμενα στοιχεία).
— σχέσεις μεταξύ στοιχείων στο DOM·
— εσωτερικές διαστάσεις των εικόνων που περιέχονται·
— εξωτερικές πληροφορίες (για παράδειγμα, μεγέθη παραθύρων προγράμματος περιήγησης).

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

2. Μοντέλο μπλοκ

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

Περιοχή περιεχομένουείναι το περιεχόμενο του στοιχείου, όπως κείμενο ή εικόνα.

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

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

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

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

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

* ( περιθώριο: 0, γέμιση: 0; )

3. Μπλοκ στοιχεία και μπλοκ δοχεία

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