5 fonctionnalités HTML que vous ignorez peut-être

Pour un langue si simple et facile à apprendre, HTML offre sûrement un quantité inattendue de fonctionnalités utiles, beaucoup dont la plupart d'entre nous ne sont même pas au courant. Il est difficile de suivre le rythme et vous pouvez penser que tout “vous pourriez ne pas savoir” les articles doivent porter sur les balises les plus récentes, HTML en a également caractéristiques très utiles qui existent déjà depuis un moment.

De la vérification de l'orthographe à l'ajout de raccourcis clavier, dans cet article, je vais vous montrer cinq fonctionnalités HTML moins connues.

1. Vérifiez l'orthographe en cours de frappe

le vérification orthographique attribut invite les navigateurs à vérifier l'orthographe lorsqu'un utilisateur tape un élément. Cet attribut est global, ce qui signifie, vous pouvez l'ajouter à n'importe quelle balise HTML.

Cependant, cela ne fonctionne que sur des éléments pouvant prendre la saisie de texte. L’avoir global est utile car il peut être hérité par des éléments enfants. Par exemple, ajoutez-le à un

étiquette et tous ses éléments enfants prenant une entrée de texte hériteront de cet attribut.

La vérification orthographique fonctionne sur tout le texte les types: texte, chercher, url, et email. Cela fonctionne aussi sur </code>, et éléments modifiables</strong> (éléments avec <code>contenteditable</code> attribut).</p> <p>Sa valeur peut être une chaîne vide, <code>vrai</code>, ou <code>faux</code>. La chaîne vide et <code>vrai</code> volonté <strong>activer le correcteur orthographique</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Tapez quelque chose ici </p> </pre> <p>Dans le code ci-dessus, <strong>à la fois le <code><div></code> et <code><p></code> les balises vérifieront l'orthographe</strong> quand un utilisateur tape dessus.</p> <p>Si l'utilisateur a <strong>vérification orthographique désactivée</strong> dans les paramètres du navigateur, l'orthographe ne sera pas vérifiée, <strong>même si <code>vérification orthographique</code> était ajouté</strong>.</p> <h4>2. Protégez-vous des ressources CDN compromises</h4> <p>Il est assez courant d’héberger des ressources, telles que des scripts et des fichiers de feuilles de style, via <abbr>CDN</abbr>s. Mais si le <strong>CDN est compromis</strong>, il en va de même pour les fichiers hébergés, et si une ressource lue est compromise sur votre site Web, il en va de même pour votre site.!</p> <p>Découvrez ce que dit Mozilla Developer Network à propos du problème:</p> <blockquote><p><q>… Utiliser des CDN présente également un risque, en ce sens que si un attaquant acquiert le contrôle d'un CDN, il peut injecter un contenu malveillant arbitraire dans les fichiers du CDN (ou remplacer complètement les fichiers) et peut donc potentiellement attaquer tous les sites de récupération de ce CDN.</q></p></blockquote> <p>Pour empêcher cela, <strong>Intégrité des sous-ressources (SRI)</strong> a été introduit début 2014 par le W3C. Ce schéma <strong>compare la valeur de hachage</strong> (résultat de l'application d'une fonction de hachage à une entrée) <strong>d'une ressource</strong> pour le valider.</p> <p>Dis, il y a un fichier JavaScript à <code>https://example.com/example.js</code>. D'abord, vous <strong>appliquer une fonction de hachage</strong> à ce fichier, puis <strong>ajouter la valeur de hachage produite</strong> au <strong><code>intégrité</code> attribut</strong> du <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>Maintenant, chaque fois qu'une page Web de votre site avec le code ci-dessus doit être chargée <code>exemple.js</code>, le navigateur <strong>applique d'abord la fonction de hachage</strong>, et charge et court <code>exemple.js</code> seulement quand <strong>la valeur de hachage correspond à la <code>intégrité</code> valeur</strong>.</p> <p>Si <strong><code>exemple.com</code> a été compromis</strong> et <strong><code>exemple.js</code> a été interféré</strong> avec alors la valeur de hachage de <code>exemple.js</code> ne correspondra pas à la <strong><code>intégrité</code> valeur</strong>. </p> <p>Les CDN les plus courants fournissent déjà <strong>ISR <code>intégrité</code> valeurs</strong>, mais vous pouvez aussi en générer un ici.</p> <h4>3. Remplacer les cibles de formulaire dans les boutons d'envoi</h4> <p>Vous êtes probablement familier avec le <strong><code>cible</code> attribut</strong>, celui qui décide <strong>où une ressource hypertexte s'ouvre</strong>, par exemple sur la même page ou dans un nouvel onglet. Vous savez peut-être aussi que le même <code>cible</code> attribut utilisé dans le <code><form></code> tag décide <strong>où la réponse de la soumission du formulaire est affichée</strong>.</p> <p>Dans l'une des premières versions de HTML5, <code>formtarget</code> a été défini avec quatre autres attributs de soumission de formulaire: <strong><code>formaction</code>, <code>type de formulaire</code>, <code>méthode de calcul</code></strong>, et <strong><code>formnovalidate</code></strong>. </p> <p>Ces attributs peuvent être <strong>utilisé avec les boutons d'envoi</strong>, et ils remplacent leurs attributs respectifs dans le <code><form></code> étiquette à laquelle appartiennent les boutons.</p> <p>Ainsi, lorsqu'un formulaire est soumis à l'aide d'un bouton doté d'un <code>formtarget</code> attribut, le <strong>la réponse est affichée en fonction de la <code>formtarget</code> valeur</strong>, à la place du <code>cible</code> valeur de <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>Dans le code ci-dessus, lorsque le formulaire est soumis à l’aide du deuxième bouton de soumission (<code>impression</code> ), la réponse sera <strong>apparaître dans un nouveau contexte de navigation</strong>, comme dans un nouvel onglet.</p> <h4>4. Cacher les éléments sémantiquement</h4> <p>Quand cela vient à <strong>éléments cachés</strong>, nous sommes tous passés par différentes phases de masquage d’éléments: en utilisant <strong><code>opacité: 0</code>, <code>visibilité: caché</code>, <code>hauteur: 0; largeur: 0</code>, <code>affichage: aucun</code>, <code>retrait du texte: -999px</code></strong> dans notre fichier CSS.</p> <p>Chaque méthode a sa raison d’être, aucune d’entre elles n’est redondante, de même que celle-ci: <strong><code>caché</code> Attribut HTML</strong>. Si un élément a <code>caché</code> spécifié dessus, ça va être caché.</p> <pre name="code"> <div hidden>… </div> </pre> <p>Ça marche le <strong>même façon que le <code>affichage: aucun;</code> Règle CSS;</strong> l'élément avec le <code>caché</code> attribut <strong>ne soit pas rendu</strong> sur la page. Tout script à l'intérieur de l'élément sera exécuté, et s'il s'agit d'un contrôle de formulaire, il sera soumis avec <strong>autres contrôles de formulaire lors de la soumission du formulaire</strong>.</p> <p>Cependant, le bénéfice de <code>caché</code> est-ce que c'est <strong>sémantiquement approprié</strong>, Après tout, HTML5 est tout sur la sémantique et <code>caché</code> fait partie de l'entourage HTML5!</p> <p>De plus, quand un élément est caché, c'est pour être <strong>caché dans toutes les plateformes</strong>, non seulement dans les navigateurs Web, mais également dans les lecteurs d'écran, les téléviseurs, les projecteurs, etc..</p> <p>C'est aussi <strong>pas dépendant du style</strong>, même si vous supprimez le CSS auteur d'une page, l'élément reste masqué. Considérant que dans le cas de <code>affichage: aucun;</code> cela n'arrivera pas. Alors, pensez à <code>caché</code> comme le <strong>version ironclad de <code>affichage: aucun;</code></strong>.</p> <h4>5. Ajouter des raccourcis clavier</h4> <p>le <strong><code>clé d'accès</code> attribut global</strong> était déjà défini dans HTML4 et <strong>crée un raccourci clavier</strong> avec lequel l'utilisateur peut faire fonctionner un élément de la page.</p> <p>La combinaison de touches pour un raccourci sera <strong>compter sur deux choses</strong>:</p> <ol><li>la <strong><code>clé d'accès</code> valeur</strong> que nous donnons à un élément</li> <li>la <strong>clés pré-assignées utilisées par un navigateur</strong> pour le même élément</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGE: Réseau de développeurs Mozilla</figcaption></figure><p>Prenons cet exemple:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Vue </button> </pre> <p>Dans Firefox, si vous <strong>appuyez sur la combinaison de touches Alt + Maj + V (ou Alt + Ctrl + V</strong> sous macOS) vous aurez l'alerte “Voir cliqué”.</p> <p>Comme les clés de navigateur prédéfinies varient selon les navigateurs et les systèmes d’exploitation, il est recommandé de <strong>informer les utilisateurs des combinaisons de touches</strong> utilisé pour les raccourcis.</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 propriétés CSS <IMG> à connaître</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 applications iPhone pour suivre vos investissements</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 Utilitaires de formatage et de partitionnement de disque dur</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">Article suivant</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 idées que Windows 10 doit copier à partir de Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Article précédent</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 éléments HTML que vous ne savez peut-être pas utiliser</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"> Informations utiles et conseils de développement Web. Programmation, conception web, CSS, HTML, JAVASCRIPT. Configurez et réinstallez WINDOWS. Création de sites et d'applications à partir de zéro. </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>