5 HTML funkcije, o katerih morda ne veste

Za jezik tako preprost in enostaven za učenje, HTML zagotovo ponuja nepričakovano veliko uporabnih funkcij, mnogi od njih večina od nas sploh ne ve. Težko je slediti časom in morda misliš, da je vse “morda ne veste” članki morajo biti o najnovejših oznakah, HTML ima tudi nekaj zelo koristne funkcije, ki so že nekaj časa prisotne.

Od preverjanja črkovanja do dodajanja bližnjic na tipkovnici v tem članku vam bom pokazal pet manj znanih funkcij HTML.

1. Med tipkanjem preverite črkovanje

The Preverjanje črkovanja atribut od brskalnikov zahteva preverjanje črkovanja, ko uporabnik vnaša element. Ta atribut je globalni, kar pomeni, lahko ga dodate kateri koli oznaki HTML.

Vendar deluje le na elemente, ki jih lahko vnašanje besedila. To, da je globalno, je koristno, ker je lahko podedovali otrokovi elementi. Na primer, dodajte ga v a

oznaka in vsi njegovi podrejeni elementi, ki vzamejo vnos besedila, bodo podedovali ta atribut.

Preverjanje črkovanja deluje celotno besedilo vrste: besedilo, Iskanje, url, in E-naslov. Prav tako deluje </code>, in elemente, ki jih je mogoče urejati</strong> (elementi z <code>vsebinsko primerna</code> atribut).</p> <p>Njegova vrednost je lahko prazen niz, <code>prav</code>, ali <code>false</code>. Prazen niz in <code>prav</code> volja <strong>omogočite črkovalnik</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Tukaj vnesite nekaj </p> </pre> <p>V zgornji kodi, <strong>oboje <code><div></code> in <code><p></code> oznake bodo preverjale črkovanje</strong> ko jih vnese uporabnik.</p> <p>Če ima uporabnik <strong>onemogočeno preverjanje črkovanja</strong> v nastavitvah brskalnika črkovanje ne bo preverjeno, <strong>tudi če <code>Preverjanje črkovanja</code> je bil dodan</strong>.</p> <h4>2. Bodite varni pred ogroženimi viri CDN</h4> <p>To je precej pogosto za gostiteljske vire, kot so skripte in datoteke s slogi, skozi <abbr>CDN</abbr>s. Ampak, če <strong>CDN postane ogrožena</strong>, to storijo tudi te gostiteljske datoteke in če je na vašem spletnem mestu ogrožen kateri koli pridobljeni vir, je tudi vaše spletno mesto!</p> <p>Oglejte si, kaj Mozilla Developer Network pravi o težavi:</p> <blockquote><p><q>… Uporaba CDN-jev prinaša tudi tveganje, da lahko napadalec vnese samovoljno zlonamerno vsebino v datoteke na CDN-ju (ali popolnoma zamenja datoteke) in s tem lahko tudi potencialno napade vse strani, ki pridobijo datoteke od te CDN.</q></p></blockquote> <p>Da bi to preprečili, <strong>Subresource Integrity (SRI)</strong> je bil uveden v začetku leta 2014 s strani W3C. Ta shema <strong>primerja vrednost razpršitve</strong> (rezultat uporabe hash funkcije na vnosu) <strong>virov</strong> za potrditev.</p> <p>Recimo, da obstaja datoteka JavaScript <code>https://example.com/example.js</code>. Najprej ti <strong>uporabite funkcijo razpršitve</strong> v to datoteko <strong>dodajte proizvedeno razpršeno vrednost</strong> do <strong><code>celovitosti</code> atribut</strong> od <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>Zdaj, ko se mora naložiti spletna stran vašega spletnega mesta z zgornjo kodo <code>example.js</code>, brskalnika <strong>najprej uporabi hash funkcijo</strong>, in nalaga in teče <code>example.js</code> šele, ko je <strong>vrednost hash ustreza <code>celovitosti</code> vrednost</strong>.</p> <p>Če <strong><code>example.com</code> je bila ogrožena</strong> in <strong><code>example.js</code> je bila posegana</strong> potem s hash vrednostjo <code>example.js</code> ne bo ustrezal <strong><code>celovitosti</code> vrednost</strong>. </p> <p>Najpogostejši CDN-ji že zagotavljajo <strong>SRI <code>celovitosti</code> vrednosti</strong>, lahko pa ga ustvarite tudi tukaj.</p> <h4>3. Preglasite cilje obrazcev v gumbih za pošiljanje</h4> <p>Verjetno ste seznanjeni z <strong><code>cilj</code> atribut</strong>, tisti, ki se odloči <strong>kjer se odpre hiperpovezan vir</strong>, na primer na isti strani ali na novem zavihku. Morda tudi to veste <code>cilj</code> atribut, uporabljen v <code><form></code> se odloči <strong>kjer je prikazan odgovor iz predložitve obrazca</strong>.</p> <p>V enem od prvih osnutkov HTML5, <code>obliko cilja</code> je bil določen skupaj s štirimi drugimi atributi za predložitev obrazcev: <strong><code>oblikovanja</code>, <code>formenctype</code>, <code>način</code></strong>, in <strong><code>formno ovrednotiti</code></strong>. </p> <p>Ti atributi so lahko <strong>uporablja s tipkami za pošiljanje</strong>, in preglasijo svoje atribute v <code><form></code> oznaka, kateri pripadajo gumbi.</p> <p>Torej, ko je obrazec poslan z gumbom, ki ima a <code>obliko cilja</code> atribut, <strong>odziv je prikazan glede na <code>obliko cilja</code> vrednost</strong>, namesto <code>cilj</code> vrednost. \ t <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>V zgornji kodi, ko je obrazec poslan z drugim gumbom za predložitev (<code>natisnite</code> ), odgovor bo <strong>pojavijo v novem kontekstu brskanja</strong>, v novem zavihku.</p> <h4>4. Skrite elemente semantično</h4> <p>Ko gre za <strong>skriti elementi</strong>, vsi smo šli skozi različne faze skrivnih elementov: uporabo <strong><code>motnost: 0</code>, <code>vidljivost: skrita</code>, <code>višina: 0; širina: 0</code>, <code>prikaz: nič</code>, <code>text-indent: -999px</code></strong> v naši CSS datoteki.</p> <p>Vsaka metoda ima svoj namen, nobena od njih ni odvečna, zato ni ta: <strong><code>skrito</code> Atribut HTML</strong>. Če ima element <code>skrito</code> naveden na njem, bo skrit.</p> <pre name="code"> <div hidden>… </div> </pre> <p>Deluje <strong>enako kot <code>prikaz: nič;</code> Pravilo CSS;</strong> element z <code>skrito</code> atribut <strong>se ne prikaže</strong> na strani. Vsak skript znotraj elementa bo izveden, in če je kontrolnik obrazca, bo poslan skupaj z njim <strong>druge oblike nadzora pri predložitvi obrazca</strong>.</p> <p>Vendar pa koristi <code>skrito</code> je, da je <strong>semantično ustrezna</strong>, konec koncev, HTML5 je vse o semantiki in <code>skrito</code> je del vsebine HTML5!</p> <p>Poleg tega, ko je element skrit, je to <strong>skrite v vseh platformah</strong>, ne samo v spletnih brskalnikih, ampak tudi v programih za branje zaslona, televiziji, projektorjih itd.</p> <p>Prav tako je <strong>ni odvisen od stila</strong>, tudi če odstranite CSS avtorja s strani, bo element ostal skrit. Ker je v primeru. \ T <code>prikaz: nič;</code> to se ne bo zgodilo. Torej, pomisli <code>skrito</code> kot <strong>. \ t <code>prikaz: nič;</code></strong>.</p> <h4>5. Dodajte bližnjice na tipkovnici</h4> <p>The <strong><code>accesskey</code> globalni atribut</strong> je že bila določena v HTML4 in <strong>ustvari bližnjico na tipkovnici</strong> s katerim lahko uporabnik upravlja z elementom na strani.</p> <p>Kombinacija tipk za bližnjico bo <strong>odvisni od dveh stvari</strong>:</p> <ol><li> <strong><code>accesskey</code> vrednost</strong> dajemo elementu</li> <li> <strong>vnaprej dodeljene tipke, ki jih uporablja brskalnik</strong> za isti element</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>SLIKA: Mozilla Developer Network</figcaption></figure><p>Vzemite ta primer:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Prikaži </button> </pre> <p>V Firefoxu, če ste <strong>pritisnite kombinacijo tipk Alt + Shift + V (ali Alt + Control + V</strong> v macOS) boste dobili opozorilo “Pogled je bil kliknjen”.</p> <p>Ker so vnaprej definirane tipke brskalnika odvisne od vsakega brskalnika in operacijskega sistema, je priporočljivo <strong>uporabnike seznanite s kombinacijami tipk</strong> za bližnjice.</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> Lastnosti CSS, ki jih morate poznati</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 aplikacije, ki bodo sledile vašim vlaganjem</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 Pripomočki za formatiranje trdega diska in particioniranje</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">Naslednji članek</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 idej Windows 10 naj kopira iz Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Prejšnji članek</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 elementov, ki jih ne bi znali uporabljati</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"> Koristne informacije in nasveti za razvoj spleta. Programiranje, spletni dizajn, CSS, HTML, JAVASCRIPT. Konfigurirajte in znova namestite WINDOWS. Izdelava spletnih mest in aplikacij iz nič. </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>