5 HTML-funktioner, du måske ikke ved

For a sprog så enkelt og nemt at lære, HTML tilbyder sikkert en uventet mængde nyttige funktioner, hvoraf mange af os ikke engang ved. Det er svært at holde op med tider, og du kan måske tro det hele “du ved måske ikke” Artikler skal være om de nyeste tags, HTML har også nogle ret nyttige funktioner, der allerede er i gang i et stykke tid.

Fra at kontrollere stavemåden for at tilføje tastaturgenveje, vil jeg i denne artikel vise dig Fem mindre kendte HTML-funktioner.

1. Kontroller stavning, mens du skriver

Det stavekontrol attribut beder browsere at kontrollere stavemåder, mens en bruger skriver et element. Denne egenskab er global, hvilket betyder, Du kan føje det til ethvert HTML-tag.

Men det virker kun på elementer, der kan tag tekstindtastning. At have det globalt er nyttigt, fordi det kan være arvet af barnets elementer. F.eks. Tilføj det til en

tag og alle dets elementelementer, der tager tekstindtastning, arver denne attribut.

Stavekontrol fungerer på al tekst typer: tekst, Søg, url, og e-mail. Det virker også på </code>, og redigerbare elementer</strong> (elementer med <code>contenteditable</code> attribut).</p> <p>Dens værdi kan være en tom streng, <code>rigtigt</code>, eller <code>falsk</code>. Den tomme streng og <code>rigtigt</code> vilje <strong>aktiver stavekontrollen</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Skriv noget her </p> </pre> <p>I ovenstående kode, <strong>begge <code><div></code> og <code><p></code> tags vil kontrollere stavemåder</strong> når en bruger skriver ind i dem.</p> <p>Hvis brugeren har <strong>handicappet stavekontrol</strong> i browserindstillingerne vil stavningen ikke blive kontrolleret, <strong>selvom <code>stavekontrol</code> blev tilsat</strong>.</p> <h4>2. Vær sikker på kompromitterede CDN-ressourcer</h4> <p>Det er ret almindeligt at være vært for ressourcer, såsom scripts og stylesheet-filer, igennem <abbr>CDN</abbr>s. Men hvis <strong>CDN bliver kompromitteret</strong>, så gør de hostede filer, og hvis nogen hentet ressource er kompromitteret på din hjemmeside, det samme gør dit websted!</p> <p>Se, hvad Mozilla Developer Network siger om problemet:</p> <blockquote><p><q>... ved hjælp af cdn'er er der også risiko for, at hvis en angriber får kontrol over et cdn, kan angriberen indsprøjte vilkårligt ondsindet indhold i filer på cdn'en (eller erstatte filerne fuldstændigt) og dermed også potentielt angribe alle websteder, der henter filer fra den CDN.</q></p></blockquote> <p>For at forhindre dette, <strong>Subresource Integrity (SRI)</strong> blev introduceret i begyndelsen af 2014 af W3C. Denne ordning <strong>sammenligner hashværdien</strong> (resultatet af at anvende en hash-funktion til en indgang) <strong>af en ressource</strong> at validere det.</p> <p>Sig, der er en JavaScript-fil på <code>https://example.com/example.js</code>. Først dig <strong>Anvend en hash funktion</strong> til den fil, så <strong>Tilføj den producerede hashværdi</strong> til <strong><code>integritet</code> attribut</strong> af <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, når en webside på dit websted med ovenstående kode skal indlæses <code>example.js</code>, browseren <strong>først anvender hash-funktionen</strong>, og laster og kører <code>example.js</code> kun når det er <strong>hashværdi passer til <code>integritet</code> værdi</strong>.</p> <p>Hvis <strong><code>example.com</code> blev kompromitteret</strong> og <strong><code>example.js</code> blev forstyrret</strong> med så hashværdien af <code>example.js</code> vil ikke matche <strong><code>integritet</code> værdi</strong>. </p> <p>Mest almindelige CDN'er giver allerede <strong>SRI <code>integritet</code> værdier</strong>, men du kan også generere en her.</p> <h4>3. Overstyr formularmål i indsende knapper</h4> <p>Du er mest sandsynligt bekendt med <strong><code>mål</code> attribut</strong>, den der bestemmer <strong>hvor en hyperlinket ressource åbnes</strong>, for eksempel på samme side eller i en ny fane. Du kan måske også vide det samme <code>mål</code> attribut anvendt i <code><form></code> tag bestemmer <strong>hvor svaret fra formularindgivelsen er vist</strong>.</p> <p>I et af de tidlige udkast til HTML5, <code>formtarget</code> blev defineret sammen med fire andre formgivningsattributter: <strong><code>formaction</code>, <code>formenctype</code>, <code>formmethod</code></strong>, og <strong><code>formnovalidate</code></strong>. </p> <p>Disse attributter kan være <strong>bruges med sende knapper</strong>, og de tilsidesætter deres respektive attributter i <code><form></code> tag, som knapperne tilhører.</p> <p>Så når en formular indsendes med en knap, der har en <code>formtarget</code> attributten, den <strong>svar vises i henhold til <code>formtarget</code> værdi</strong>, i stedet for <code>mål</code> Værdi af <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>I ovenstående kode, når formularen indsendes ved hjælp af den anden indsende knap (<code>Print</code> ), vil svaret <strong>vises i en ny browsing-kontekst</strong>, som i en ny fane.</p> <h4>4. Skjul elementer semantisk</h4> <p>Når det kommer til <strong>skjule elementer</strong>, vi gik alle igennem forskellige faser af skjule elementer: ved hjælp af <strong><code>opacitet: 0</code>, <code>visibility: hidden</code>, <code>højde: 0; bredde: 0</code>, <code>display: none</code>, <code>tekst-led: -999px</code></strong> i vores CSS-fil.</p> <p>Hver metode har sin hensigt, ingen af dem er overflødige, og det er heller ikke denne <strong><code>skjult</code> HTML attribut</strong>. Hvis et element har <code>skjult</code> specificeret på det, vil det være skjult.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Det virker <strong>på samme måde som <code>display: none;</code> CSS regel;</strong> elementet med <code>skjult</code> attribut <strong>bliver ikke gengivet</strong> på siden. Ethvert script inde i elementet vil blive udført, og hvis det er en formkontrol, vil det blive indsendt sammen med <strong>anden form kontrol under form indsendelse</strong>.</p> <p>Men fordelene ved <code>skjult</code> er det det er <strong>semantisk passende</strong>, HTML5 handler trods alt om semantik og <code>skjult</code> er en del af HTML5 entourage!</p> <p>Når et element er skjult, skal det desuden være <strong>skjult i alle platforme</strong>, ikke bare i webbrowsere, men også i skærmlæser, tv, projektorer osv.</p> <p>Det er også <strong>ikke stilafhængig</strong>, selvom du fjerner forfatteren CSS fra en side, forbliver elementet skjult. I tilfælde af <code>display: none;</code> det vil ikke ske. Så tænk på <code>skjult</code> som <strong>ironclad version af <code>display: none;</code></strong>.</p> <h4>5. Tilføj tastaturgenveje</h4> <p>Det <strong><code>accesskey</code> global attribut</strong> var allerede defineret i HTML4 og den <strong>opretter en tastaturgenvej</strong> hvormed brugeren kan betjene et element på siden.</p> <p>Nøglekombinationen for en genvej vil <strong>afhænger af to ting</strong>:</p> <ol><li>det <strong><code>accesskey</code> værdi</strong> som vi giver til et element</li> <li>det <strong>forudinddelte nøgler, der bruges af en browser</strong> for det samme 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>Tag dette eksempel:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Udsigt </button> </pre> <p>I Firefox, hvis du <strong>tryk på tastekombinationen Alt + Skift + V (eller Alt + Control + V</strong> i macOS) får du besked “Se klikket”.</p> <p>Da de foruddefinerede browser nøgler varierer med hver browser og OS, anbefales det dig <strong>lad brugerne kende nøglekombinationerne</strong> bruges til genveje.</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 Egenskaber du bør vide</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 til at holde styr på dine investeringer</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 Harddiskformatering og partitioneringsværktøjer</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">Næste 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 ideer Windows 10 skal kopiere fra Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Forrige 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-elementer, du måske ikke ved, hvordan du bruger</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"> Nyttige oplysninger og tips til webudvikling. Programmering, webdesign, CSS, HTML, JAVASCRIPT. Konfigurer og geninstaller WINDOWS. Oprettelse af websteder og applikationer fra bunden. </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>