Διαιρέτες και εκτείνεται δεν είναι εναλλάξιμα στη δημιουργία ιστοσελίδων. Κάθε εξυπηρετεί διαφορετικούς σκοπούς και το να γνωρίζετε πότε να το χρησιμοποιήσετε θα σας βοηθήσει να αναπτύξετε καθαρούς, εύχρηστους ιστότοπους.
Χρήση του στοιχείου Div
Διαιρέτες ορίστε λογικές διαιρέσεις στην ιστοσελίδα σας. ΕΝΑ div- σύντομη για διαίρεση - είναι βασικά ένα κουτί στο οποίο μπορείτε να τοποθετήσετε άλλο Στοιχεία HTML που ανήκουν μαζί. Ένα τμήμα μπορεί να έχει πολλά άλλα στοιχεία σε αυτό, όπως παραγράφους, επικεφαλίδες, λίστες, συνδέσμους, εικόνες κ.λπ. Μπορεί ακόμη και να έχει άλλα τμήματα μέσα του για να παρέχει επιπλέον δομή και οργάνωση.
Για να χρησιμοποιήσετε το div στοιχείο, τοποθετήστε ένα ανοιχτό ετικέτα πριν από την περιοχή της σελίδας σας που θέλετε ως ξεχωριστό τμήμα και κλείσιμο
περιεχόμενο του div
Εάν θα διαμορφώσετε αυτήν την περιοχή με CSS, μπορείτε να προσθέσετε ένα ταυτότητα επιλογέας στην αρχική ετικέτα div:
Εναλλακτικά, μπορείτε να προσθέσετε έναν επιλογέα τάξης:
Στη συνέχεια, μπορείτε να εργαστείτε με αυτά τα στοιχεία σε CSS ή JavaScript.
Οι τρέχουσες βέλτιστες πρακτικές κινούνται προς τη χρήση επιλογών τάξης αντί για αναγνωριστικά, εν μέρει λόγω του πόσο συγκεκριμένοι είναι οι επιλογείς ταυτότητας. Ωστόσο, ένα από τα δύο είναι αποδεκτό και μπορείτε ακόμη και να δώσετε ένα div τόσο ένα αναγνωριστικό όσο και έναν επιλογέα τάξης.
Τμήματα ή τμήματα;
ο div στοιχείο είναι διαφορετικό από το HTML5Ενότητα στοιχείο επειδή δεν δίνει στο κλειστό περιεχόμενο καμία σημασιολογική σημασία. Εάν δεν είστε σίγουροι εάν το μπλοκ περιεχομένου πρέπει να είναι div ή α Ενότητα, σκεφτείτε το σκοπό του στοιχείου και το περιεχόμενο.
- Εάν χρειάζεστε το στοιχείο απλά για να προσθέσετε στυλ σε αυτήν την περιοχή της σελίδας, θα πρέπει να χρησιμοποιήσετε το div στοιχείο.
- Εάν το περιεχόμενο έχει ξεχωριστή εστίαση και θα μπορούσε να είναι αυτόνομο, σκεφτείτε να χρησιμοποιήσετε το Ενότητα αντ 'αυτού.
Τελικά, και τα δύο διαιρέσεις και τμήματα συμπεριφέρεστε παρόμοια, και μπορείτε να δώσετε ένα από αυτά τα χαρακτηριστικά και να το στυλ με CSS. Και τα δύο είναι στοιχεία επιπέδου μπλοκ.
Χρησιμοποιώντας Spans
Σπιθαμή είναι ένα inline στοιχείο από προεπιλογή, σε αντίθεση με div και Ενότητα στοιχεία. ο σπιθαμή Το στοιχείο χρησιμοποιείται συνήθως για να τυλίξει ένα συγκεκριμένο κομμάτι περιεχομένου όπως το κείμενο για να του δώσει ένα επιπλέον άγκιστρο που μπορείτε να χρησιμοποιήσετε για να προσθέσετε στυλ. Χωρίς κανένα χαρακτηριστικό στυλ, ωστόσο, σπιθαμή δεν επηρεάζει καθόλου το κείμενο.
Μια άλλη διαφορά μεταξύ του σπιθαμή και div στοιχεία είναι ότι το div Το στοιχείο περιλαμβάνει ένα διάλειμμα παραγράφου, ενώ το σπιθαμή Το στοιχείο λέει μόνο στο πρόγραμμα περιήγησης να εφαρμόζει συσχετισμένους κανόνες στυλ CSS σε αυτό που περικλείεται από το ετικέτες:
Επισημασμένο κείμενο και μη επισημασμένο κείμενο.
Μπορείτε να προσθέσετε.
class = "highlight"
ή παρόμοιο με το σπιθαμή στοιχείο για το στυλ του κειμένου με CSS.
Το στοιχείο span δεν έχει απαιτούμενα χαρακτηριστικά, αλλά τα τρία που είναι τα πιο χρήσιμα είναι τα ίδια με αυτά του div στοιχείο:
- στυλ
- τάξη
- ταυτότητα
Χρήση σπιθαμή όταν θέλετε να αλλάξετε το στυλ του περιεχομένου χωρίς να ορίσετε το περιεχόμενο ως νέο στοιχείο επιπέδου μπλοκ στο έγγραφο.
Για παράδειγμα, εάν θέλετε τη δεύτερη λέξη του η3 με κόκκινο χρώμα, θα μπορούσατε να περιβάλλετε τη λέξη με ένα σπιθαμή στοιχείο που θα χαρακτήριζε τη λέξη ως κόκκινο κείμενο. Η λέξη παραμένει μέρος του η3 στοιχείο, αλλά θα εμφανίζεται με κόκκινο χρώμα.