5 caratteristiche HTML che potresti non conoscere

Per un linguaggio così semplice e facile da imparare, HTML offre sicuramente un quantità inaspettata di funzioni utili, molti dei quali molti di noi non sanno nemmeno. È difficile stare al passo con i tempi e si potrebbe pensare tutto “potresti non saperlo” gli articoli devono riguardare i tag più recenti, anche l'HTML ne ha alcuni funzioni abbastanza utili che sono già in giro per un po '.

Dal controllo ortografico all'aggiunta delle scorciatoie da tastiera, in questo articolo, ti mostrerò cinque caratteristiche HTML meno conosciute.

1. Controlla l'ortografia mentre scrivi

Il controllo ortografico attributo richiede ai browser di controllare le ortografie mentre un utente sta digitando un elemento. Questo attributo è globale, nel senso, puoi aggiungerlo a qualsiasi tag HTML.

Tuttavia, funziona solo su elementi che possono prendere in input il testo. Averlo globale è utile perché può essere ereditato da elementi figlio. Ad esempio, aggiungilo a

etichetta e tutti i suoi elementi figli che accettano l'input del testo erediteranno questo attributo.

Il controllo ortografico funziona tutto il testo tipi: testo, ricerca, url, e e-mail. Funziona anche su </code>, ed elementi modificabili</strong> (elementi con <code>contenteditable</code> attributo).</p> <p>Il suo valore può essere una stringa vuota, <code>vero</code>, o <code>falso</code>. La stringa vuota e <code>vero</code> volontà <strong>abilita il correttore ortografico</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Scrivi qualcosa qui </p> </pre> <p>Nel codice sopra, <strong>entrambi i <code><div></code> e <code><p></code> i tag controlleranno le ortografie</strong> quando un utente sta digitando in loro.</p> <p>Se l'utente ha <strong>controllo ortografico disabilitato</strong> nelle impostazioni del browser l'ortografia non verrà controllata, <strong>anche se <code>controllo ortografico</code> è stato aggiunto</strong>.</p> <h4>2. Essere al sicuro da risorse CDN compromesse</h4> <p>È piuttosto comune ospitare risorse, come script e file di fogli di stile, attraverso <abbr>CDN</abbr>S. Ma, se il <strong>CDN viene compromesso</strong>, così fanno quei file ospitati e se qualche risorsa recuperata è compromessa sul tuo sito web, così fa il tuo sito!</p> <p>Scopri cosa dice Mozilla Developer Network riguardo al problema:</p> <blockquote><p><q>... l'utilizzo di CDN comporta anche un rischio, in quanto se un utente malintenzionato ottiene il controllo di un CDN, l'utente malintenzionato può inserire contenuto malevolo arbitrario in file sul CDN (o sostituire completamente i file) e quindi può anche potenzialmente attaccare tutti i siti che recuperano i file da quel CDN.</q></p></blockquote> <p>Per evitare questo, <strong>Integrità secondaria (SRI)</strong> è stato introdotto all'inizio del 2014 dal W3C. Questo schema <strong>confronta il valore hash</strong> (il risultato dell'applicazione di una funzione hash a un input) <strong>di una risorsa</strong> per convalidarlo.</p> <p>Di ', c'è un file JavaScript su <code>https://example.com/example.js</code>. Prima tu <strong>applica una funzione di hash</strong> a quel file, quindi <strong>aggiungi il valore hash prodotto</strong> al <strong><code>integrità</code> attributo</strong> del <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>Ora, ogni volta che una pagina web del tuo sito con il codice sopra deve essere caricata <code>example.js</code>, il browser <strong>prima applica la funzione hash</strong>, e carichi e corre <code>example.js</code> solo quando è <strong>il valore hash corrisponde al <code>integrità</code> valore</strong>.</p> <p>Se <strong><code>example.com</code> è stato compromesso</strong> e <strong><code>example.js</code> è stato interferito</strong> con quindi il valore hash di <code>example.js</code> non corrisponderà al <strong><code>integrità</code> valore</strong>. </p> <p>I CDN più comuni già forniscono <strong>SRI <code>integrità</code> valori</strong>, ma puoi anche generarne uno qui.</p> <h4>3. Sostituisci i target dei moduli nei pulsanti di invio</h4> <p>Probabilmente hai familiarità con il <strong><code>bersaglio</code> attributo</strong>, quello che decide <strong>dove si apre una risorsa con collegamenti ipertestuali</strong>, per esempio sulla stessa pagina o in una nuova scheda. Potresti anche sapere lo stesso <code>bersaglio</code> attributo usato nel <code><form></code> il tag decide <strong>dove viene mostrata la risposta dall'invio del modulo</strong>.</p> <p>In una delle prime bozze di HTML5, <code>formtarget</code> è stato definito insieme ad altri quattro attributi di invio del modulo: <strong><code>FormAction</code>, <code>formenctype</code>, <code>formmethod</code></strong>, e <strong><code>formnovalidate</code></strong>. </p> <p>Questi attributi possono essere <strong>usato con i pulsanti di invio</strong>, e sovrascrivono i loro rispettivi attributi nel <code><form></code> tag a cui appartengono i pulsanti.</p> <p>Quindi, quando un modulo viene inviato utilizzando un pulsante che ha un <code>formtarget</code> attributo, il <strong>la risposta è mostrata secondo il <code>formtarget</code> valore</strong>, invece del <code>bersaglio</code> valore di <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>Nel codice sopra, quando il modulo viene inviato utilizzando il secondo pulsante di invio (<code>stampare</code> ), la risposta sarà <strong>apparire in un nuovo contesto di navigazione</strong>, come in una nuova scheda.</p> <h4>4. Nascondi gli elementi semanticamente</h4> <p>Quando si tratta di <strong>elementi nascosti</strong>, siamo passati attraverso diverse fasi di elementi nascosti: l'uso <strong><code>Opacità: 0</code>, <code>visibility: hidden</code>, <code>altezza: 0; Larghezza: 0</code>, <code>display: none</code>, <code>text-indent: -999px</code></strong> nel nostro file CSS.</p> <p>Ogni metodo ha il suo scopo, nessuno di questi è ridondante, e quindi non è questo: il <strong><code>nascosto</code> Attributo HTML</strong>. Se un elemento ha <code>nascosto</code> specificato su di esso, sarà nascosto.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Funziona il <strong>allo stesso modo del <code>display: none;</code> Regola CSS;</strong> l'elemento con il <code>nascosto</code> attributo <strong>non viene reso</strong> sulla pagina. Qualsiasi script all'interno dell'elemento verrà eseguito e, se si tratta di un controllo del modulo, verrà inviato insieme a <strong>altri controlli del modulo durante l'invio del modulo</strong>.</p> <p>Tuttavia, il vantaggio di <code>nascosto</code> è così <strong>semanticamente appropriato</strong>, dopotutto, HTML5 è tutto basato sulla semantica e <code>nascosto</code> fa parte dell'entourage HTML5!</p> <p>Inoltre, quando un elemento è nascosto, deve essere <strong>nascosto in tutte le piattaforme</strong>, non solo nei browser Web ma in screen reader, TV, proiettori, ecc.</p> <p>È anche <strong>non dipendente dallo stile</strong>, anche se rimuovi il CSS dell'autore da una pagina, l'elemento rimarrà nascosto. Considerando che nel caso di <code>display: none;</code> quello non accadrà. Quindi, pensa <code>nascosto</code> come il <strong>versione ironca di <code>display: none;</code></strong>.</p> <h4>5. Aggiungi scorciatoie da tastiera</h4> <p>Il <strong><code>chiave di accesso</code> attributo globale</strong> era già definito in HTML4 e <strong>crea una scorciatoia da tastiera</strong> con cui l'utente può gestire un elemento sulla pagina.</p> <p>La combinazione di tasti per una scorciatoia sarà <strong>dipende da due cose</strong>:</p> <ol><li>il <strong><code>chiave di accesso</code> valore</strong> che diamo ad un elemento</li> <li>il <strong>chiavi preassegnate utilizzate da un browser</strong> per lo stesso elemento</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMMAGINE: Mozilla Developer Network</figcaption></figure><p>Prendi questo esempio:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> vista </button> </pre> <p>In Firefox, se tu <strong>premi la combinazione di tasti Alt + Maiusc + V (o Alt + Control + V</strong> in macOS) riceverai l'avviso “Visualizza fatto clic”.</p> <p>Poiché le chiavi del browser predefinite variano a seconda del browser e del sistema operativo, è consigliabile <strong>fai sapere agli utenti le combinazioni di tasti</strong> usato per le scorciatoie.</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à CSS che dovresti sapere</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 app per iPhone per tenere traccia dei tuoi investimenti</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 Utility per la formattazione e la partizione dei dischi rigidi</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">Articolo successivo</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 Idee Windows 10 dovrebbe copiare da Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Articolo precedente</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 elementi HTML che potresti non sapere come usare</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"> Informazioni utili e suggerimenti per lo sviluppo web. Programmazione, web design, CSS, HTML, JAVASCRIPT. Configurare e reinstallare WINDOWS. Creazione di siti e applicazioni da 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>