5 Χαρακτηριστικά HTML που δεν γνωρίζετε

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

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

1. Ελέγξτε την ορθογραφία καθώς πληκτρολογείτε

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

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

ετικέτα και όλα τα στοιχεία του παιδιού που παίρνουν κείμενο θα κληρονομήσουν αυτό το χαρακτηριστικό.

Ο έλεγχος ορθογραφίας λειτουργεί όλο το κείμενο τύπους: κείμενο, Ψάξιμο, url, και ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ. Λειτουργεί επίσης </code>, και επεξεργάσιμα στοιχεία</strong> (στοιχεία με <code>ικανοποιημένοι</code> Χαρακτηριστικό).</p> <p>Η αξία του μπορεί να είναι κενή συμβολοσειρά, <code>αληθής</code>, ή <code>ψευδής</code>. Η κενή συμβολοσειρά και <code>αληθής</code> θα <strong>ενεργοποιήστε τον ορθογραφικό έλεγχο</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Πληκτρολογήστε κάτι εδώ </p> </pre> <p>Στο παραπάνω κώδικα, <strong>και τα δύο <code><div></code> και <code><p></code> οι ετικέτες θα ελέγχουν τις ορθογραφίες</strong> όταν ένας χρήστης πληκτρολογεί σε αυτά.</p> <p>Εάν ο χρήστης έχει <strong>απενεργοποίηση ορθογραφικού ελέγχου</strong> στις ρυθμίσεις του προγράμματος περιήγησης η ορθογραφία δεν θα ελεγχθεί, <strong>ακόμα κι αν <code>ορθογραφικός έλεγχος</code> προστέθηκε</strong>.</p> <h4>2. Να είστε ασφαλείς από τους κατεστραμμένους πόρους CDN</h4> <p>Είναι αρκετά συνηθισμένο να φιλοξενούνται πόροι, όπως σενάρια και αρχεία στυλ φύλλων, μέσω <abbr>CDN</abbr>μικρό. Αλλά, αν το <strong>Το CDN διακυβεύεται</strong>, έτσι κάνουν αυτά τα φιλοξενούντα αρχεία, και εάν κάποιος αποκομμένος πόρος διακυβεύεται στον ιστότοπό σας, το κάνει και ο ιστότοπός σας!</p> <p>Δείτε τι λέει το δίκτυο του Mozilla Developer για το πρόβλημα:</p> <blockquote><p><q>... χρησιμοποιώντας CDNs έρχεται επίσης με κίνδυνο, δεδομένου ότι εάν ένας εισβολέας αποκτήσει τον έλεγχο ενός CDN, ο εισβολέας μπορεί να εισφέρει αυθαίρετο κακόβουλο περιεχόμενο σε αρχεία στο CDN (ή να αντικαταστήσει τα αρχεία εντελώς) και έτσι μπορεί επίσης να επιτεθεί σε όλους τους ιστότοπους που προσελκύουν αρχεία από αυτό το CDN.</q></p></blockquote> <p>Για να αποφευχθεί αυτό, <strong>Ακεραιότητα υποκεφαλαιοποίησης (SRI)</strong> εισήχθη στις αρχές του 2014 από το W3C. Αυτό το σχέδιο <strong>συγκρίνει την τιμή κατακερματισμού</strong> (το αποτέλεσμα της εφαρμογής μιας συνάρτησης κατακερματισμού σε μια είσοδο) <strong>ενός πόρου</strong> για να την επικυρώσετε.</p> <p>Πείτε, υπάρχει ένα αρχείο JavaScript στη διεύθυνση <code>https://example.com/example.js</code>. Πρώτα εσύ <strong>εφαρμόστε μια λειτουργία κατακερματισμού</strong> στο αρχείο, στη συνέχεια <strong>προσθέστε την παραγόμενη τιμή κατακερματισμού</strong> στο <strong><code>ακεραιότητα</code> Χαρακτηριστικό</strong> απο <strong><code><script></code> tag</strong> that imports <code>example.js</code> to your website.</p> <pre name="code"> <script src="https://example.com/example.js" integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7" crossorigin="anonymous"></script> </pre> <p>Τώρα, κάθε φορά που πρέπει να φορτωθεί μια ιστοσελίδα του ιστότοπού σας με τον παραπάνω κώδικα <code>example.js</code>, το πρόγραμμα περιήγησης <strong>εφαρμόζει πρώτα τη λειτουργία κατακερματισμού</strong>, και φορτώνει και τρέχει <code>example.js</code> μόνο όταν του <strong>η τιμή hash αντιστοιχεί στο <code>ακεραιότητα</code> αξία</strong>.</p> <p>Αν <strong><code>example.com</code> ήταν συμβιβασμένη</strong> και <strong><code>example.js</code> παρεμβαίνει</strong> με την τιμή κατακερματισμού του <code>example.js</code> δεν θα ταιριάζει με το <strong><code>ακεραιότητα</code> αξία</strong>. </p> <p>Τα περισσότερα συνηθισμένα CDNs παρέχουν ήδη <strong>SRI <code>ακεραιότητα</code> αξίες</strong>, αλλά μπορείτε επίσης να δημιουργήσετε ένα εδώ.</p> <h4>3. Αντικαταστήστε τους στόχους φόρμας στα κουμπιά υποβολής</h4> <p>Πιθανότατα είστε εξοικειωμένοι με το <strong><code>στόχος</code> Χαρακτηριστικό</strong>, αυτό που αποφασίζει <strong>όπου ανοίγει ένας υπερσυνδεδεμένος πόρος</strong>, για παράδειγμα στην ίδια σελίδα ή σε μια νέα καρτέλα. Μπορεί επίσης να γνωρίζετε ότι το ίδιο <code>στόχος</code> χαρακτηριστικό που χρησιμοποιείται στο <code><form></code> ετικέτα αποφασίζει <strong>όπου εμφανίζεται η απάντηση από την υποβολή της φόρμας</strong>.</p> <p>Σε ένα από τα πρώτα drafts του HTML5, <code>formtarget</code> καθορίστηκε μαζί με τέσσερα άλλα χαρακτηριστικά υποβολής φόρμας: <strong><code>σχηματισμό</code>, <code>formenctype</code>, <code>formmethod</code></strong>, και <strong><code>formnovalidate</code></strong>. </p> <p>Αυτά τα χαρακτηριστικά μπορούν να είναι <strong>χρησιμοποιείται με τα κουμπιά υποβολής</strong>, και υπερισχύουν των αντίστοιχων χαρακτηριστικών τους στο <code><form></code> ετικέτα στην οποία ανήκουν τα κουμπιά.</p> <p>Έτσι, όταν υποβάλλεται μια φόρμα χρησιμοποιώντας ένα κουμπί που έχει ένα <code>formtarget</code> χαρακτηριστικό, το <strong>η απόκριση εμφανίζεται σύμφωνα με το <code>formtarget</code> αξία</strong>, αντί για το <code>στόχος</code> αξία του <code><form></code>.</p> <pre name="code"> <form action="/save" target="_self" > <input type="submit" name="save" /> <input type="submit" name="print" formaction="/print" formtarget="_blank" /> </form> </pre> <p>Στον παραπάνω κώδικα, όταν υποβληθεί το έντυπο χρησιμοποιώντας το δεύτερο κουμπί υποβολής (<code>Τυπώνω</code> ), η απάντηση θα είναι <strong>εμφανίζονται σε ένα νέο πλαίσιο περιήγησης</strong>, όπως σε μια νέα καρτέλα.</p> <h4>4. Απόκρυψη σημασιολογικά στοιχεία</h4> <p>Οταν πρόκειται για <strong>κρυμμένα στοιχεία</strong>, όλοι περνούσαμε από διαφορετικές φάσεις κρυμμένων στοιχείων: χρησιμοποιώντας <strong><code>αδιαφάνεια: 0</code>, <code>ορατότητα: κρυφή</code>, <code>ύψος: 0; πλάτος: 0</code>, <code>οθόνη: καμία</code>, <code>κείμενο-παύλα: -999px</code></strong> στο αρχείο CSS.</p> <p>Κάθε μέθοδος έχει το σκοπό της, καμία από αυτές δεν είναι περιττή, και έτσι δεν είναι αυτή: η <strong><code>κεκρυμμένος</code> Χαρακτηριστικό HTML</strong>. Αν έχει κάποιο στοιχείο <code>κεκρυμμένος</code> καθορίζονται σε αυτό, θα είναι κρυμμένο.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Λειτουργεί το <strong>τον ίδιο τρόπο με τον <code>οθόνη: καμία ·</code> Κανόνας CSS.</strong> το στοιχείο με το <code>κεκρυμμένος</code> Χαρακτηριστικό <strong>δεν παίρνει αποδόθηκε</strong> στη σελίδα. Κάθε δέσμη ενεργειών μέσα στο στοιχείο θα εκτελεστεί και αν είναι έλεγχος φόρμας θα υποβληθεί μαζί με <strong>άλλοι έλεγχοι φόρμας κατά την υποβολή της φόρμας</strong>.</p> <p>Ωστόσο, το όφελος του <code>κεκρυμμένος</code> είναι ότι είναι <strong>σημασιολογικά κατάλληλο</strong>, μετά από όλα, το HTML5 είναι μόνο για τη σημασιολογία και <code>κεκρυμμένος</code> είναι μέρος του περιβάλλοντος HTML5!</p> <p>Επιπλέον, όταν ένα στοιχείο είναι κρυμμένο, πρέπει να είναι <strong>κρυμμένα σε όλες τις πλατφόρμες</strong>, όχι μόνο σε προγράμματα περιήγησης ιστού, αλλά και σε προγράμματα προβολής, τηλεόραση, προβολείς κ.λπ..</p> <p>Είναι επίσης <strong>δεν εξαρτάται από το στυλ</strong>, ακόμα κι αν απογυμνώσετε το συγγραφικό CSS από μια σελίδα, το στοιχείο θα παραμείνει κρυμμένο. Ότι στην περίπτωση της <code>οθόνη: καμία ·</code> αυτό δεν θα συμβεί. Έτσι, σκεφτείτε <code>κεκρυμμένος</code> ως <strong>ironclad έκδοση του <code>οθόνη: καμία ·</code></strong>.</p> <h4>5. Προσθέστε συντομεύσεις πληκτρολογίου</h4> <p>ο <strong><code>κλειδί πρόσβασης</code> παγκόσμιο χαρακτηριστικό</strong> είχε ήδη καθοριστεί στο HTML4 και αυτό <strong>δημιουργεί μια συντόμευση πληκτρολογίου</strong> με τον οποίο ο χρήστης μπορεί να χειριστεί ένα στοιχείο στη σελίδα.</p> <p>Ο συνδυασμός πλήκτρων για μια συντόμευση θα <strong>εξαρτάται από δύο πράγματα</strong>:</p> <ol><li>ο <strong><code>κλειδί πρόσβασης</code> αξία</strong> που δίνουμε σε ένα στοιχείο</li> <li>ο <strong>προκαθορισμένα κλειδιά που χρησιμοποιούνται από ένα πρόγραμμα περιήγησης</strong> για το ίδιο στοιχείο</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGE: Δίκτυο προγραμματιστών Mozilla</figcaption></figure><p>Πάρτε αυτό το παράδειγμα:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Θέα </button> </pre> <p>Στο Firefox, αν εσείς <strong>πατήστε το συνδυασμό πλήκτρων Alt + Shift + V (ή Alt + Control + V</strong> στο macOS) θα λάβετε την ειδοποίηση “Προβολή με κλικ”.</p> <p>Δεδομένου ότι τα προκαθορισμένα κλειδιά του προγράμματος περιήγησης ποικίλλουν ανάλογα με κάθε πρόγραμμα περιήγησης και λειτουργικό σύστημα, σας συνιστούμε <strong>αφήστε τους χρήστες να γνωρίζουν τους συνδυασμούς πλήκτρων</strong> χρησιμοποιείται για τις συντομεύσεις.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/coding/5-img-css-properties-you-should-know.html"><img src="//savtec.org/img/images/5-img-css-properties-you-should-know.gif" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/coding/5-img-css-properties-you-should-know.html">5 <IMG> Ιδιότητες CSS πρέπει να γνωρίζετε</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html"><img src="//savtec.org/img/images_5/5-iphone-apps-to-keep-track-of-your-investments_7.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html">5 iPhone εφαρμογές για να παρακολουθείτε τις επενδύσεις σας</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html"><img src="//savtec.org/img/images/5-hard-drive-formatting-and-partitioning-utilities_3.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html">5 Βοηθητικά προγράμματα μορφοποίησης και διαμέρισης σκληρού δίσκου</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Επόμενο άρθρο</div> <div class="post-img"><a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html"> <img src="//savtec.org/img/images_6/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite_5.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html">5 Ιδέες Windows 10 πρέπει να αντιγράψετε από το Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Προηγούμενο άρθρο</div> <div class="post-img"><a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html"> <img src="//savtec.org/img/images_1/5-html-elements-you-might-not-know-how-to-use.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html">5 Στοιχεία HTML που ίσως δεν γνωρίζετε πώς να χρησιμοποιείτε</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Χρήσιμες πληροφορίες και συμβουλές ανάπτυξης ιστού. Προγραμματισμός, σχεδιασμός ιστοσελίδων, CSS, HTML, JAVASCRIPT. Διαμορφώστε και επανεγκαταστήστε τα παράθυρα WINDOWS. Δημιουργία ιστοσελίδων και εφαρμογών από την αρχή. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>