5 HTML-funktioner du kanske inte vet om

För en språk så enkelt och lätt att lära sig, HTML erbjuder säkert en oväntad mängd användbara funktioner, många av vilka de flesta av oss inte ens vet om. Det är svårt att hålla jämna steg med tider och du kanske tror det hela “du kanske inte vet” artiklar måste handla om de senaste taggarna, HTML har också några ganska hjälpsamma funktioner som redan finns runt ett tag.

Från att kontrollera stavning för att lägga till tangentbordsgenvägar, visas i den här artikeln Fem mindre kända HTML-funktioner.

1. Kontrollera stavningen när du skriver

De stavnings kontroll attribut uppmanar webbläsare att kontrollera stavning medan en användare skriver ett element. Detta attribut är globalt, vilket betyder, Du kan lägga till den i någon HTML-tagg.

Men det fungerar bara på element som kan ta textinmatning. Att ha det globalt är användbart eftersom det kan vara arv av barnelement. Till exempel lägg till den till en

märka och alla dess barnelement som tar textinmatning kommer att ärva detta attribut.

Stavningskontroll fungerar på all text typer: text, Sök, url, och e-post. Det fungerar också </code>, och redigerbara element</strong> (element med <code>content</code> attribut).</p> <p>Dess värde kan vara en tom sträng, <code>Sann</code>, eller <code>falsk</code>. Den tomma strängen och <code>Sann</code> kommer <strong>aktivera stavningskontrollen</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Skriv något här </p> </pre> <p>I ovanstående kod, <strong>både <code><div></code> och <code><p></code> taggar kontrollerar stavning</strong> när en användare skriver in dem.</p> <p>Om användaren har <strong>inaktiverad stavningskontroll</strong> i webbläsarens inställningar kontrolleras inte stavningen, <strong>även om <code>stavnings kontroll</code> lades till</strong>.</p> <h4>2. Var säker från komprometterade CDN-resurser</h4> <p>Det är ganska vanligt att vara värd resurser, till exempel skript och stylesheet-filer, genom <abbr>CDN</abbr>s. Men om <strong>CDN äventyras</strong>, så gör de värdfilerna, och om någon hämtade resurs äventyras på din webbplats, så gör din webbplats också!</p> <p>Se vad Mozilla Developer Network säger om problemet:</p> <blockquote><p><q>... med hjälp av CDN kommer också risken att om en angripare tar kontroll över en CDN, kan angriparen injicera godtyckligt skadligt innehåll i filer på CDN (eller ersätta filerna helt) och kan därmed också potentiellt angripa alla webbplatser som hämtar filer från den CDN.</q></p></blockquote> <p>För att förhindra detta, <strong>Subresource Integrity (SRI)</strong> introducerades i början av 2014 av W3C. Detta system <strong>jämför ish-värdet</strong> (resultatet av att använda en hashfunktion till en ingång) <strong>av en resurs</strong> att validera det.</p> <p>Säg att det finns en JavaScript-fil på <code>https://example.com/example.js</code>. Först du <strong>Applicera en hash-funktion</strong> till den filen då <strong>lägg till det producerade hashvärdet</strong> till <strong><code>integritet</code> attribut</strong> av <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 webbsida på din webbplats med ovanstående kod måste laddas <code>example.js</code>, webbläsaren <strong>först tillämpar hashfunktionen</strong>, och lastar och körs <code>example.js</code> bara när dess <strong>hashvärdet matchar <code>integritet</code> värde</strong>.</p> <p>Om <strong><code>example.com</code> komprometterades</strong> och <strong><code>example.js</code> stördes</strong> med då hashvärdet av <code>example.js</code> kommer inte att matcha <strong><code>integritet</code> värde</strong>. </p> <p>De vanligaste CDN: erna tillhandahåller redan <strong>SRI <code>integritet</code> värden</strong>, men du kan också skapa en här.</p> <h4>3. Åsidosätt formulärmål i inmatningsknappar</h4> <p>Du är troligen bekant med <strong><code>mål</code> attribut</strong>, den som bestämmer sig <strong>där en hyperlänkad resurs öppnas</strong>, till exempel på samma sida eller i en ny flik. Du kanske också vet detsamma <code>mål</code> attribut som används i <code><form></code> taggen bestämmer <strong>där svaret från formulärinsökningen visas</strong>.</p> <p>I ett av de tidiga utkasten till HTML5, <code>formtarget</code> definierades tillsammans med fyra andra formgivnings attribut: <strong><code>formaction</code>, <code>formenctype</code>, <code>formmethod</code></strong>, och <strong><code>formnovalidate</code></strong>. </p> <p>Dessa attribut kan vara <strong>används med inlämningsknappar</strong>, och de åsidosätter deras respektive attribut i <code><form></code> tagg som knapparna tillhör.</p> <p>Så när en blankett skickas med en knapp som har en <code>formtarget</code> attribut, <strong>svaret visas enligt <code>formtarget</code> värde</strong>, istället för <code>mål</code> värdet av <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 ovanstående kod, när formuläret skickas med den andra inmatningsknappen (<code>skriva ut</code> ) kommer svaret att <strong>visas i ett nytt webbläsarkontext</strong>, som i en ny flik.</p> <h4>4. Dölj elementen semantiskt</h4> <p>När det kommer till <strong>gömningselement</strong>, Vi gick alla igenom olika faser av gömningselement: användande <strong><code>opacitet: 0</code>, <code>visibility: hidden</code>, <code>höjd: 0; bredd: 0</code>, <code>display: none</code>, <code>text-indent: -999px</code></strong> i vår CSS-fil.</p> <p>Varje metod har sitt syfte, ingen av dem är överflödiga, och det är inte så här: <strong><code>dold</code> HTML-attribut</strong>. Om ett element har <code>dold</code> specificeras på den kommer det att döljas.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Det fungerar <strong>på samma sätt som <code>display: none;</code> CSS regel</strong> elementet med <code>dold</code> attribut <strong>blir inte gjord</strong> på sidan. Varje skript inuti elementet kommer att utföras, och om det är en formkontroll kommer det att skickas in tillsammans med <strong>annan form kontrollerar under formulärinsändning</strong>.</p> <p>Men fördelen med <code>dold</code> är det det är <strong>semantiskt lämpligt</strong>, trots allt handlar HTML5 om semantik och <code>dold</code> är en del av HTML5-entourage!</p> <p>Dessutom, när ett element är gömt, ska det vara <strong>gömd på alla plattformar</strong>, inte bara i webbläsare utan i skärmsläsare, TV, projektorer osv.</p> <p>Det är också <strong>inte stilberoende</strong>, även om du tar bort författaren CSS från en sida, kommer elementet att förbli gömt. När det gäller <code>display: none;</code> det kommer inte att hända. Så tänk på <code>dold</code> som den <strong>ironclad version av <code>display: none;</code></strong>.</p> <h4>5. Lägg till tangentbordsgenvägar</h4> <p>De <strong><code>accesskey</code> globala attributet</strong> definierades redan i HTML4 och det <strong>skapar en snabbtangent</strong> med vilken användaren kan använda ett element på sidan.</p> <p>Tangentkombinationen för en genväg kommer att <strong>beror på två saker</strong>:</p> <ol><li>de <strong><code>accesskey</code> värde</strong> som vi ger till ett element</li> <li>de <strong>fördelade nycklar som används av en webbläsare</strong> för samma 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>Ta det här exemplet:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Se </button> </pre> <p>I Firefox, om du <strong>tryck på tangentkombinationen Alt + Shift + V (eller Alt + Control + V</strong> i macOS) får du varningen “Visa Clicked”.</p> <p>Eftersom de fördefinierade webbläsarens nycklar varierar med varje webbläsare och operativsystem, rekommenderas det <strong>låt användarna känna till nyckelkombinationerna</strong> används för genvägarna.</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 Egenskaper du borde veta</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 för att hålla reda på dina investeringar</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 Hårddiskformatering och partitioneringshjälpmedel</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ästa 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 Idéer Windows 10 ska kopiera från Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Föregående 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-element du kanske inte vet hur du använder</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"> Användbar information och tips om webbutveckling. Programmering, webbdesign, CSS, HTML, JAVASCRIPT. Konfigurera och installera om WINDOWS. Skapa webbplatser och applikationer från början. </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>