5 HTML-functies die u misschien niet kent

Voor een taal zo eenvoudig en gemakkelijk te leren, HTML biedt zeker een onverwachte hoeveelheid nuttige functies, veel waarvan de meesten van ons het niet eens weten. Het is moeilijk om de tijd bij te houden en misschien denk je dat allemaal “je weet het misschien niet” artikelen moeten over de meest recente tags gaan, HTML heeft ook wat heel nuttige functies die al een tijdje bestaan.

Van het controleren van de spelling tot het toevoegen van sneltoetsen, in dit artikel laat ik het je zien vijf minder bekende HTML-functies.

1. Controleer de spelling terwijl u typt

De spellingscontrole attribuut vraagt browsers om spelling te controleren terwijl een gebruiker een element invoert. Dit kenmerk is globaal, wat betekent, je kunt het aan elke HTML-tag toevoegen.

Het werkt echter alleen op elementen die dat wel kunnen neem tekstinvoer. Het globaal hebben is nuttig omdat het kan zijn geërfd door onderliggende elementen. Voeg het bijvoorbeeld toe aan een

label en al zijn onderliggende elementen die tekstinvoer aannemen, zullen dit kenmerk overnemen.

Spellingcontrole werkt verder alle tekst types: tekst, zoeken, url, en e-mail. Het werkt ook verder </code>, en bewerkbare elementen</strong> (elementen met <code>contenteditable</code> attribuut).</p> <p>De waarde kan een lege tekenreeks zijn, <code>waar</code>, of <code>vals</code>. De lege tekenreeks en <code>waar</code> zullen <strong>schakel de spellingscontrole in</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Typ hier iets </p> </pre> <p>In de bovenstaande code, <strong>beide <code><div></code> en <code><p></code> tags controleren spelling</strong> wanneer een gebruiker erin typt.</p> <p>Als de gebruiker heeft <strong>gehandicapte spellingcontrole</strong> in de browserinstellingen wordt de spelling niet gecontroleerd, <strong>zelfs indien <code>spellingscontrole</code> was toegevoegd</strong>.</p> <h4>2. Wees beschermd tegen aangetaste CDN-bronnen</h4> <p>Het is vrij gebruikelijk om bronnen, zoals scripts en stylesheet-bestanden, te hosten <abbr>CDN</abbr>s. Maar als het <strong>CDN raakt gecompromitteerd</strong>, dat geldt ook voor die gehoste bestanden en als een opgehaalde bron op uw website in gevaar wordt gebracht, geldt dat ook voor uw site!</p> <p>Kijk wat Mozilla Developer Network over het probleem zegt:</p> <blockquote><p><q>... het gebruik van CDN's gaat ook gepaard met een risico, namelijk dat als een aanvaller de controle over een CDN verkrijgt, de aanvaller willekeurige kwaadaardige inhoud in bestanden op de CDN kan injecteren (of de bestanden volledig kan vervangen) en dus mogelijk ook alle sites kan aanvallen die bestanden ophalen van dat CDN.</q></p></blockquote> <p>Om dit te voorkomen, <strong>Subresource Integrity (SRI)</strong> werd begin 2014 geïntroduceerd door W3C. Dit schema <strong>vergelijkt de hash-waarde</strong> (het resultaat van het toepassen van een hashfunctie op een invoer) <strong>van een hulpbron</strong> om het te valideren.</p> <p>Zeg, er is een JavaScript-bestand bij <code>https://example.com/example.js</code>. Eerst jij <strong>een hash-functie toepassen</strong> naar dat bestand <strong>voeg de geproduceerde hash-waarde toe</strong> naar de <strong><code>integriteit</code> attribuut</strong> van de <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>Nu, wanneer een webpagina van uw site met de bovenstaande code moet worden geladen <code>example.js</code>, de browser <strong>past eerst de hash-functie toe</strong>, en laadt en loopt <code>example.js</code> alleen als het is <strong>hash-waarde komt overeen met de <code>integriteit</code> waarde</strong>.</p> <p>Als <strong><code>example.com</code> was aangetast</strong> en <strong><code>example.js</code> was bemoeid</strong> met dan de hashwaarde van <code>example.js</code> komt niet overeen met de <strong><code>integriteit</code> waarde</strong>. </p> <p>De meest voorkomende CDN's bieden al <strong>SRI <code>integriteit</code> waarden</strong>, maar je kunt er hier ook een genereren.</p> <h4>3. Overschrijf formulierdoelen in submitknoppen</h4> <p>U bent waarschijnlijk bekend met de <strong><code>doelwit</code> attribuut</strong>, degene die beslist <strong>waar een hyperlinkbron opent</strong>, bijvoorbeeld op dezelfde pagina of in een nieuw tabblad. Je zou ook hetzelfde kunnen weten <code>doelwit</code> attribuut gebruikt in de <code><form></code> tag beslist <strong>waar het antwoord van de formulierinzending wordt getoond</strong>.</p> <p>In een van de eerste concepten van HTML5, <code>formtarget</code> is gedefinieerd samen met vier andere formulierverzending attributen: <strong><code>formaction</code>, <code>formenctype</code>, <code>formmethod</code></strong>, en <strong><code>formnovalidate</code></strong>. </p> <p>Deze attributen kunnen zijn <strong>gebruikt met submit-knoppen</strong>, en ze negeren hun respectievelijke attributen in de <code><form></code> tag waartoe de knoppen behoren.</p> <p>Dus wanneer een formulier wordt ingediend met een knop die een <code>formtarget</code> attribuut, de <strong>antwoord wordt weergegeven volgens de <code>formtarget</code> waarde</strong>, in plaats van de <code>doelwit</code> waarde van <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>In de bovenstaande code, wanneer het formulier wordt ingediend met de tweede verzendknop (<code>afdrukken</code> ), zal het antwoord <strong>verschijnen in een nieuwe browsercontext</strong>, zoals in een nieuw tabblad.</p> <h4>4. Verberg elementen semantisch</h4> <p>Als het aankomt op <strong>verbergen elementen</strong>, we hebben allemaal verschillende fasen van verstopte elementen doorlopen: gebruiken <strong><code>ondoorzichtigheid: 0</code>, <code>visibility: hidden</code>, <code>Hoogte: 0; Breedte: 0</code>, <code>Geen weergeven</code>, <code>text-indent: -999px</code></strong> in ons CSS-bestand.</p> <p>Elke methode heeft zijn doel, geen ervan is overbodig, en dit is deze ook niet: de <strong><code>verborgen</code> HTML-kenmerk</strong>. Als een element heeft <code>verborgen</code> opgegeven, wordt deze verborgen.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Het werkt het <strong>dezelfde manier als de <code>Geen weergeven;</code> CSS-regel;</strong> het element met de <code>verborgen</code> attribuut <strong>wordt niet weergegeven</strong> op de pagina. Elk script in het element wordt uitgevoerd en als het een formulierbesturingselement is, wordt het samen met het script verzonden <strong>andere formulierelementen tijdens het indienen van formulieren</strong>.</p> <p>Het voordeel van <code>verborgen</code> is dat het is <strong>semantisch geschikt</strong>, HTML5 draait immers helemaal om semantiek en <code>verborgen</code> maakt deel uit van de HTML5-entourage!</p> <p>Bovendien, wanneer een element verborgen is, moet het dat ook zijn <strong>verborgen op alle platforms</strong>, niet alleen in webbrowsers, maar ook in schermlezers, tv, projectors, enz.</p> <p>Het is ook <strong>niet stijlafhankelijk</strong>, zelfs als je de auteurs-CSS van een pagina verwijdert, blijft het element verborgen. Overwegende dat in het geval van <code>Geen weergeven;</code> dat zal niet gebeuren. Denk aan <code>verborgen</code> als de <strong>ijzeren versie van <code>Geen weergeven;</code></strong>.</p> <h4>5. Voeg sneltoetsen toe</h4> <p>De <strong><code>toegangssleutel</code> globaal kenmerk</strong> was al gedefinieerd in HTML4 en it <strong>maakt een sneltoets aan</strong> waarmee de gebruiker een element op de pagina kan bedienen.</p> <p>De toetscombinatie voor een snelkoppeling zal <strong>afhankelijk van twee dingen</strong>:</p> <ol><li>de <strong><code>toegangssleutel</code> waarde</strong> die we aan een element geven</li> <li>de <strong>vooraf toegewezen toetsen die door een browser worden gebruikt</strong> voor hetzelfde element</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGE: Mozilla Developer Network</figcaption></figure><p>Neem dit voorbeeld:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Uitzicht </button> </pre> <p>In Firefox, als jij <strong>druk op de toetscombinatie Alt + Shift + V (of Alt + Control + V</strong> in macOS) krijg je de melding “View Clicked”.</p> <p>Omdat de vooraf gedefinieerde browsersleutels variëren met elke browser en besturingssysteem, is het aan te raden <strong>laat de gebruikers weten van de toetscombinaties</strong> gebruikt voor de snelkoppelingen.</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-eigenschappen die u moet weten</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-apps om uw investeringen bij te houden</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 Hulpprogramma's voor het formatteren en partitioneren van de vaste schijf</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">Volgend artikel</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 Ideeën Windows 10 zou moeten kopiëren van Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Vorig artikel</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-elementen waarvan u niet zeker weet hoe u ze moet gebruiken</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"> Nuttige informatie en tips voor webontwikkeling. Programmering, webdesign, CSS, HTML, JAVASCRIPT. Configureer en installeer WINDOWS opnieuw. Creëren van sites en applicaties vanuit het niets. </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>