5 HTML-funksjoner du kanskje ikke vet om

For en språk så enkelt og lett å lære, HTML tilbyr sikkert en uventet mengde nyttige funksjoner, hvorav mange av oss ikke engang vet om. Det er vanskelig å holde tritt med tider, og du kan tenke det hele “du vet kanskje ikke” Artikler må være om de nyeste kodene, HTML har også noen ganske nyttige funksjoner som allerede eksisterer en stund.

Fra å sjekke stavemåte for å legge til hurtigtaster, i denne artikkelen, viser jeg deg Fem mindre kjente HTML-funksjoner.

1. Kontroller stavemåten når du skriver

De stavekontroll Egenskap ber om nettlesere for å sjekke stavekontroll mens en bruker skriver et element. Denne egenskapen er global, betyr, Du kan legge den til i hvilken som helst HTML-kode.

Men det fungerer bare på elementer som kan ta tekstinngang. Å ha det globalt er nyttig fordi det kan være arvet av barnelementer. Legg til for eksempel på en

stikkord og alle dens elementelementer som tar tekstinnspilling vil arve dette attributten.

Stavekontroll fungerer på all tekst typer: tekst, Søke, url, og e-post. Det fungerer også på </code>, og redigerbare elementer</strong> (elementer med <code>contenteditable</code> Egenskap).</p> <p>Dens verdi kan være en tom streng, <code>ekte</code>, eller <code>falsk</code>. Den tomme strengen og <code>ekte</code> vil <strong>aktiver stavekontrollen</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Skriv noe her </p> </pre> <p>I ovennevnte kode, <strong>begge <code><div></code> og <code><p></code> Merkene vil sjekke stavemåten</strong> når en bruker skriver inn i dem.</p> <p>Hvis brukeren har <strong>deaktivert stavekontroll</strong> i nettleserinnstillingene vil stavemåten ikke bli sjekket, <strong>selv om <code>stavekontroll</code> ble lagt til</strong>.</p> <h4>2. Vær trygg mot kompromitterte CDN-ressurser</h4> <p>Det er ganske vanlig å være vert for ressurser, for eksempel skript og stilarkfiler, gjennom <abbr>CDN</abbr>s. Men hvis <strong>CDN blir kompromittert</strong>, så gjør de vertsbaserte filene, og hvis noen hentet ressurs er kompromittert på nettstedet ditt, gjør det også nettstedet ditt!</p> <p>Se hva Mozilla Developer Network sier om problemet:</p> <blockquote><p><q>... ved bruk av CDN-er kommer også en risiko, hvis angriperen får kontroll over en CDN, kan angriperen injisere vilkårlig skadelig innhold i filer på CDN (eller erstatte filene helt) og dermed også potensielt angripe alle nettsteder som henter filer fra den CDN.</q></p></blockquote> <p>For å forhindre dette, <strong>Subresource Integrity (SRI)</strong> ble introdusert tidlig i 2014 av W3C. Denne ordningen <strong>sammenligner ishverdien</strong> (resultatet av å bruke en hash-funksjon til en inngang) <strong>av en ressurs</strong> å validere det.</p> <p>Si, det er en JavaScript-fil på <code>https://example.com/example.js</code>. Først du <strong>Bruk en hash-funksjon</strong> til den filen, da <strong>legg til den produserte hashverdien</strong> til <strong><code>integritet</code> Egenskap</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>Nå, når en nettside på nettstedet ditt med den ovennevnte koden må lastes inn <code>example.js</code>, nettleseren <strong>Først gjelder hash-funksjonen</strong>, og laster og løper <code>example.js</code> bare når det er <strong>hash verdi samsvarer med <code>integritet</code> verdi</strong>.</p> <p>Hvis <strong><code>example.com</code> ble kompromittert</strong> og <strong><code>example.js</code> ble forstyrret</strong> med da ishverdien av <code>example.js</code> vil ikke matche <strong><code>integritet</code> verdi</strong>. </p> <p>De vanligste CDNene gir allerede <strong>SRI <code>integritet</code> verdier</strong>, men du kan også generere en her.</p> <h4>3. Overstyr formularmål i sende knapper</h4> <p>Du er mest sannsynlig kjent med <strong><code>mål</code> Egenskap</strong>, den som bestemmer seg <strong>hvor en hyperkoblet ressurs åpnes</strong>, for eksempel på samme side eller i en ny kategori. Du kan også vite det samme <code>mål</code> attributt brukt i <code><form></code> tag bestemmer <strong>hvor svaret fra skjemainnsendelsen er vist</strong>.</p> <p>I et av de tidlige utkastene til HTML5, <code>formtarget</code> ble definert 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 egenskapene kan være <strong>brukes med sende knapper</strong>, og de tilsidesetter deres respektive attributter i <code><form></code> tag som knappene tilhører.</p> <p>Så når et skjema sendes inn med en knapp som har en <code>formtarget</code> attributt, <strong>svaret er vist i henhold til <code>formtarget</code> verdi</strong>, i stedet for <code>mål</code> verdien 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 ovennevnte kode, når skjemaet er sendt med den andre sendeknappen (<code>skrive ut</code> ), vil svaret <strong>vises i en ny surfekontekst</strong>, som i en ny kategori.</p> <h4>4. Skjul elementer semantisk</h4> <p>Når det gjelder <strong>gjemmer elementer</strong>, vi alle gikk gjennom ulike faser av skjule elementer: bruk <strong><code>opacity: 0</code>, <code>synlighet: skjult</code>, <code>høyde: 0; bredde: 0</code>, <code>display: none</code>, <code>text-indent: -999px</code></strong> i vår CSS-fil.</p> <p>Hver metode har sin hensikt, ingen av dem er overflødige, og det er heller ikke dette: <strong><code>skjult</code> HTML-attributt</strong>. Hvis et element har <code>skjult</code> spesifisert på den, vil den bli skjult.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Det fungerer <strong>på samme måte som <code>display: none;</code> CSS regel;</strong> elementet med <code>skjult</code> Egenskap <strong>blir ikke gjengitt</strong> på siden. Ethvert skript inne i elementet vil bli utført, og hvis det er en skjemakontroll, vil det bli sendt sammen med <strong>annen form kontrollerer under skjema innsending</strong>.</p> <p>Men fordelene med <code>skjult</code> er det det er <strong>semantisk passende</strong>, Tross alt handler HTML5 om semantikk og <code>skjult</code> er en del av HTML5-entourage!</p> <p>Videre, når et element er skjult, skal det være <strong>gjemt i alle plattformer</strong>, ikke bare i nettlesere, men i skjermlesere, TV, projektorer osv.</p> <p>Det er også <strong>ikke stilavhengig</strong>, selv om du fjerner forfatteren CSS fra en side, vil elementet forbli skjult. Mens i tilfelle av <code>display: none;</code> det vil ikke skje. Så tenk på <code>skjult</code> som <strong>Ironclad versjon av <code>display: none;</code></strong>.</p> <h4>5. Legg til hurtigtastene</h4> <p>De <strong><code>tilgangsnøkkel</code> global attributt</strong> var allerede definert i HTML4 og den <strong>lager en hurtigtast</strong> som brukeren kan betjene et element på siden.</p> <p>Tastekombinasjonen for en snarvei vil <strong>avhenger av to ting</strong>:</p> <ol><li>de <strong><code>tilgangsnøkkel</code> verdi</strong> som vi gir til et element</li> <li>de <strong>forhåndsdefinerte nøkler som brukes av en nettleser</strong> for det samme elementet</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 dette eksempelet:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Utsikt </button> </pre> <p>I Firefox, hvis du <strong>trykk på tastekombinasjonen Alt + Shift + V (eller Alt + Control + V</strong> i macOS) får du varselet “Se Clicked”.</p> <p>Siden de forhåndsdefinerte nettleserne varierer med hver nettleser og operativsystem, anbefales det deg <strong>la brukerne vite om tastekombinasjonene</strong> brukes til snarveiene.</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 bør vite</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 for å holde oversikt over 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 partisjoneringsverktøy</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">Neste artikkel</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 bør kopiere fra Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Forrige artikkel</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 kanskje ikke vet hvordan du bruker</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"> Nyttig informasjon og tips om nettutvikling. Programmering, webdesign, CSS, HTML, JAVASCRIPT. Konfigurer og installer WINDOWS på nytt. Opprettelse av nettsteder og applikasjoner fra bunnen av. </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>