5 HTML iespējas, par kurām jūs varētu nezināt

Priekš valoda ir tik vienkārša un viegli apgūstama, HTML noteikti piedāvā neparedzētu noderīgu funkciju apjoms, no kuriem daudzi no mums pat nezina. Ir grūti sekot līdzi laikam, un jūs varat domāt, ka viss “jūs, iespējams, nezināt” rakstiem jābūt par jaunākajiem tagiem, HTML ir arī daži diezgan noderīgas funkcijas, kas jau kādu laiku atrodas.

Pārbaudot pareizrakstību un pievienojot tastatūras īsceļus, šajā rakstā es jums parādīšu piecas mazāk plaši pazīstamas HTML funkcijas.

1. Pārbaudot rakstību, pārbaudiet pareizrakstību

The pareizrakstības pārbaude atribūts liek pārlūkprogrammām pārbaudīt pareizrakstību, kamēr lietotājs raksta elementu. Šis atribūts ir globāls, nozīmē, jūs varat pievienot to jebkuram HTML tagam.

Tomēr tas darbojas tikai uz elementiem, kas var veikt teksta ievadi. Tā kā tā ir globāla, tā ir noderīga bērna elementi. Piemēram, pievienojiet to a

tag un visi tā bērna elementi, kas uzņem teksta ievadi, mantos šo atribūtu.

Pareizrakstības pārbaude darbojas visu tekstu veidi: tekstu, Meklēt, URL, un e-pastu. Tas darbojas arī </code>, un rediģējami elementi</strong> (elementi ar <code>apmierinošs</code> atribūts).</p> <p>Tās vērtība var būt tukša virkne, <code>taisnība</code>, vai <code>nepatiesa</code>. Tukša virkne un <code>taisnība</code> gribu <strong>iespējojiet pareizrakstības pārbaudītāju</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Ierakstiet kaut ko šeit </p> </pre> <p>Iepriekš minētajā kodā, <strong>gan <code><div></code> un <code><p></code> tagi pārbaudīs rakstību</strong> kad lietotājs tos raksta.</p> <p>Ja lietotājam ir <strong>invalīdu pareizrakstības pārbaude</strong> pārlūkprogrammas iestatījumos pareizrakstība netiks pārbaudīta, <strong>pat ja <code>pareizrakstības pārbaude</code> tika pievienots</strong>.</p> <h4>2. Esiet droši no CDN resursiem</h4> <p>Tas ir diezgan izplatīti, lai uzņemtu resursus, piemēram, skriptus un stillapu failus <abbr>CDN</abbr>s. Bet, ja <strong>CDN tiek apdraudēta</strong>, tāpēc tie ir izvietotie faili, un, ja jūsu vietnē tiek apdraudēts kāds no iegūtajiem resursiem, tas notiek jūsu vietnē!</p> <p>Skatiet, ko Mozilla Developer Network saka par problēmu:</p> <blockquote><p><q>... izmantojot CDN, ir arī risks, ka, ja uzbrucējs iegūst kontroli pār CDN, uzbrucējs var ievadīt patvaļīgu ļaunprātīgu saturu CDN failos (vai aizstāt failus pilnībā), un tādējādi var potenciāli uzbrukt visām vietnēm, kas ielādē failus no CDN.</q></p></blockquote> <p>Lai to novērstu, <strong>Subresurta integritāte (SRI)</strong> W3C ieviesa 2014. gada sākumā. Šī shēma <strong>salīdzina hash vērtību</strong> (rezultāts, ko ievada hash funkcija) <strong>resursu</strong> to apstiprināt.</p> <p>Saka, ka ir JavaScript fails <code>https://example.com/example.js</code>. Pirmkārt, jūs <strong>pielietot hash funkciju</strong> uz šo failu <strong>pievienot saražoto hash vērtību</strong> uz <strong><code>integritāti</code> atribūts</strong> no <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>Tagad, kad jūsu vietnes vietnei ar iepriekš minēto kodu ir jāielādē <code>example.js</code>, pārlūku <strong>vispirms izmanto hash funkciju</strong>, un slodzes un braucieni <code>example.js</code> tikai tad, kad tā <strong>hash vērtība atbilst <code>integritāti</code> vērtību</strong>.</p> <p>Ja <strong><code>example.com</code> tika apdraudēta</strong> un <strong><code>example.js</code> tika traucēta</strong> pēc tam ar hash vērtību <code>example.js</code> neatbilst <strong><code>integritāti</code> vērtību</strong>. </p> <p>Visbiežāk CDN jau sniedz <strong>SRI <code>integritāti</code> vērtības</strong>, šeit jūs varat arī radīt vienu.</p> <h4>3. Iesniegt pogas, ignorējot veidlapu mērķus</h4> <p>Jūs, visticamāk, esat iepazinies ar <strong><code>mērķi</code> atribūts</strong>, tas, kurš izlemj <strong>ja tiek atvērts hipersaites resurss</strong>, piemēram, tajā pašā lapā vai jaunā cilnē. Jūs to arī zināt <code>mērķi</code> atribūts, ko izmanto <code><form></code> atzīmē <strong>kur tiek parādīta atbilde no veidlapas iesnieguma</strong>.</p> <p>Vienā no agrākajiem HTML5 projektiem, <code>formtarget</code> tika definēts kopā ar četriem citiem veidlapu iesniegšanas atribūtiem: <strong><code>veidošanās</code>, <code>formenctype</code>, <code>formmethod</code></strong>, un <strong><code>formnovalidāts</code></strong>. </p> <p>Šie atribūti var būt <strong>lieto kopā ar iesniegšanas pogām</strong>, un tie ignorē to attiecīgos atribūtus <code><form></code> atzīme, kurai pieder pogas.</p> <p>Tātad, ja veidlapa tiek iesniegta, izmantojot pogu, kurai ir a <code>formtarget</code> atribūts <strong>atbilde tiek parādīta saskaņā ar <code>formtarget</code> vērtību</strong>, nevis <code>mērķi</code> vērtība <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>Iepriekš minētajā kodā, kad veidlapa ir iesniegta, izmantojot otro pogu (<code>drukāt</code> ), atbilde tiks sniegta <strong>parādās jaunā pārlūkošanas kontekstā</strong>, tāpat kā jaunā cilnē.</p> <h4>4. Slēpt elementus semantiski</h4> <p>Kad runa ir par <strong>slēpjas elementi</strong>, mēs visi gājām cauri dažādiem slēpšanās elementu posmiem: izmantojot <strong><code>dūmainība: 0</code>, <code>redzamība: slēpta</code>, <code>augstums: 0; platums: 0</code>, <code>displejs: nav</code>, <code>teksta ievilkums: -999px</code></strong> mūsu CSS failā.</p> <p>Katrai metodei ir savs mērķis, neviena no tām nav lieka, un tā nav šī <strong><code>slēpta</code> HTML atribūts</strong>. Ja elements ir <code>slēpta</code> tas tiks norādīts, tas tiks paslēpts.</p> <pre name="code"> <div hidden>… </div> </pre> <p>Tas darbojas <strong>tāpat kā <code>displejs: nav;</code> CSS noteikums;</strong> elementu ar <code>slēpta</code> atribūts <strong>nesaņem</strong> lapā. Jebkurš skripts elementa iekšpusē tiks izpildīts, un, ja tas ir veidlapas vadība, tas tiks iesniegts kopā ar <strong>citas formas pārbaudes veidlapas iesniegšanas laikā</strong>.</p> <p>Tomēr ieguvums <code>slēpta</code> tas ir, ka tas ir <strong>semantiski piemērots</strong>, galu galā, HTML5 ir par semantiku un <code>slēpta</code> ir daļa no HTML5 kopienas!</p> <p>Turklāt, ja elements ir paslēpts, tas ir <strong>slēpta visās platformās</strong>, ne tikai tīmekļa pārlūkprogrammās, bet gan ekrānsaudzētājos, TV, projektoros utt.</p> <p>Tas ir arī <strong>nav atkarīgs no stila</strong>, pat tad, ja no lapas tiek noņemta autora CSS, elements paliks slēpts. Tā kā. \ T <code>displejs: nav;</code> tas nenotiks. Tātad, domāju <code>slēpta</code> kā <strong>gluda versija <code>displejs: nav;</code></strong>.</p> <h4>5. Pievienojiet tastatūras īsceļus</h4> <p>The <strong><code>piekļuves taustiņš</code> globālais atribūts</strong> jau bija definēts HTML4 un tajā <strong>izveido tastatūras īsceļu</strong> ar kuru lietotājs var darbināt elementu lapā.</p> <p>Īsceļu kombinācija <strong>atkarīgas no divām lietām</strong>:</p> <ol><li>the <strong><code>piekļuves taustiņš</code> vērtību</strong> ko mēs piešķiram elementam</li> <li>the <strong>pārlūkprogrammas izmantotās iepriekš piešķirtās atslēgas</strong> par to pašu elementu</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>Izmantojiet šo piemēru:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Skatīt </button> </pre> <p>Firefox, ja jūs <strong>nospiediet taustiņu kombināciju Alt + Shift + V (vai Alt + Control + V</strong> jūs saņemsiet brīdinājumu “Skats noklikšķināts”.</p> <p>Tā kā iepriekš definētie pārlūka taustiņi atšķiras atkarībā no katras pārlūkprogrammas un operētājsistēmas, ieteicams <strong>ļaujiet lietotājiem uzzināt par taustiņu kombinācijām</strong> izmanto īsceļiem.</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 īpašības, kas jums jāzina</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 lietotnes, lai sekotu jūsu ieguldījumiem</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 Cietā diska formatēšana un nodalīšanas utilītas</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">Nākamais raksts</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 Idejas Windows 10 vajadzētu kopēt no Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Iepriekšējais raksts</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, kurus jūs nezināt, kā lietot</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"> Noderīga informācija un tīmekļa attīstības padomi. Programmēšana, web dizains, CSS, HTML, JAVASCRIPT. Konfigurējiet un atkārtoti instalējiet Windows. Vietņu un lietojumprogrammu izveide no nulles. </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>