5 HTML ypatybės, kurių nežinote

Dėl kalba tokia paprasta ir lengva išmokti, HTML tikrai siūlo netikėta naudingų funkcijų, daugelis jų net nežino. Sunku neatsilikti nuo laiko ir jūs manote, kad viskas “jūs nežinote” Straipsniai turi būti apie naujausius žymenis, HTML taip pat turi kai kuriuos gana naudingos savybės, kurios jau seniai jau yra.

Nuo tikrinimo rašybos prie klaviatūros nuorodų pridėjimo šiame straipsnyje jums bus parodyta penkios mažiau plačiai žinomos HTML funkcijos.

1. Rašydami patikrinkite rašybą

The Rašybos tikrinimas atributas paragina naršykles tikrinti rašybą, kai vartotojas rašo elementą. Šis atributas yra pasaulinis, reikšmingas, galite pridėti jį prie bet kurio HTML žyma.

Tačiau jis veikia tik tuos elementus, kurie gali priimti teksto įvestį. Pasaulio naudingumas yra naudingas, nes jis gali būti paveldėjo vaikų elementai. Pavyzdžiui, pridėkite jį prie a

žyma ir visi jo vaiko elementai, kurie priima tekstą, paveldės šį atributą.

Rašybos tikrinimas veikia visas tekstas tipai: tekstą, Paieška, URL, ir el. Jis taip pat veikia </code>, ir redaguojamų elementų</strong> (elementai su. \ t <code>tenkinamas</code> atributas).</p> <p>Jo vertė gali būti tuščia eilutė, <code>tiesa</code>, arba <code>klaidinga</code>. Tuščia eilutė ir <code>tiesa</code> valia <strong>įgalinti rašybos tikrinimą</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Įveskite kažką čia </p> </pre> <p>Pirmiau pateiktame kode, <strong>tiek <code><div></code> ir <code><p></code> žymės tikrins rašybą</strong> kai vartotojas įveda juos.</p> <p>Jei naudotojas turi <strong>neįgaliųjų rašybos tikrinimas</strong> naršyklės nustatymuose rašyba nebus patikrinta, <strong>net jei <code>Rašybos tikrinimas</code> buvo pridėta</strong>.</p> <h4>2. Būkite saugūs nuo pažeistų CDN išteklių</h4> <p>Tai gana įprasta talpinti išteklius, pvz., Scenarijus ir stiliaus failus <abbr>CDN</abbr>s. Bet, jei <strong>CDN kyla pavojus</strong>, taip ir tiems hosted failams, ir jei jūsų svetainėje atsiranda kokių nors nukreiptų išteklių, tai daro jūsų svetainė!</p> <p>Pažiūrėkite, ką „Mozilla Developer Network“ sako apie problemą:</p> <blockquote><p><q><...> naudojant CDN taip pat kyla rizika, nes jei užpuolikas įgyja CDN valdymą, užpuolikas gali įšvirkšti savavališką turinį į CDN esančius failus (arba visiškai pakeisti failus), taigi taip pat gali potencialiai atakuoti visas svetaines, kurios atsiunčia failus iš to CDN.</q></p></blockquote> <p>Norėdami tai išvengti, <strong>Subresource Integrity (SRI)</strong> „W3C“ pristatė 2014 m. pradžioje. Ši schema <strong>lygina maišos vertę</strong> (rezultatas, naudojant įjungimo funkciją) <strong>išteklių</strong> patvirtinti.</p> <p>Pasakykite, kad yra „JavaScript“ failas <code>https://example.com/example.js</code>. Pirma tu <strong>taikyti maišos funkciją</strong> tada <strong>pridėkite pagamintą maišos vertę</strong> į <strong><code>vientisumą</code> atributas</strong> iš <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>Dabar, kai reikia įkelti savo svetainės tinklalapį su minėtu kodu <code>example.js</code>, naršyklę <strong>pirmiausia taikoma maišos funkcija</strong>, ir apkrovos <code>example.js</code> tik tada, kai jos <strong>maišos vertė atitinka <code>vientisumą</code> vertė</strong>.</p> <p>Jei <strong><code>pavyzdys.lt</code> buvo pažeista</strong> ir <strong><code>example.js</code> buvo trukdoma</strong> tuomet išreiškė maišos vertę <code>example.js</code> neatitiks <strong><code>vientisumą</code> vertė</strong>. </p> <p>Dažniausiai CDN jau yra <strong>SRI <code>vientisumą</code> vertės</strong>, bet čia taip pat galite sukurti vieną.</p> <h4>3. Perkelkite mygtukų siuntimo formos tikslus</h4> <p>Jūs greičiausiai esate susipažinę su <strong><code>tikslą</code> atributas</strong>, tas, kuris nusprendžia <strong>kur atidaromas hipersaitas</strong>, pvz., tame pačiame puslapyje arba naujame skirtuke. Jūs taip pat galite tai žinoti <code>tikslą</code> atributas, naudojamas <code><form></code> žyma nusprendžia <strong>kur pateikiamas atsakymas iš formos pateikimo</strong>.</p> <p>Viename iš ankstesnių HTML5 projektų, <code>formtarget</code> buvo apibrėžta kartu su keturiais kitais formos pateikimo atributais: <strong><code>formavimas</code>, <code>formenctype</code>, <code>formmetodas</code></strong>, ir <strong><code>formnovalidatas</code></strong>. </p> <p>Šie atributai gali būti <strong>naudojamas su mygtukais</strong>, ir jie nepaiso jų atitinkamų atributų <code><form></code> žyma, prie kurios priklauso mygtukai.</p> <p>Taigi, kai forma pateikiama naudojant mygtuką, turintį a <code>formtarget</code> atributas, <strong>atsakymas rodomas pagal <code>formtarget</code> vertė</strong>, vietoj <code>tikslą</code> vertė <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>Pirmiau pateiktame kode, kai forma yra pateikta naudojant antrąjį pateikimo mygtuką (<code>spausdinti</code> ), atsakymas <strong>rodomi naujame naršymo kontekste</strong>, kaip naujame skirtuke.</p> <h4>4. Paslėpti elementus semantiškai</h4> <p>Kai kalbama apie <strong>paslėpti elementai</strong>, mes visi išgyvenome skirtingus slėpimo elementų etapus: naudojant <strong><code>neskaidrumas: 0</code>, <code>matomumas: paslėptas</code>, <code>aukštis: 0; plotis: 0</code>, <code>ekranas: nėra</code>, <code>teksto įtrauka: -999px</code></strong> mūsų CSS faile.</p> <p>Kiekvienas metodas turi savo tikslą, nė vienas iš jų yra nereikalingas, todėl taip nėra <strong><code>paslėpta</code> HTML atributas</strong>. Jei elementas yra <code>paslėpta</code> jis bus paslėptas.</p> <pre name="code"> <div hidden>… </div> </pre> <p>Jis veikia <strong>taip pat kaip ir <code>ekranas: nėra;</code> CSS taisyklė;</strong> elementą su <code>paslėpta</code> atributas <strong>nesuteikia</strong> puslapyje. Bet koks elemento viduje esantis scenarijus bus įvykdytas ir, jei tai yra formos kontrolė, jis bus pateiktas kartu su <strong>kitos formos kontrolė pateikiant formą</strong>.</p> <p>Tačiau naudos <code>paslėpta</code> tai, kad tai <strong>semantiškai tinkamas</strong>, galų gale, HTML5 yra apie semantiką ir <code>paslėpta</code> yra HTML5 įkvėpimo dalis!</p> <p>Be to, kai elementas yra paslėptas, jis turi būti <strong>paslėpta visose platformose</strong>, ne tik žiniatinklio naršyklėse, bet ir ekranuose, televizoriuje, projektoriuose ir kt.</p> <p>Tai taip pat <strong>nepriklauso nuo stiliaus</strong>, net jei nuplėšiate autoriaus CSS iš puslapio, elementas bus paslėptas. Kadangi. \ T <code>ekranas: nėra;</code> tai nebus. Taigi, pagalvokite <code>paslėpta</code> kaip <strong>„Ironclad“ versija <code>ekranas: nėra;</code></strong>.</p> <h4>5. Pridėti sparčiuosius klavišus</h4> <p>The <strong><code>prieigos raktas</code> pasaulinis atributas</strong> buvo apibrėžta HTML4 ir ji <strong>sukuria spartųjį klavišą</strong> su kuriuo naudotojas gali valdyti elementą puslapyje.</p> <p>Spartųjį klavišų kombinaciją <strong>priklauso nuo dviejų dalykų</strong>:</p> <ol><li> <strong><code>prieigos raktas</code> vertė</strong> mes suteikiame elementui</li> <li> <strong>iš anksto priskirti raktai, naudojami naršyklėje</strong> už tą patį elementą</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGE: „Mozilla“ kūrėjų tinklas</figcaption></figure><p>Paimkite šį pavyzdį:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Žiūrėti </button> </pre> <p>„Firefox“, jei jūs <strong>paspauskite klavišų kombinaciją Alt + Shift + V (arba Alt + Control + V</strong> „MacOS“) gausite įspėjimą “Rodinys Spustelėjo”.</p> <p>Kadangi iš anksto nustatyti naršyklės klavišai skiriasi priklausomai nuo kiekvieno naršyklės ir OS, rekomenduojama <strong>leiskite naudotojams žinoti apie raktų derinius</strong> naudojami spartiesiems klavišams.</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 savybės, kurias turėtumėte žinoti</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“ programos, skirtos stebėti jūsų investicijas</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 Kietojo disko formatavimas ir pertvaros įrankiai</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">Kitas straipsnis</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 „Idėjos“ „Windows 10“ turėtų nukopijuoti iš „Mac OS X Yosemite“</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Ankstesnis straipsnis</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 elementai, kurių negalite žinoti, kaip naudoti</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"> Naudinga informacija ir interneto svetainių kūrimo patarimai. Programavimas, interneto dizainas, CSS, HTML, JAVASCRIPT. Konfigūruokite ir iš naujo įdiekite „Windows“. Svetainių ir programų kūrimas nuo nulio. </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>