5 HTML značajke o kojima možda ne znate

Za jezik tako jednostavan i lak za učenje, HTML sigurno nudi neočekivana količina korisnih značajki, mnogi od kojih većina nas uopće ne zna. Teško je držati korak s vremenom i možda mislite sve to “možda ne znate” članci moraju biti o najnovijim oznakama, HTML također ima neke vrlo korisne značajke koje već postoje neko vrijeme.

Od provjere pravopisa do dodavanja tipkovnih prečaca, u ovom članku pokazat ću vam pet manje poznatih HTML značajki.

1. Provjerite pravopis dok pišete

Provjera pravopisa atribut traži od preglednika provjeru pravopisa dok korisnik upisuje element. Ovaj atribut je globalni, što znači, možete ga dodati u bilo koju HTML oznaku.

Međutim, radi samo na elementima koji mogu unos teksta. Imati ga globalno je korisno jer može biti naslijedili dječji elementi. Na primjer, dodajte ga u

označiti i svi njegovi podređeni elementi koji uzimaju unos teksta će naslijediti ovaj atribut.

Provjera pravopisa radi cijeli tekst vrste: tekst, traži, uRL, i e. Također radi </code>, i elemente koji se mogu uređivati</strong> (elementi s <code>contenteditable</code> atribut).</p> <p>Njegova vrijednost može biti prazan niz, <code>pravi</code>, ili <code>lažan</code>. Prazan niz i <code>pravi</code> htjeti <strong>omogućite provjeru pravopisa</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Upišite nešto ovdje </p> </pre> <p>U gornjem kodu, <strong>oba <code><div></code> i <code><p></code> Oznake će provjeriti pravopis</strong> kada korisnik upisuje u njih.</p> <p>Ako korisnik ima <strong>onemogućena provjera pravopisa</strong> u postavkama preglednika pravopis neće biti provjeren, <strong>čak i ako <code>Provjera pravopisa</code> je dodan</strong>.</p> <h4>2. Budite sigurni od ugroženih CDN resursa</h4> <p>To je prilično uobičajeno za host resurse, kao što su skripte i datoteke stila, putem <abbr>CDN</abbr>a. Ali, ako <strong>CDN postaje kompromitirana</strong>, tako i one hostirane datoteke, a ako je bilo koji dohvaćeni resurs ugrožen na vašoj web-lokaciji, radi i vaša web-lokacija!</p> <p>Pogledajte što vam Mozilla Developer Network kaže o problemu:</p> <blockquote><p><q>... upotreba CDN-a također dolazi s rizikom, jer ako napadač dobije kontrolu nad CDN-om, napadač može ubaciti proizvoljan zlonamjerni sadržaj u datoteke na CDN-u (ili u potpunosti zamijeniti datoteke) i tako može potencijalno napasti sve web-lokacije koje dohvaćaju datoteke od tog CDN-a.</q></p></blockquote> <p>Da biste to spriječili, <strong>Subresource integritet (SRI)</strong> je početkom 2014. uveo W3C. Ova shema <strong>uspoređuje vrijednost raspršivanja</strong> (rezultat primjene hash funkcije na ulaz) <strong>resursa</strong> da biste je potvrdili.</p> <p>Recimo, postoji JavaScript datoteka na <code>https://example.com/example.js</code>. Prvo ti <strong>primijeniti hash funkciju</strong> zatim u tu datoteku <strong>dodajte proizvedenu hash vrijednost</strong> prema <strong><code>integritet</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>Sada, kad god se web-stranica Vašeg web-mjesta s gore navedenim kodom mora učitati <code>example.js</code>, pregledniku <strong>prvo primjenjuje hash funkciju</strong>, i učitava i radi <code>example.js</code> samo kada je <strong>hash vrijednost odgovara <code>integritet</code> vrijednost</strong>.</p> <p>Ako <strong><code>example.com</code> je ugrožena</strong> i <strong><code>example.js</code> ometao</strong> s tada hash vrijednosti od <code>example.js</code> neće odgovarati <strong><code>integritet</code> vrijednost</strong>. </p> <p>Najčešći CDN-ovi već pružaju <strong>SRI <code>integritet</code> vrijednosti</strong>, ali možete i generirati ovdje.</p> <h4>3. Nadjačavanje ciljeva oblika u gumbima za slanje</h4> <p>Vjerojatno ste upoznati s <strong><code>cilj</code> atribut</strong>, onaj koji odlučuje <strong>gdje se otvara resurs s hipervezom</strong>, na primjer na istoj stranici ili na novoj kartici. Isto tako možete znati <code>cilj</code> atribut koji se koristi u <code><form></code> oznaka odlučuje <strong>gdje je prikazan odgovor iz slanja obrasca</strong>.</p> <p>U jednom od ranih nacrta HTML5, <code>formtarget</code> definiran je zajedno s još četiri atributa za slanje obrazaca: <strong><code>formaction</code>, <code>formenctype</code>, <code>formmethod</code></strong>, i <strong><code>formnovalidate</code></strong>. </p> <p>Ti atributi mogu biti <strong>koristi se s gumbima za slanje</strong>, i nadjačavaju svoje atribute u <code><form></code> kojoj pripadaju gumbi.</p> <p>Dakle, kada se obrazac dostavi pomoću gumba koji ima a <code>formtarget</code> atribut, <strong>odgovor je prikazan prema <code>formtarget</code> vrijednost</strong>, umjesto <code>cilj</code> vrijednost <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>U gornjem kodu, kada je obrazac poslan putem drugog gumba za slanje (<code>otisak</code> ), odgovor će <strong>pojavljuju se u novom kontekstu pregledavanja</strong>, kao na novoj kartici.</p> <h4>4. Sakrijte elemente semantički</h4> <p>Kada je u pitanju <strong>skriveni elementi</strong>, svi smo prolazili kroz različite faze skrivanja: korištenje <strong><code>Neprozirnost: 0</code>, <code>visibility: hidden</code>, <code>visina: 0; širina: 0</code>, <code>display: none</code>, <code>text-alineja: -999px</code></strong> u CSS datoteci.</p> <p>Svaka metoda ima svoju svrhu, nitko od njih nije suvišan, pa nije ni ovaj: <strong><code>skriven</code> HTML atribut</strong>. Ako element ima <code>skriven</code> naveden na njemu, bit će skriven.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Ona radi <strong>na isti način kao i <code>display: none;</code> CSS pravilo;</strong> element s <code>skriven</code> atribut <strong>ne dobiva se</strong> na stranici. Svaka skripta unutar elementa bit će izvršena, a ako je to kontrola obrasca, ona će biti poslana zajedno s njim <strong>druge oblike kontrole tijekom slanja obrasca</strong>.</p> <p>Međutim, korist od <code>skriven</code> je da je to <strong>semantički prikladna</strong>, nakon svega, HTML5 je sve o semantici i <code>skriven</code> je dio HTML5 entourage!</p> <p>Štoviše, kada je element skriven, to će biti <strong>skriveno u svim platformama</strong>, ne samo u web preglednicima, nego iu čitačima zaslona, TV-u, projektorima itd.</p> <p>To je također <strong>ne ovisi o stilu</strong>, čak i ako uklonite CSS autora s stranice, element će ostati skriven. Dok u slučaju <code>display: none;</code> to se neće dogoditi. Dakle, zamislite <code>skriven</code> kao <strong>Oštra verzija <code>display: none;</code></strong>.</p> <h4>5. Dodajte tipkovničke prečace</h4> <p> <strong><code>pristupni ključ</code> globalni atribut</strong> već je definiran u HTML4 i <strong>stvara tipkovni prečac</strong> pomoću kojih korisnik može upravljati elementom na stranici.</p> <p>Kombinacija tipki za prečac <strong>ovisi o dvije stvari</strong>:</p> <ol><li> <strong><code>pristupni ključ</code> vrijednost</strong> koje dajemo elementu</li> <li> <strong>unaprijed dodijeljene tipke koje koristi preglednik</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>Uzmite ovaj primjer:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Pogled </button> </pre> <p>U Firefoxu, ako ste <strong>pritisnite kombinaciju tipki Alt + Shift + V (ili Alt + Control + V</strong> u MacOS-u) dobit ćete upozorenje “Prikaz je kliknuo”.</p> <p>Budući da unaprijed definirane tipke preglednika ovise o svakom pregledniku i OS-u, preporuča se <strong>neka korisnici znaju za kombinacije tipki</strong> za prečace.</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 svojstva koja trebate znati</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 pratiti svoje investicije</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 Uslužni programi za formatiranje tvrdih diskova i 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">Sljedeći članak</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 ideja Windows 10 treba kopirati iz Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Prethodni članak</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 elemenata koje ne biste znali koristiti</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"> Korisni podaci i savjeti za web-razvoj. Programiranje, web dizajn, CSS, HTML, JAVASCRIPT. Konfigurirajte i ponovno instalirajte WINDOWS. Izrada web stranica i aplikacija ispočetka. </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>