5 Funkce HTML, které byste asi nemohli vědět

Pro jazyk tak jednoduchý a snadno se učí, HTML jistě nabízí nečekané množství užitečných funkcí, z nichž většina z nás ani neví. Je těžké držet krok s dobou a můžete si myslet, že všechno “možná nevíte” články musí být o nejnovějších značkách, HTML má také některé docela užitečné funkce, které jsou již asi na chvíli.

Od kontroly pravopisu po přidávání klávesových zkratek, v tomto článku vám ukážu pět méně známých HTML funkcí.

1. Při psaní zkontrolujte pravopis

Kontrola pravopisu atribut vyzve prohlížeče ke kontrole pravopisu, zatímco uživatel zadává prvek. Tento atribut je globální, což znamená, můžete jej přidat do libovolné značky HTML.

Pracuje však pouze na prvcích, které mohou zadávání textu. Mít to globální je užitečné, protože to může být zděděné dětskými prvky. Například, přidejte ji do

štítek a všechny jeho podřízené prvky, které berou vstup textu, zdědí tento atribut.

Kontrola pravopisu funguje celý text typy: text, Vyhledávání, url, a e-mailem. Pracuje také na </code>, a upravitelné prvky</strong> (prvky s <code>spokojený</code> atribut).</p> <p>Jeho hodnota může být prázdný řetězec, <code>skutečný</code>, nebo <code>Nepravdivé</code>. Prázdný řetězec a <code>skutečný</code> vůle <strong>povolit kontrolu pravopisu</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Sem napište něco </p> </pre> <p>Ve výše uvedeném kódu, <strong>oba <code><div></code> a <code><p></code> tagy zkontrolují pravopis</strong> když do nich uživatel zadává.</p> <p>Pokud má uživatel <strong>zakázána kontrola pravopisu</strong> v nastavení prohlížeče nebude kontrola pravopisu kontrolována, <strong>i kdyby <code>Kontrola pravopisu</code> byl přidán</strong>.</p> <h4>2. Buďte v bezpečí před ohroženými zdroji CDN</h4> <p>To je docela obyčejné k hostitelským prostředkům, takový jako skripty a stylesheet soubory, přes <abbr>CDN</abbr>s. Ale pokud <strong>CDN je ohrožena</strong>, tak dělejte ty hostované soubory, a pokud je na vaší webové stránce ohrožen jakýkoli načtený zdroj, tak i vaše stránky!</p> <p>Podívejte se, co říká Mozilla Developer Network o problému:</p> <blockquote><p><q>… S použitím CDN přichází také riziko, že pokud útočník získá kontrolu nad CDN, může útočník vložit do souborů na CDN libovolný škodlivý obsah (nebo soubory kompletně nahradit), a tak může potenciálně napadnout všechny weby, které načítají soubory z tohoto CDN.</q></p></blockquote> <p>Aby se tomu zabránilo, <strong>Integrita podřízeného zdroje (SRI)</strong> byla zavedena na začátku roku 2014 společností W3C. Toto schéma <strong>porovnává hašovací hodnotu</strong> (výsledek použití hašovací funkce na vstup) <strong>zdroje</strong> ověření.</p> <p>Řekněme, že je zde soubor JavaScript <code>https://example.com/example.js</code>. Nejprve ty <strong>použít hašovací funkci</strong> k tomuto souboru <strong>přidejte vytvořenou hašovací hodnotu</strong> na <strong><code>integrita</code> atribut</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>Nyní, kdykoliv se musí načíst webová stránka vašeho webu s výše uvedeným kódem <code>example.js</code>, prohlížeče <strong>nejprve použije hašovací funkci</strong>, a zatížení a běží <code>example.js</code> jen když je jeho <strong>hash hodnota odpovídá <code>integrita</code> hodnota</strong>.</p> <p>Li <strong><code>example.com</code> byla ohrožena</strong> a <strong><code>example.js</code> byl narušen</strong> s pak hodnotou hash <code>example.js</code> neodpovídá <strong><code>integrita</code> hodnota</strong>. </p> <p>Většina běžných CDN již poskytuje <strong>SRI <code>integrita</code> hodnoty</strong>, ale můžete zde také vygenerovat jeden.</p> <h4>3. Přepíše cíle formuláře v tlačítcích odeslání</h4> <p>S největší pravděpodobností jste obeznámeni s <strong><code>cílová</code> atribut</strong>, ten, který rozhoduje <strong>kde se otevře zdroj hypertextových odkazů</strong>, například na stejné stránce nebo na nové kartě. Můžete také vědět, že to samé <code>cílová</code> atribut použitý v <code><form></code> tag <strong>kde je zobrazena odpověď z formuláře</strong>.</p> <p>V jednom z prvních návrhů HTML5, <code>formtarget</code> byl definován společně se čtyřmi dalšími atributy pro odeslání formuláře: <strong><code>formace</code>, <code>formenctype</code>, <code>formmethod</code></strong>, a <strong><code>formnovalidate</code></strong>. </p> <p>Tyto atributy mohou být <strong>s tlačítky odeslání</strong>, a převažují nad jejich příslušnými atributy v <code><form></code> ke kterému tlačítka patří.</p> <p>Takže, když je formulář odeslán pomocí tlačítka, které má <code>formtarget</code> atribut, <strong>odezva je zobrazena podle <code>formtarget</code> hodnota</strong>, místo <code>cílová</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>Ve výše uvedeném kódu, když je formulář odeslán pomocí druhého odesílacího tlačítka (<code>vytisknout</code> ), odpověď bude <strong>se objeví v novém kontextu procházení</strong>, jako na nové kartě.</p> <h4>4. Sémanticky skrýt prvky</h4> <p>Pokud jde o <strong>skryté prvky</strong>, všichni jsme procházeli různými fázemi skrytých prvků: pomocí <strong><code>opacity: 0</code>, <code>viditelnost: skrytá</code>, <code>výška: 0; šířka: 0</code>, <code>zobrazení: žádné</code>, <code>text-odrážka: -999px</code></strong> v našem souboru CSS.</p> <p>Každá metoda má svůj účel, žádný z nich není nadbytečný, a tak není tento <strong><code>skrytý</code> Atribut HTML</strong>. Pokud má prvek <code>skrytý</code> specifikováno, bude skryto.</p> <pre name="code"> <div hidden>… </div> </pre> <p>Funguje to <strong>stejným způsobem jako <code>displej: žádný;</code> Pravidlo CSS;</strong> prvek s <code>skrytý</code> atribut <strong>není vykreslen</strong> na stránce. Bude proveden jakýkoliv skript uvnitř elementu a pokud je to kontrola formuláře, bude odeslána spolu s ním <strong>jiných formulářových kontrol během podávání formuláře</strong>.</p> <p>Přínos <code>skrytý</code> je to <strong>sémanticky vhodné</strong>, HTML5 je koneckonců o sémantice a <code>skrytý</code> je součástí HTML5 doprovodu!</p> <p>Navíc, když je prvek skryt, má to být <strong>skryté ve všech platformách</strong>, a to nejen ve webových prohlížečích, ale i ve screenreaderech, TV, projektorech atd.</p> <p>Je to také <strong>není závislá na stylu</strong>, i když odstraníte CSS autora ze stránky, prvek zůstane skrytý. Vzhledem k tomu, že v případě <code>displej: žádný;</code> to se nestane. Přemýšlejte o tom <code>skrytý</code> jako <strong>železná verze <code>displej: žádný;</code></strong>.</p> <h4>5. Přidejte klávesové zkratky</h4> <p> <strong><code>přístupový klíč</code> globální atribut</strong> byl již definován v HTML4 a to <strong>vytvoří klávesovou zkratku</strong> s nímž může uživatel ovládat prvek na stránce.</p> <p>Kombinace kláves pro zkratku bude <strong>závisí na dvou věcech</strong>:</p> <ol><li> <strong><code>přístupový klíč</code> hodnota</strong> které dáváme elementu</li> <li> <strong>předdefinované klíče používané prohlížečem</strong> pro stejný prvek</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGE: Síť Mozilla Developer Network</figcaption></figure><p>Vezměte si tento příklad:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Pohled </button> </pre> <p>Ve Firefoxu, pokud ano <strong>stiskněte kombinaci kláves Alt + Shift + V (nebo Alt + Control + V</strong> v macOS) dostanete výstrahu “Zobrazení Kliknuto”.</p> <p>Vzhledem k tomu, že předdefinované klíče prohlížeče se liší s každým prohlížečem a operačním systémem, doporučujeme vám <strong>nechte uživatele znát kombinace kláves</strong> pro zkratky.</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 Vlastnosti, které byste měli vědět</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 ke sledování vašich investic</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 pro formátování a dělení 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">Další článek</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š Windows 10 by měl kopírovat z Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Předchozí článek</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 prvků, které byste možná nevěděli, jak používat</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žitečné informace a tipy pro vývoj webových aplikací. Programování, webdesign, CSS, HTML, JAVASCRIPT. Nakonfigurujte a znovu nainstalujte Windows. Vytváření webů a aplikací 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>