5 HTML-funktsiooni, mida te ei tea

Le keel on nii lihtne ja lihtne õppida, HTML pakub kindlasti ootamatu hulga kasulikke funktsioone, paljud neist enamik meist ei tea. Raske on aegadel sammu pidada ja te võite arvata, et kõik “te ei tea” artiklid peavad olema kõige värskemate siltide kohta, HTML-il on ka mõned väga kasulikud funktsioonid, mis on juba mõnda aega umbes.

Alates õigekirja kontrollimisest klaviatuuri otseteede lisamisega näitan selles artiklis viis vähem levinud HTML-funktsiooni.

1. Kontrollige kirjutamise ajal õigekirja

The Õigekirja kontroll atribuut palub brauseritel kontrollida õigekirja, kui kasutaja kirjutab elementi. See atribuut on globaalne, tähendus, saate selle lisada mis tahes HTML-sildile.

Kuid see töötab ainult elementidel, mida saab tekstisisestust. Selle globaalne kasutamine on kasulik, sest see võib olla lapse elemendid. Näiteks lisage see a-le

silt ja kõik selle tekstielementide lapselemendid pärivad selle atribuudi.

Õigekirjakontroll toimib kogu tekst tüübid: teksti, otsing, url, ja e-posti teel. See töötab ka </code>, ja muudetavad elemendid</strong> (elemendid koos <code>rahulolev</code> atribuut).</p> <p>Selle väärtus võib olla tühi string, <code>tõsi</code>, või <code>vale</code>. Tühi string ja <code>tõsi</code> tahe <strong>lubage õigekirja kontroll</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Sisestage midagi siia </p> </pre> <p>Ülaltoodud koodis, <strong>nii <code><div></code> ja <code><p></code> sildid kontrollivad õigekirja</strong> kui kasutaja neid sisestab.</p> <p>Kui kasutajal on <strong>keelatud õigekirja kontroll</strong> brauseri seadetes ei kontrollita õigekirja, <strong>isegi kui <code>Õigekirja kontroll</code> lisati</strong>.</p> <h4>2. Olge ohustatud CDN-i ressursside eest</h4> <p>On üsna tavaline, et hallata ressursse, näiteks skripte ja stiilifaile <abbr>CDN</abbr>s. Aga kui <strong>CDN on ohustatud</strong>, nii need hostitud failid, ja kui teie veebisaidil on mingit tõmmatud ressurssi, siis teie veebisait!</p> <p>Vaadake, mida Mozilla arendajavõrk probleemi kohta ütleb:</p> <blockquote><p><q>CDN-de kasutamisel on ka oht, et kui ründaja saab kontrolli CDN-i üle, võib ründaja CDN-i failidesse suvalise pahatahtliku sisu süstida (või asendada failid täielikult) ja seega võib ka potentsiaalselt rünnata kõiki veebisaite, mis faile tõmbavad sellest CDN-ist.</q></p></blockquote> <p>Selle vältimiseks, <strong>Allikate terviklikkus (SRI)</strong> W3C tutvustas seda 2014. aasta alguses. See skeem <strong>võrdleb räsi väärtust</strong> (räsifunktsiooni sisendile rakendamise tulemus) <strong>ressurssi</strong> selle kinnitamiseks.</p> <p>Ütle, et seal on JavaScript-fail <code>https://example.com/example.js</code>. Esiteks, sina <strong>rakendage räsifunktsioon</strong> sellele failile <strong>lisage toodetud räsi väärtus</strong> Euroopa <strong><code>terviklikkus</code> atribuut</strong> selle <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üüd, kui teie veebilehe ülaltoodud koodiga tuleb laadida <code>example.js</code>, brauserit <strong>esmalt rakendab räsifunktsioon</strong>, ja koormused ja jooksud <code>example.js</code> ainult siis, kui see on <strong>räsi väärtus vastab <code>terviklikkus</code> väärtus</strong>.</p> <p>Kui <strong><code>example.com</code> oli ohustatud</strong> ja <strong><code>example.js</code> häiriti</strong> siis räsi väärtus <code>example.js</code> ei sobi <strong><code>terviklikkus</code> väärtus</strong>. </p> <p>Kõige tavalisemad CDN-id juba pakuvad <strong>SRI <code>terviklikkus</code> väärtused</strong>, kuid siin saate ka luua.</p> <h4>3. Alistage vormi eesmärgid esitamisnuppudes</h4> <p>Sa oled kõige tõenäolisemalt tuttav <strong><code>sihtmärk</code> atribuut</strong>, see, kes otsustab <strong>kus avaneb hüperlink</strong>, näiteks samal lehel või uuel vahekaardil. Võib-olla teate seda sama <code>sihtmärk</code> atribuut, mida kasutatakse <code><form></code> tag <strong>kus näidatakse vormi esitamise vastust</strong>.</p> <p>Ühes HTML5 varases eelnõus, <code>vormi sihtmärk</code> määratleti koos nelja muu vormi esitamise atribuudiga: <strong><code>vormimist</code>, <code>formenctype</code>, <code>vormimeetod</code></strong>, ja <strong><code>formnovalidate</code></strong>. </p> <p>Need atribuudid võivad olla <strong>kasutatakse koos saatmisnuppudega</strong>, ja nad tühistavad nende vastavad atribuudid <code><form></code> silt, millele nupud kuuluvad.</p> <p>Niisiis, kui vorm on esitatud nupuga, millel on a <code>vormi sihtmärk</code> atribuut, <strong>vastus on näidatud vastavalt <code>vormi sihtmärk</code> väärtus</strong>, asemel <code>sihtmärk</code> väärtus <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>Ülaltoodud koodis, kui vorm esitatakse teise esitamisnupu abil (<code>printida</code> ) vastus <strong>ilmuvad uues sirvimise kontekstis</strong>, nagu uuel kaardil.</p> <h4>4. Peida elemendid semantiliselt</h4> <p>Kui tegemist on <strong>peidavad elemendid</strong>, me kõik läksime läbi peidus elementide erinevaid faase: kasutades <strong><code>suitsusus: 0</code>, <code>nähtavus: peidetud</code>, <code>kõrgus: 0; laius: 0</code>, <code>kuva: pole</code>, <code>tekst-taane: -999px</code></strong> meie CSS-failis.</p> <p>Igal meetodil on oma eesmärk, ükski neist ei ole üleliigne ja nii ei ole see ükski <strong><code>peidetud</code> HTML atribuut</strong>. Kui element on <code>peidetud</code> see on varjatud.</p> <pre name="code"> <div hidden>… </div> </pre> <p>See toimib <strong>samamoodi nagu <code>kuva: pole;</code> CSS reegel;</strong> elementi <code>peidetud</code> atribuut <strong>ei saada sulatatud</strong> lehel. Kõik elemendi sees olevad skriptid täidetakse ja kui see on vormikontroll, esitatakse see koos <strong>muu vormikontrolli vormi esitamise ajal</strong>.</p> <p>Kuid kasu <code>peidetud</code> see on see <strong>semantiliselt asjakohane</strong>, HTML5 on lõppkokkuvõttes semantikast ja <code>peidetud</code> on osa HTML5 saatjast!</p> <p>Pealegi, kui element on peidetud, peab see olema <strong>peidetud kõikidel platvormidel</strong>, mitte ainult veebibrauserites, vaid ekraanilugejates, teleris, projektorites jne.</p> <p>See on ka <strong>mitte stiilist sõltuv</strong>, isegi kui te eemaldate autori CSS lehelt, jääb element peidetud. Arvestades, et. \ T <code>kuva: pole;</code> see ei juhtu. Niisiis, mõtle <code>peidetud</code> nagu <strong>rauakaupade versioon <code>kuva: pole;</code></strong>.</p> <h4>5. Lisage kiirklahvid</h4> <p>The <strong><code>accesskey</code> globaalne atribuut</strong> on juba defineeritud HTML4-s ja selles <strong>loob kiirklahvi</strong> millega kasutaja saab leheküljel elementi kasutada.</p> <p>Kiirklahvi kombinatsioon <strong>sõltub kahest asjast</strong>:</p> <ol><li>the <strong><code>accesskey</code> väärtus</strong> me anname elemendile</li> <li>the <strong>brauseri kasutatavad eelnevalt määratud võtmed</strong> sama elemendi jaoks</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>Võtke see näide:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Vaade </button> </pre> <p>Firefoxis, kui teil on <strong>vajutage klahvikombinatsiooni Alt + Shift + V (või Alt + Control + V</strong> MacOSis saate teate “Vaade klõpsati”.</p> <p>Kuna eelnevalt määratletud brauseri võtmed varieeruvad iga brauseri ja operatsioonisüsteemi vahel, on soovitatav <strong>laske kasutajatel teada klahvikombinatsioone</strong> otseteede jaoks.</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 omadused, mida peaksite teadma</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'i rakendused teie investeeringute jälgimiseks</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 Kõvaketta vormindamine ja partitsiooni utiliidid</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">Järgmine 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 ideed Windows 10 peaks kopeerima Mac OS X Yosemite'ist</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Eelmine 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-elementi, mida te ei tea, kuidas kasutada</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"> Kasulik teave ja veebiarenduse näpunäited. Programmeerimine, veebidisain, CSS, HTML, JAVASCRIPT. Seadistage ja installige Windows WINDOWS uuesti. Saidide ja rakenduste loomine nullist. </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>