Διαφορά μεταξύ DIV και SPAN

Διαφορά μεταξύ DIV και SPAN



καιείναι ετικέτες HTML που ορίζουν στοιχεία σε κώδικα HTML.

HTML(Γλώσσα σήμανσης υπερκειμένου) είναι δομημένη κώδικας χρησιμοποιείται για την κατασκευή και την εμφάνιση του Ιστός σελίδες που επισκέπτουμε online, καθημερινά, σε οποιαδήποτε συσκευή.



Άλλες τεχνολογίες και γλώσσες προγραμματισμού μπορούν να ενσωματωθούν με HTML για να παρέχουν δυναμικές και προηγμένες δυνατότητες σε έναν ιστότοπο.

Κατανόηση HTML



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

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

Η Κοινοπραξία World Wide Web (W3C) [Εγώ] αναγνωρίζει το HTML ως επίσημη γλώσσα σήμανσης στην ανάπτυξη ιστοσελίδων και, ως εκ τούτου, το HTML υποστηρίζεται από τα περισσότερα προγράμματα περιήγησης. Έτσι, οι ιστοσελίδες μπορούν να αναπτυχθούν σε αναγνωρισμένη γλώσσα, εύκολα ερμηνευμένες από διαφορετικά προγράμματα περιήγησης για να καταστήσουν τη σελίδα όπως προορίζεται από τον σχεδιαστή.



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

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

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

Βασική δομή HTML



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

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

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

Τα χαρακτηριστικά του στοιχείου και το περιεχόμενο ορίζονται μεταξύ αυτών των δύο σημείων.

οελάχιστα στοιχείαΑπαιτούνται για ένα αρχείο HTML είναι ο ορισμός, (μόνο HTML4) και οι ετικέτες.

  • Ορισμός DOCTYPE

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

Στο HTML4, υπάρχουν παραλλαγές του DTD (ανάλογα με τα χαρακτηριστικά και τα στοιχεία της σελίδας), αλλά οι πιο τυπικές δηλώσεις θα περιλαμβάνονται ως:

ή

Το DTD σε HTML5 είναι πολύ πιο απλό:

· HTML, HEAD και BODY

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

Στοιχεία HTML

Η HTML5 δημιούργησε νέα στοιχεία για ευκολία ανάπτυξης και σχεδίασης και έχει επίσης αφαιρέσει στοιχεία που χρησιμοποιούνται στο HTML4. Η λίστα των διαφορών μεταξύ HTML4 και HTML5 δημοσιεύεται από το World Wide Web Consortium (W3C) [Ι] .

Ετικέτα HTML DIV

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

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

Με την προσβασιμότητα στον ιστότοπο και τη βελτιστοποίηση μηχανών αναζήτησης, οι τεχνικές γίνονται αρκετά επιστήμη και συνιστάται από το WC3 να μην επιστρέφετε πάντα στη χρήση σε HTML5.

Ως παράδειγμα για μια τακτοποιημένη, αλλά απλή μορφή ιστολογίου, εξετάστε τα νέα στοιχεία HTML5 με CSS αντί να χρησιμοποιήσετε το στοιχείο. χρησιμοποιήστε το στοιχείο για το κύριο περιεχόμενο, το στοιχείο για να επισημάνετε ή να διαχωρίσετε οποιοδήποτε περιεχόμενο στη σελίδα, την κεφαλίδα ή το υποσέλιδο (οπουδήποτε!) και το στοιχείο μπορεί να χρησιμοποιηθεί για να κρατήσετε συνδέσμους μενού ή ομάδας για περιήγηση από τη σελίδα.

Αυτά τα νέα στοιχεία αναγνωρίζουν εύκολα τον τύπο περιεχομένου χρησιμοποιώντας HTML5. Ωστόσο, η ετικέτα χρησιμοποιείται επίσης με CSS για τη δημιουργία αποκριτικών ιστότοπων.

Δημιουργώντας κάθε στοιχείο (με το δικό του αναγνωριστικό ή κλάση), το αρχείο CSS μπορεί να οριστεί ώστε να χειρίζεται κάθε στοιχείο.

Το παρακάτω παράδειγμα HTML δείχνει ένα παράδειγμα χρήσης πολλών στοιχείων:

Τα παραδείγματα μου

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

Ακολουθεί ένα παράδειγμα του τρόπου με τον οποίο κάθε στοιχείο μπορεί να διαμορφωθεί στο αντίστοιχο αρχείο CSS του HTML - με αναφορά σε κάθε ετικέτα.

# Κεφαλή {

πλάτος: 800px;

ύψος: αυτόματο

margin-left: auto;

margin-left: auto;

}

# Επιλεγμένο {

ύψος: 150px;

Χρώμα φόντου: #CCC;

}

Διαφορά μεταξύ DIV και SPAN-1

Ετικέτα HTML SPAN

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

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

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

Στο παρακάτω παράδειγμα, το μπλε κείμενο επισημαίνει πώς το στοιχείο span μπορεί να τοποθετηθεί ως ενσωματωμένο στοιχείο με διαφορετικά χαρακτηριστικά από το γονικό του στοιχείο - η παράγραφος p>:

Για να ανοίξετε το παράδειγμακάντε κλικ στο εικονίδιοστο κάτω μέρος της σελίδας.

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

Σημειώστε ότι δεν υπάρχουν διαφορέςμεταξύ HTML4 και HTML5.

Δημοφιλείς Αναρτήσεις

Διαφορά μεταξύ κύκλου και σφαίρας

Η γη στην οποία ζούμε μπορεί να μας υπενθυμίσει έναν κύκλο, αν και όχι εντελώς τέλειο, και την περιοχή της στην οποία βρίσκεται ο ανθρώπινος πληθυσμός,

3 λόγοι Το έργο Glee είναι στην πραγματικότητα καλύτερο από το Glee

Παιδιά, είμαι τόσο χαρούμενος που η νέα σεζόν του The Glee Project είναι επιτέλους εδώ! Και μετά το χθεσινοβραδινό επεισόδιο πρεμιέρας, είμαι πολύ πιο ενθουσιασμένος για να μάθω ποιος ήταν αυτός που πρωταγωνίστησε στο Glee από ποτέ για τον κ. Schue και τη συμμορία να κερδίσουν τελικά τους Nationals. ΑΣΕ με να εξηγήσω.

5 Χρόνια Λεμονάδα

Με το έκτο στούντιο άλμπουμ της, «Lemonade», η Μπιγιονσέ δεν είχε μόνο το δάχτυλό της στον πολιτιστικό λαϊκό λαό: Έγινε ο πολιτιστικός λατρεύτης.

Ο οδηγός του Michael Kors για τα Fall's DOs και DON'Ts

Διαβάστε αυτό πριν ψωνίσετε! Ο Σχεδιαστής και Project Runway κρίνει τον Michael Kors για τη δημιουργία των νέων τάσεων.

Πώς να περιγράψετε το πρόσωπό σας σε 6 βήματα: Εύκολο σεμινάριο περιγράμματος

Μάθετε πώς να διαμορφώνετε και να αναδεικνύετε το πρόσωπό σας καθώς οι επαγγελματίες μακιγιέρ αναλύουν πώς να κάνουν περίγραμμα για αρχάριους.

4 εκπληκτικά πράγματα που μπορεί να σας κρατούν πίσω στην ερωτική σας ζωή

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