11 ασυνήθιστες ετικέτες HTML για να ενισχύσετε τις δεξιότητές σας στην ανάπτυξη Ιστού

Βασικά Takeaways

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

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

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

1.

και

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

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

Οι επισκέπτες σας μπορούν εύκολα να κάνουν κλικ στη σύνοψη για να αποκτήσουν πρόσβαση στις κρυφές πληροφορίες.

<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
 clicks the summary.p>
details>

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

2.

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

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

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

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

3.

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

Εισάγετε το ετικέτα! Αντιπροσωπεύει διαγραφή και αποδίδει οποιοδήποτε περιεχόμενο εντός του στοιχείου με μια γραμμή στη μέση.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

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

4.

Όταν θέλετε να προσθέσετε σημασιολογικό νόημα σε ημερομηνίες και ώρες στο περιεχόμενό σας, το η ετικέτα είναι χρήσιμη.

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

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

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

5.

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

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

<p>
<bdi>5,000bdi> people attended the conference.
p>

Σε αυτό το παράδειγμα, το στοιχείο τυλίγει τον αριθμό 5,000. Αυτό διασφαλίζει ότι, εάν το περιβάλλον κείμενο είναι σε διαφορετική γλώσσα ή απαιτεί διαφορετική μορφοποίηση, δεν θα παρεμβαίνει στον αριθμό.

6. , ,

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

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

Σε αυτό το παράδειγμα, το στοιχείο περιέχει τον χαρακτήρα 漢 (Kanji), και το στοιχείο περιέχει την προφορά かん (καν). ο Τα στοιχεία παρέχουν εναλλακτικές παρενθέσεις για προγράμματα περιήγησης που δεν υποστηρίζουν σχολιασμούς ρουμπίνι.

7.

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

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

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

8. _και

Για επιστημονικές ή μαθηματικές σημειώσεις, χημικούς τύπους ή υποσημειώσεις, μπορείτε να χρησιμοποιήσετε το και ετικέτες για κείμενο δείκτη και εκθέτη, αντίστοιχα.

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

Αυτό το παράδειγμα χρησιμοποιεί το ετικέτα για να εμφανίσετε το 2 σε H2O ως δείκτης, ενώ το Οι ετικέτες εμφανίζουν τους εκθέτες στο Πυθαγόρειο θεώρημα.

9.

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

Χρησιμοποιώντας την αξία, ελάχ, και Μέγιστη χαρακτηριστικά, μπορείτε να ορίσετε την τρέχουσα τιμή, την ελάχιστη τιμή και τη μέγιστη τιμή της μέτρησης, αντίστοιχα.

<metervalue="75"min="0"max="100">75%meter>

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

10.

Όταν χρειάζεται δημιουργήστε ένα πλαίσιο διαλόγου ή μια επικάλυψη παραθύρου για τα modals ή καλοσυμπεριφερόμενες αναδυόμενες αλληλεπιδράσεις, ο η ετικέτα είναι ο τρόπος που πρέπει να ακολουθήσετε. Μπορείτε να χρησιμοποιήσετε το Άνοιξε χαρακτηριστικό για εμφάνιση του πλαισίου διαλόγου από προεπιλογή.

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

Σε αυτό το παράδειγμα, ένα απλό πλαίσιο διαλόγου που περιέχει μια παράγραφο και ένα κουμπί κλεισίματος δείχνει πότε φορτώνεται η σελίδα, χάρη στο Άνοιξε Χαρακτηριστικό. Μπορείτε να προσαρμόσετε το περιεχόμενο και τη συμπεριφορά του πλαισίου διαλόγου χρησιμοποιώντας JavaScript για πιο προηγμένες αλληλεπιδράσεις.

11.

Χρησιμοποιήστε το ετικέτα για να ομαδοποιήσετε σχετικές επιλογές μέσα στο α αναπτυσσόμενο στοιχείο. Σας επιτρέπει να οργανώνετε και να κατηγοριοποιείτε επιλογές για ευκολότερη πλοήγηση και επιλογή.

• οΗ ετικέτα είναι ένα στοιχείο κοντέινερ που σχετίζεται με ομάδες ετικέτες εντός α στοιχείο.
• Βοηθά στην οργάνωση των επιλογών δημιουργώντας οπτική ομαδοποίηση ή κατηγοριοποίηση στο αναπτυσσόμενο μενού.
• ο Η ετικέτα απαιτεί ένα χαρακτηριστικό label, το οποίο καθορίζει το όνομα ή τον τίτλο της ομάδας επιλογών.
• Μπορεί να περιέχει ένα ή περισσότερα ετικέτες ως θυγατρικά στοιχεία, αντιπροσωπεύοντας τις μεμονωμένες επιλογές μέσα στην ομάδα.

Για παράδειγμα:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

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

Βελτιώστε την επάρκειά σας στην ανάπτυξη Ιστού

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

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