5 caracteristici HTML pe care nu ar trebui să le cunoașteți

Pentru o limbă atât de simplă și ușor de învățat, HTML oferă cu siguranță un cantitate neașteptată de caracteristici utile, dintre care majoritatea dintre noi nici măcar nu știu. Este greu să ții pasul cu vremurile și poți să te gândești la toate acestea “s-ar putea să nu știți” articole trebuie să fie despre cele mai recente tag-uri, HTML, de asemenea, are unele caracteristici destul de utile, care sunt deja în jur pentru un timp.

Din verificarea ortografiei la adăugarea comenzilor rapide de la tastatură, în acest articol vă voi arăta cinci caracteristici HTML mai puțin cunoscute.

1. Verificați ortografia pe măsură ce tastați

verificare a ortografiei atribut solicită browserelor să verifice ortografiile în timp ce un utilizator introduce un element. Acest atribut este global, adică, îl puteți adăuga la orice etichetă HTML.

Cu toate acestea, funcționează doar pe elemente care pot luați introducerea textului. A avea un caracter global este util pentru că poate fi moștenit de elementele copilului. De exemplu, adăugați-o la a

etichetă și toate elementele sale copil care iau intrarea textului vor moșteni acest atribut.

Verificarea ortografică funcționează tot textul tipuri: text, căutare, URL-ul, și e-mail. De asemenea, funcționează </code>, și elemente editabile</strong> (elemente cu <code>contenteditable</code> atribut).</p> <p>Valoarea sa poate fi un șir gol, <code>Adevărat</code>, sau <code>fals</code>. Șirul gol și <code>Adevărat</code> voi <strong>activați verificarea ortografică</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Scrie ceva aici </p> </pre> <p>În codul de mai sus, <strong>amandoua <code><div></code> și <code><p></code> etichetele vor verifica ortografiile</strong> când un utilizator introduce în ele.</p> <p>Dacă utilizatorul are <strong>verificarea ortografică dezactivată</strong> în setările browserului, ortografia nu va fi verificată, <strong>chiar dacă <code>verificare a ortografiei</code> a fost adăugat</strong>.</p> <h4>2. Fiți în siguranță de la resurse CDN compromise</h4> <p>Este destul de comun pentru a găzdui resurse, cum ar fi script-uri și fișiere de stil, prin intermediul <abbr>CDN</abbr>s. Dar, în cazul în care <strong>CDN devine compromis</strong>, astfel încât acele fișiere găzduite, și dacă orice resursă preluată este compromisă pe site-ul dvs., la fel și site-ul dvs.!</p> <p>Vedeți ce spune Mozilla Developer Network despre problema:</p> <blockquote><p><q>... utilizarea CDN-urilor vine și cu un risc, în sensul că, dacă un atacator dobândește controlul asupra unui CDN, atacatorul poate injecta conținut rău intenționat arbitrar în fișierele din CDN (sau poate înlocui fișierele complet) și, prin urmare, poate, de asemenea, ataca toate site-urile care prelucrează fișiere din acel CDN.</q></p></blockquote> <p>Pentru a preveni acest lucru, <strong>Integritatea subesurselor (SRI)</strong> a fost introdus la începutul lui 2014 de către W3C. Această schemă <strong>compară valoarea hash</strong> (rezultatul aplicării unei funcții hash la o intrare) <strong>a unei resurse</strong> pentru ao valida.</p> <p>Spuneți, există un fișier JavaScript la <code>https://example.com/example.js</code>. Tu primul <strong>aplicați o funcție hash</strong> la acel dosar, atunci <strong>adăugați valoarea hash produsă</strong> la <strong><code>integritate</code> atribut</strong> din <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>Acum, ori de câte ori trebuie să încărcați o pagină web a site-ului dvs. cu codul de mai sus <code>example.js</code>, browser-ul <strong>aplică mai întâi funcția hash</strong>, și încarcă și rulează <code>example.js</code> numai atunci când este <strong>valoarea hash corespunde cu <code>integritate</code> valoare</strong>.</p> <p>Dacă <strong><code>example.com</code> a fost compromisă</strong> și <strong><code>example.js</code> a fost interzisă</strong> cu valoarea de hash <code>example.js</code> nu se va potrivi cu <strong><code>integritate</code> valoare</strong>. </p> <p>Cele mai comune CDN-uri oferă deja <strong>SRI <code>integritate</code> valorile</strong>, dar puteți genera și una aici.</p> <h4>3. Depășiți țintele de formare din butoanele de expediere</h4> <p>Probabil sunteți familiarizați cu <strong><code>ţintă</code> atribut</strong>, cel care decide <strong>unde se deschide o resursă hiperlinkată</strong>, de exemplu pe aceeași pagină sau într-o filă nouă. S-ar putea să știți că același lucru <code>ţintă</code> atribut utilizat în <code><form></code> eticheta decide <strong>unde este afișat răspunsul din transmiterea formularului</strong>.</p> <p>Într-unul din primele versiuni ale HTML5, <code>formtarget</code> a fost definit împreună cu alte patru atribute de prezentare a formularului: <strong><code>formaction</code>, <code>formenctype</code>, <code>formmethod</code></strong>, și <strong><code>formnovalidate</code></strong>. </p> <p>Aceste atribute pot fi <strong>utilizat cu butoanele de trimitere</strong>, și ele depășesc atributele lor respective în <code><form></code> eticheta la care aparțin butoanele.</p> <p>Deci, atunci când un formular este trimis folosind un buton care are a <code>formtarget</code> atributul, <strong>răspunsul este arătat în conformitate cu <code>formtarget</code> valoare</strong>, in loc de <code>ţintă</code> valoarea <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>În codul de mai sus, atunci când formularul este trimis utilizând al doilea buton de trimitere (<code>imprimare</code> ), răspunsul va fi <strong>apar într-un nou context de navigare</strong>, ca într-o filă nouă.</p> <h4>4. Ascundeți elementele semantic</h4> <p>Cand vine vorba de <strong>elementele ascunse</strong>, am trecut prin diferite faze ale elementelor ascunse: folosind <strong><code>opacitate: 0</code>, <code>vizibilitate: ascuns</code>, <code>înălțime: 0; lățime: 0</code>, <code>display: none</code>, <code>text-liniuță: -999px</code></strong> în fișierul nostru CSS.</p> <p>Fiecare metodă își are scopul, niciuna dintre ele nu este redundantă, și așa nu este aceasta: <strong><code>ascuns</code> Atributul HTML</strong>. Dacă un element are <code>ascuns</code> specificat pe el, va fi ascuns.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Funcționează <strong>la fel ca și <code>display: none;</code> Regula CSS;</strong> elementul cu <code>ascuns</code> atribut <strong>nu este redat</strong> pe pagină. Orice script din interiorul elementului va fi executat și dacă este vorba de un control al formularului, acesta va fi prezentat împreună cu <strong>alte forme de control în timpul depunerii formularului</strong>.</p> <p>Cu toate acestea, beneficiul <code>ascuns</code> este că este <strong>semantic adecvat</strong>, după toate, HTML5 este vorba despre semantică și <code>ascuns</code> face parte din anturajul HTML5!</p> <p>Mai mult, atunci când un element este ascuns, trebuie să fie <strong>ascunse în toate platformele</strong>, nu numai în browserele web, ci și în ecranare, televizoare, proiectoare etc.</p> <p>Este de asemenea <strong>nu dependente de stil</strong>, chiar dacă eliminați autorul CSS dintr-o pagină, elementul va rămâne ascuns. Întrucât în cazul <code>display: none;</code> că nu se va întâmpla. Deci, gândiți-vă <code>ascuns</code> dupa cum <strong>versiunea <code>display: none;</code></strong>.</p> <h4>5. Adăugați comenzi rapide de la tastatură</h4> <p> <strong><code>cheie de acces</code> atributul global</strong> a fost deja definit în HTML4 și în acesta <strong>creează o comandă rapidă de la tastatură</strong> cu care utilizatorul poate utiliza un element pe pagină.</p> <p>Combinația de taste pentru o comandă rapidă va fi <strong>depinde de două lucruri</strong>:</p> <ol><li> <strong><code>cheie de acces</code> valoare</strong> pe care le acordăm unui element</li> <li> <strong>cheile pre-atribuite utilizate de un browser</strong> pentru același element</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGE: Rețeaua de dezvoltatori Mozilla</figcaption></figure><p>Luați acest exemplu:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Vedere </button> </pre> <p>În Firefox, dacă tu <strong>apăsați combinația de taste Alt + Shift + V (sau Alt + Control + V</strong> în MacOS) veți primi alerta “Vizualizați clicat”.</p> <p>Deoarece tastele predefinite ale browserului variază în funcție de fiecare browser și de sistemul de operare, vă recomandăm <strong>lăsați utilizatorii să cunoască combinațiile de taste</strong> pentru scurtături.</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> Proprietăți CSS pe care trebuie să le cunoașteți</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 pentru a urmări investițiile dvs.</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 Utilitare pentru formatarea și partiționarea hard diskului</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">Articolul următor</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 Idei Windows 10 ar trebui să copieze de la Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Articolul precedent</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 Elemente HTML pe care nu ar trebui să le cunoașteți</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"> Informații utile și sfaturi de dezvoltare web. Programare, design web, CSS, HTML, JAVASCRIPT. Configurați și reinstalați WINDOWS. Crearea site-urilor și aplicațiilor de la zero. </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>