5 funkcií HTML, o ktorých by ste nemali vedieť

Pre tak jednoduché a ľahko sa učiť, HTML určite ponúka neočakávané množstvo užitočných funkcií, z ktorých väčšina z nás ani nevie. Je ťažké držať krok s časom a môžete si to všetko myslieť “Možno neviete” články musia byť o najnovších značkách, HTML tiež obsahuje niektoré pomerne užitočné funkcie, ktoré sú už na chvíľu.

Od kontroly pravopisu až po pridanie klávesových skratiek, v tomto článku vám ukážem päť menej všeobecne známych funkcií HTML.

1. Počas zadávania skontrolujte pravopis

Kontrola pravopisu atribút vyzve prehliadače, aby skontrolovali hláskovanie, zatiaľ čo používateľ píše prvok. Tento atribút je globálny, čo znamená, môžete ho pridať do ľubovoľnej značky HTML.

Pracuje však iba na prvkoch, ktoré môžu zadajte textový vstup. Mať to globálne je užitočné, pretože to môže byť zdedené podradenými prvkami. Napríklad, pridajte ho do a

štítok a všetky jeho podradené prvky, ktoré vstupujú do textu, zdedia tento atribút.

Kontrola pravopisu funguje všetok text typy: text, Vyhľadávanie, url, a e-mail. Pracuje tiež </code>, a editovateľné prvky</strong> (prvky s <code>contenteditable</code> atribút).</p> <p>Jeho hodnota môže byť prázdny reťazec, <code>pravdivý</code>, alebo <code>nepravdivý</code>. Prázdny reťazec a <code>pravdivý</code> vôľa <strong>povoliť kontrolu pravopisu</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Napíšte niečo tu </p> </pre> <p>Vo vyššie uvedenom kóde, <strong>oba <code><div></code> a <code><p></code> značky skontrolovať pravopis</strong> keď používateľ do nich píše.</p> <p>Ak má používateľ <strong>zakázaná kontrola pravopisu</strong> v nastavení prehliadača sa pravopis nebude kontrolovať, <strong>aj keď <code>Kontrola pravopisu</code> bol pridaný</strong>.</p> <h4>2. Buďte v bezpečí z ohrozených zdrojov CDN</h4> <p>Je celkom bežné hostiť zdroje, ako skripty a súbory šablón štýlov, cez <abbr>CDN</abbr>s. Ale, ak <strong>CDN je kompromitované</strong>, tak tie hostované súbory a ak je na vašich webových stránkach narušený zdroj, tak aj vaše stránky!</p> <p>Pozrite sa, čo o sieti Mozilla Developer Network hovorí o probléme:</p> <blockquote><p><q>... pomocou CDN tiež prichádza s rizikom, že v prípade, že útočník získa kontrolu nad CDN, môže útočník podať ľubovoľný škodlivý obsah do súborov na CDN (alebo úplne nahradiť súbory) a tak môže potenciálne napadnúť aj všetky stránky, ktoré načítajú súbory z tohto CDN.</q></p></blockquote> <p>Ak tomu chcete zabrániť, <strong>Integrita podzdrojov (SRI)</strong> bol predstavený na začiatku roka 2014 W3C. Táto schéma <strong>porovnáva hodnotu hash</strong> (výsledok aplikácie hash funkcie na vstup) <strong>zdroja</strong> potvrdiť ho.</p> <p>Povedzte, na adrese je súbor JavaScript <code>https://example.com/example.js</code>. Najprv ty <strong>použite funkciu hash</strong> do tohto súboru <strong>pridajte vytvorenú hodnotu hash</strong> na <strong><code>integrita</code> atribút</strong> z <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>Teraz, kedykoľvek sa musí načítať webová stránka vašich stránok s vyššie uvedeným kódom <code>example.js</code>, prehliadač <strong>najskôr použije funkciu hash</strong>, a zaťažuje a beží <code>example.js</code> len keď je jeho <strong>hash hodnota zodpovedá <code>integrita</code> hodnota</strong>.</p> <p>ak <strong><code>example.com</code> bol ohrozený</strong> a <strong><code>example.js</code> bola zasiahnutá</strong> s hodnotou hash <code>example.js</code> nebude zodpovedať <strong><code>integrita</code> hodnota</strong>. </p> <p>Najčastejšie CDN poskytujú <strong>SRI <code>integrita</code> hodnoty</strong>, ale môžete tu tiež vygenerovať jeden.</p> <h4>3. Prepísať ciele formulára v tlačidlá odosielania</h4> <p>S najväčšou pravdepodobnosťou ste oboznámení s <strong><code>terč</code> atribút</strong>, rozhodne <strong>kde sa otvorí hypertextový odkaz</strong>, napríklad na rovnakej stránke alebo na novej karte. Môžete tiež vedieť, že to isté <code>terč</code> atribút použitý v <code><form></code> značka rozhodne <strong>kde sa zobrazí odpoveď na odoslanie formulára</strong>.</p> <p>V jednom z prvých návrhov HTML5, <code>formtarget</code> bol definovaný spolu so štyrmi ďalšími atribútmi na odoslanie formulára: <strong><code>formaction</code>, <code>formenctype</code>, <code>formmethod</code></strong>, a <strong><code>formnovalidate</code></strong>. </p> <p>Tieto atribúty môžu byť <strong>používané s tlačidlami na odosielanie</strong>, a prepisujú ich príslušné atribúty v <code><form></code> značku, ku ktorej patria tlačidlá.</p> <p>Takže, ak je formulár odoslaný pomocou tlačidla, ktoré má a <code>formtarget</code> atribút, <strong>odpoveď je zobrazená podľa <code>formtarget</code> hodnota</strong>, namiesto <code>terč</code> hodnota <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>Vo vyššie uvedenom kóde, keď je formulár odoslaný pomocou druhého tlačidla na odoslanie (<code>vytlačiť</code> ), odpoveď bude <strong>sa objavia v novom kontexte prehliadania</strong>, ako na novej karte.</p> <h4>4. Skryť prvky sémanticky</h4> <p>Pokiaľ ide o <strong>skryté prvky</strong>, všetci sme prešli rôznymi fázami skrytých prvkov: pomocou <strong><code>Nepriehľadnosť: 0</code>, <code>visibility: hidden</code>, <code>výška: 0; šírka: 0</code>, <code>display: none</code>, <code>text-indent: -999px</code></strong> v našom súbore CSS.</p> <p>Každá metóda má svoj účel, žiadna z nich nie je nadbytočná a tak nie je táto: <strong><code>skrytý</code> Atribút HTML</strong>. Ak má prvok <code>skrytý</code> na ňom bude skryté.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Funguje to <strong>rovnakým spôsobom ako <code>display: none;</code> Pravidlo CSS;</strong> prvok s <code>skrytý</code> atribút <strong>sa nezobrazí</strong> na stránke. Akýkoľvek skript vnútri prvku bude vykonaný, a ak je to kontrola formulára, bude spolu s <strong>iné formy kontroly počas odosielania formulára</strong>.</p> <p>Avšak prospech z <code>skrytý</code> je to tak <strong>sémanticky vhodné</strong>, koniec koncov, HTML5 je všetko o sémantike a <code>skrytý</code> je súčasťou sprievodcu HTML5!</p> <p>Navyše, keď je prvok skrytý, má to byť <strong>skryté vo všetkých platformách</strong>, nielen vo webových prehliadačoch, ale aj v obrazovkách, TV, projektoroch atď.</p> <p>Je to tiež <strong>nie v závislosti od štýlu</strong>, aj keď odstránite autorskú CSS zo stránky, prvok zostane skrytý. Keďže v prípade <code>display: none;</code> to sa nestane. Takže, premýšľaj <code>skrytý</code> ako <strong>ironclad verzia <code>display: none;</code></strong>.</p> <h4>5. Pridanie klávesových skratiek</h4> <p> <strong><code>Prístupový kľúč</code> globálny atribút</strong> bol už definovaný v HTML4 a to <strong>vytvára klávesovú skratku</strong> s ktorými môže používateľ ovládať prvok na stránke.</p> <p>Kombinácia klávesov pre skratku bude <strong>závisí od dvoch vecí</strong>:</p> <ol><li> <strong><code>Prístupový kľúč</code> hodnota</strong> ktoré dávame prvku</li> <li> <strong>priradené kľúče používané prehliadačom</strong> pre ten istý prvok</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>Vezmite si tento príklad:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> vyhliadka </button> </pre> <p>Vo Firefoxe, ak vy <strong>stlačte kombináciu klávesov Alt + Shift + V (alebo Alt + Control + V</strong> v macOS) dostanete upozornenie “Zobraziť kliknuté”.</p> <p>Pretože preddefinované kľúče prehliadača sa líšia s každým prehliadačom a operačným systémom, odporúčame vám <strong>informujte používateľov o kombináciách kľúčov</strong> slúži na skratky.</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> Vlastnosti CSS, ktoré by ste mali vedieť</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 Aplikácií pre iPhone na sledovanie vašich investícií</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 Nástroje na formátovanie a rozdeľovanie pevného disku</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">Ďalší článok</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 Myšlienky Windows 10 by mal kopírovať z Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Predchádzajúci článok</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 prvky, ktoré by ste nemali vedieť, ako používať</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"> Užitočné informácie a tipy na vývoj webových aplikácií. Programovanie, webdesign, CSS, HTML, JAVASCRIPT. Nakonfigurujte a preinštalujte Windows. Tvorba webov a aplikácií od nuly. </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>