Στον γρήγορο κόσμο του Διαδικτύου, η βελτίωση των δεξιοτήτων σας στην ανάπτυξη ιστού απαιτεί την υιοθέτηση μιας βιώσιμης και καινοτόμου προσέγγισης για να διασφαλίσετε ότι θα παραμένετε ενημερωμένοι με τις πιο πρόσφατες τεχνολογίες και τάσεις. Τα στοιχεία HTML είναι ένα από τα πιο σημαντικά θεμέλια αυτής της ανάπτυξης, καθώς αντιπροσωπεύουν τη βασική γλώσσα στην οποία είναι χτισμένη η δομή και ο σχεδιασμός των ιστοσελίδων. Ωστόσο, δεν πρόκειται μόνο για τη χρήση βασικών στοιχείων, αλλά και για τη χρήση ασυνήθιστων και καινοτόμων στοιχείων HTML που προσθέτουν ελκυστικότητα και λειτουργικότητα στην εμπειρία του χρήστη.
Ως προγραμματιστής ιστού, πρέπει να γνωρίζετε καλά κοινά στοιχεία HTML όπως π.χ Και Και Το οποίο αντιπροσωπεύει τη δομή και το περιεχόμενο των ιστοσελίδων. Ωστόσο, η HTML προσφέρει πολλά περισσότερα από αυτό!
Εξερευνώντας αυτά τα μοναδικά στοιχεία, μπορείτε να βελτιώσετε τη λειτουργικότητα των διαδικτυακών εφαρμογών που δημιουργείτε, κάνοντάς τες να ξεχωρίζουν από τον ανταγωνισμό. Επαληθεύω Λόγοι για τους οποίους η εκμάθηση HTML είναι απαραίτητη για κάθε προγραμματιστή.
Γρήγοροι σύνδεσμοι
1. Και
Φανταστείτε ότι έχετε μια ευρεία πληροφορία ή περιεχόμενο που δεν θέλετε να κατακλύζεται αμέσως ο αναγνώστης. Τα στοιχεία θα σας σώσουν Και !
Αυτά συνεργάζονται για να δημιουργήσουν μια επεκτάσιμη ενότητα ενός τίτλου ή μιας περίληψης στην οποία οι χρήστες του ιστότοπου μπορούν να κάνουν κλικ για να αποκαλύψουν περισσότερες λεπτομέρειες. Από προεπιλογή, το περιεχόμενο μέσα σε ένα στοιχείο δεν θα εμφανίζεται , που διατηρεί τη σελίδα σας τακτοποιημένη και οργανωμένη.
Ο επισκέπτης μπορεί εύκολα να κάνει κλικ στη σύνοψη για πρόσβαση στις κρυφές πληροφορίες.
<καθέκαστα>περίληψη> Κάντε κλικ προς την αποκαλύψει περισσότερες πληροφορίεςπερίληψη>p> Αυτό περιεχόμενο Θα είναι κρυφό από προεπιλογή, αλλά θα εμφανιστεί όταν ο χρήστης κάνει κλικ στο κουμπί. περίληψη.</p> </καθέκαστα>Με αυτά τα στοιχεία, μπορείτε να αποκρύψετε μεγάλα τμήματα κειμένου, κώδικα ή άλλες πληροφορίες, παρέχοντας μια εύχρηστη εμπειρία, διατηρώντας παράλληλα ένα καθαρό σχέδιο. Αυτά τα στοιχεία μπορεί επίσης να σας βοηθήσουν Βελτιώστε τις δεξιότητές σας ως σχεδιαστής front-end.
2.
Το αντικείμενο σας δίνεται Επισημάνετε συγκεκριμένα μέρη του περιεχομένου σας, κάνοντάς τα να ξεχωρίζουν οπτικά. όταν χρησιμοποιείτε ένα αντικείμενο Τα προγράμματα περιήγησης συνήθως εφαρμόζουν ένα κίτρινο χρώμα φόντου στο κείμενο μέσα σε αυτό, το οποίο εφιστά την προσοχή του αναγνώστη σε αυτό.
Αυτή η δυνατότητα είναι ιδιαίτερα χρήσιμη όταν θέλετε να δώσετε έμφαση σε σημαντικές λέξεις-κλειδιά, φράσεις ή αποτελέσματα αναζήτησης στην ιστοσελίδα σας.
<p> Μπορείτε να χρησιμοποιήσετε τοσημάδι>σημάδι</σημάδι> ετικέτα προς την επισημάνετε σημαντικές λέξεις ή φράσεις. </p>Για παράδειγμα, εάν ο ιστότοπός σας έχει λειτουργία αναζήτησης, μπορείτε να χρησιμοποιήσετε ένα στοιχείο Για να επισημάνετε τις αντιστοιχίσεις ερωτημάτων αναζήτησης στα αποτελέσματα, διευκολύνοντας τους χρήστες να βρίσκουν σχετικές πληροφορίες.
3.
Έχετε συναντήσει ποτέ καταστάσεις όπου το περιεχόμενο έχει γίνει ξεπερασμένο ή δεν είναι πλέον σχετικό, αλλά εξακολουθείτε να θέλετε να το προβάλετε για ιστορικούς σκοπούς ή για να υποδείξετε αλλαγές με την πάροδο του χρόνου;
Γνωρίστε το στοιχείο ! Αντιπροσωπεύει κείμενο διαγραφής και εμφανίζει οποιοδήποτε περιεχόμενο εντός του στοιχείου σε μια γραμματοσειρά διαγραφής.
<p>
Αυτό το προϊόν είναι <s>Out-of-stock</s> προς το παρόν διαθέσιμο σε μειωμένη τιμή!
</p>Σε αυτό το παράδειγμα, το μη διαθέσιμο θα εμφανίζεται ως κείμενο διαγραφής, υποδεικνύοντας ότι η κατάσταση αποθέματος του προϊόντος έχει αλλάξει.
4.
Όταν θέλετε να προσθέσετε σημασιολογικό νόημα σε ημερομηνίες και ώρες στο περιεχόμενό σας, το Θα σου φανεί χρήσιμο.
Με το χαρακτηριστικό datetime, μπορείτε να καθορίσετε μια αναγνώσιμη από μηχανή έκδοση της ημερομηνίας ή της ώρας, η οποία βοηθά τα προγράμματα περιήγησης, τις μηχανές αναζήτησης και τα προγράμματα ανάγνωσης οθόνης να κατανοήσουν το περιεχόμενο.
<p>
Η Διακήρυξη της Ανεξαρτησίας υπογράφηκε
<ώραημερομηνία="1776-07-04">Ιούλιος 4, 1776</ώρα>.
</p>χρησιμοποιώντας ένα αντικείμενο , δίνετε στο περιεχόμενο περισσότερη δομή και το κάνετε προσβάσιμο σε ένα ευρύτερο φάσμα χρηστών, συμπεριλαμβανομένων των ατόμων με αναπηρίες που χρησιμοποιούν προγράμματα ανάγνωσης οθόνης.
5.
Η διαχείριση κειμένου σε πολλές γλώσσες σε μια ιστοσελίδα μπορεί μερικές φορές να είναι δύσκολη, ειδικά όταν κάθε τμήμα απαιτεί διαφορετική μορφοποίηση.
Το αντικείμενο θα σας παρουσιαστεί Βοηθήστε απομονώνοντας ένα κομμάτι κειμένου που το πρόγραμμα περιήγησης πρέπει να αντιμετωπίζει διαφορετικά λόγω διαφορετικών απαιτήσεων γλώσσας.
<p><bdi>5,000</bdi> κόσμος παρακολούθησε το συνέδριο.
</p>Σε αυτό το παράδειγμα, το στοιχείο αναδιπλώνεται με τον αριθμό 5000. Αυτό διασφαλίζει ότι εάν το περιβάλλον κείμενο είναι σε διαφορετική γλώσσα ή απαιτεί διαφορετική μορφή, δεν θα επικαλύπτεται με τον αριθμό.
6. , ,
Για τη γραφή σε χώρες της Ανατολικής Ασίας, όπου χρησιμοποιούνται συνήθως ενδείξεις προφοράς, furigana ή άλλοι σχολιασμοί πάνω ή κάτω από τα γράμματα, τα στοιχεία παίζουν Και Και αυτόν τον ρόλο.
<p>
μαθαίνω
<ρουμπίνι>κινέζικα<rt>διαίσθηση</rt></ρουμπίνι>Word<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p>Σε αυτό το παράδειγμα, το στοιχείο περιέχει τον χαρακτήρα 漢 (kanji) και περιέχει το στοιχείο Στην προφορά かん (ήταν). Παρεχόμενα είδη Αντίγραφα ασφαλείας για προγράμματα περιήγησης που δεν υποστηρίζουν κόκκινους σχολιασμούς.
7.
Όταν έχετε μεγάλες λέξεις που μπορεί να διαλύσουν τη μορφοποίηση, το Element είναι εδώ για να σας βοηθήσει. Υποδηλώνει την πιθανότητα μιας αλλαγής γραμμής (την πιθανότητα να σπάσουν λέξεις) σε μια μεγάλη λέξη, όπου το πρόγραμμα περιήγησης μπορεί να επιλέξει να αναδιπλώσει κείμενο.
Αυτό είναι ένα παράδειγμα μιας μεγάλης διεύθυνσης URL: https://www.example.org/ with/a/long/path/and/a?query=string.Στο παραπάνω παράδειγμα, η μεγάλη διεύθυνση URL περιλαμβάνει ένα στοιχείο που επιτρέπει στο πρόγραμμα περιήγησης να το χωρίσει σε δύο γραμμές εάν χρειάζεται, διατηρώντας παράλληλα τη διάταξη του περιβάλλοντος περιεχομένου. Επαληθεύω Ένας οδηγός για αρχάριους για αποκριτικές εικόνες HTML.
8. και
Για επιστημονικά ή μαθηματικά σύμβολα, χημικούς τύπους ή υποσημειώσεις, μπορείτε να χρησιμοποιήσετε τα στοιχεία και για δείκτη και εκθέτη, αντίστοιχα.
<p>
Ο χημικός τύπος του νερού είναι H<παρακάτω>2</παρακάτω>O, και το Πυθαγόρειο θεώρημα είναι α<sup>2</sup> + β<sup>2</sup> = γ<sup>2</sup>.
</p>Αυτό το παράδειγμα χρησιμοποιεί ένα στοιχείο για να εμφανίσει το 2 στο H2O ως δείκτη, ενώ εμφανίζει το εκθετικό στοιχείο στο Πυθαγόρειο θεώρημα.
9.
Θέλετε να αναπαραστήσετε αριθμητικές μετρήσεις εντός ενός γνωστού εύρους, όπως η χρήση δίσκου, οι βαθμολογίες ή οι βαθμολογίες δοκιμών; Το στοιχείο θα σας βοηθήσει .
Χρησιμοποιώντας τα χαρακτηριστικά τιμή, ελάχιστο και μέγιστο, μπορείτε να καθορίσετε την τρέχουσα τιμή, την ελάχιστη τιμή και τη μέγιστη τιμή μέτρησης, αντίστοιχα.
<meter value="75"πρακτικά="0"max="100">75%Σε αυτό το παράδειγμα, ένα στοιχείο Βαθμολογία δοκιμής 75%.
10.
Όταν χρειάζεται να δημιουργήσετε ένα πλαίσιο διαλόγου, παράθυρο επικάλυψης υπό όρους ή αλληλεπιδράσεις με αναδυόμενο παράθυρο, το είναι ο δρόμος που πρέπει να πάτε. Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό ανοίξτεΕμφανίζει το πλαίσιο διαλόγου από προεπιλογή.
<διάλογοςανοίξτε><p>Αυτό είναι ένα πλαίσιο διαλόγου!</p><κουμπί>Κλεισιμο</κουμπί></διάλογος>Σε αυτό το παράδειγμα, εμφανίζεται ένας απλός διάλογος με μια παράγραφο και ένα κουμπί κλεισίματος όταν φορτώνεται η σελίδα, χάρη στο θέμα ανοίξτε. Μπορείτε να προσαρμόσετε το περιεχόμενο και τη συμπεριφορά του διαλόγου χρησιμοποιώντας JavaScript για πιο προηγμένες αλληλεπιδράσεις.
11.
Χρησιμοποιήστε ένα αντικείμενο Ομαδοποιεί σχετικές επιλογές σε ένα αναπτυσσόμενο στοιχείο . Το οποίο σας επιτρέπει να οργανώνετε και να κατηγοριοποιείτε επιλογές για ευκολότερη πλοήγηση και επιλογή.
- Είναι ένα στοιχείο κοντέινερ που συλλέγει ετικέτες που σχετίζονται μέσα σε ένα στοιχείο .
- Βοηθά στην οργάνωση των επιλογών δημιουργώντας μια οπτική ομαδοποίηση ή κατηγοριοποίηση στο αναπτυσσόμενο μενού.
- απαιτούν σημάδι Ένα χαρακτηριστικό ετικέτας που καθορίζει το όνομα ή τον τίτλο της ομάδας επιλογών.
- Μπορεί να περιέχει ένα στοιχείο ένα ή περισσότερα υποστοιχεία, τα οποία αντιπροσωπεύουν μεμονωμένες επιλογές εντός της ομάδας.
Για παράδειγμα:
<επιλέξτε><optgroupεπιγραφή="Ασία"><επιλογήαξία="kr">Νότια Κορέα</επιλογή></optgroup><optgroupεπιγραφή="Ευρώπη"><επιλογήαξία="de">Germany</επιλογή></optgroup></επιλέξτε>Αυτό το παράδειγμα ομαδοποιεί το αναπτυσσόμενο μενού επιλογής σε δύο μέρη: Ασία και Ευρώπη. Κάθε ομάδα περιέχει στοιχεία που αντιπροσωπεύουν διαφορετικές χώρες σε αυτήν την περιοχή.
Ενισχύστε την αποτελεσματικότητά σας στην ανάπτυξη Ιστού
Η εκμάθηση των λιγότερο γνωστών στοιχείων HTML μπορεί να βελτιώσει σημαντικά τις δεξιότητές σας στην ανάπτυξη ιστού. Αν και δεν αναγνωρίζονται, προσφέρουν πολύτιμα χαρακτηριστικά για συγκεκριμένα περιβάλλοντα.
Η προσθήκη αυτών των στοιχείων στο σύνολο δεξιοτήτων σας βελτιώνει τη διαδραστικότητα, την προσβασιμότητα και βελτιστοποιεί τη διαδικασία ανάπτυξης ιστού. Θυμηθείτε, αν και μπορεί να είναι άγνωστο, έχει τεράστιο αντίκτυπο στο ταξίδι σας ως προγραμματιστής ιστού. Μπορείτε να δείτε τώρα Code on the Go: Καλύτερες εφαρμογές επεξεργασίας HTML για Android.
