5 recursos HTML que você pode não saber sobre

Para linguagem tão simples e fácil de aprender, HTML certamente oferece uma quantidade inesperada de recursos úteis, muitos dos quais a maioria de nós nem sequer conhece. É difícil acompanhar os tempos e você pode pensar que todos “você pode não saber” artigos devem ser sobre as tags mais recentes, o HTML também tem alguns recursos bastante úteis que já estão por aí por um tempo.

Da verificação ortográfica à adição de atalhos de teclado, neste artigo, mostrarei a você cinco recursos HTML menos conhecidos.

1. Verifique a ortografia enquanto digita

o verificação ortográfica atributo solicita que os navegadores verifiquem a ortografia enquanto um usuário está digitando um elemento. Este atributo é global, significando, você pode adicioná-lo a qualquer tag HTML.

No entanto, só funciona em elementos que podem tomar entrada de texto. Ter isso global é útil porque pode ser Herdado por Elementos Filho. Por exemplo, adicione-o a um

tag e todos os seus elementos filho que recebem entrada de texto herdarão esse atributo.

Verificação ortográfica funciona em todo texto tipos: texto, procurar, url, e o email. Também funciona em </code>, e elementos editáveis</strong> (elementos com <code>contenteditable</code> atributo).</p> <p>Seu valor pode ser uma string vazia, <code>verdade</code>, ou <code>falso</code>. A corda vazia e <code>verdade</code> vai <strong>habilitar o verificador ortográfico</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Digite alguma coisa aqui </p> </pre> <p>No código acima, <strong>tanto o <code><div></code> e <code><p></code> tags irá verificar a ortografia</strong> quando um usuário está digitando neles.</p> <p>Se o usuário tiver <strong>verificação ortográfica desativada</strong> nas configurações do navegador, a ortografia não será verificada, <strong>mesmo se <code>verificação ortográfica</code> foi adicionado</strong>.</p> <h4>2. Fique a salvo de recursos CDN comprometidos</h4> <p>É bastante comum hospedar recursos, como scripts e arquivos de folhas de estilo, <abbr>CDN</abbr>s. Mas, se o <strong>CDN fica comprometida</strong>, o mesmo acontece com os arquivos hospedados, e se qualquer recurso buscado for comprometido em seu site, seu site também!</p> <p>Veja o que a Mozilla Developer Network diz sobre o problema:</p> <blockquote><p><q>… Usar CDNs também apresenta um risco, pois se um invasor obtiver o controle de um CDN, o invasor poderá injetar conteúdo malicioso arbitrário em arquivos no CDN (ou substituir os arquivos completamente) e, portanto, também poderá atacar todos os sites que buscam arquivos daquele CDN.</q></p></blockquote> <p>Para evitar isso, <strong>Integridade Sub-recursos (SRI)</strong> foi introduzido no início de 2014 pelo W3C. Este esquema <strong>compara o valor de hash</strong> (o resultado da aplicação de uma função hash a uma entrada) <strong>de um recurso</strong> validar.</p> <p>Diga, há um arquivo JavaScript em <code>https://example.com/example.js</code>. Primeiro você <strong>aplicar uma função hash</strong> para esse arquivo, então <strong>adicione o valor de hash produzido</strong> ao <strong><code>integridade</code> atributo</strong> do <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>Agora, sempre que uma página web do seu site com o código acima tem que carregar <code>example.js</code>, o navegador <strong>aplica primeiro a função hash</strong>, e carrega e corre <code>example.js</code> somente quando a sua <strong>valor de hash corresponde ao <code>integridade</code> valor</strong>.</p> <p>E se <strong><code>example.com</code> foi comprometida</strong> e <strong><code>example.js</code> foi interferido</strong> com então o valor hash de <code>example.js</code> não vai coincidir com o <strong><code>integridade</code> valor</strong>. </p> <p>Os CDNs mais comuns já fornecem <strong>SRI <code>integridade</code> valores</strong>, mas você também pode gerar um aqui.</p> <h4>3. Substituir os destinos de formulário nos botões de envio</h4> <p>Você provavelmente está familiarizado com o <strong><code>alvo</code> atributo</strong>, aquele que decide <strong>onde um recurso com hiperlink é aberto</strong>, por exemplo, na mesma página ou em uma nova guia. Você também pode saber que o mesmo <code>alvo</code> atributo usado no <code><form></code> tag decide <strong>onde a resposta do envio do formulário é mostrada</strong>.</p> <p>Em um dos primeiros rascunhos do HTML5, <code>formtarget</code> foi definido junto com outros quatro atributos de submissão de formulário: <strong><code>formação</code>, <code>formenctype</code>, <code>formmethod</code></strong>, e <strong><code>formnovalidate</code></strong>. </p> <p>Esses atributos podem ser <strong>usado com botões de envio</strong>, e eles substituem seus respectivos atributos no <code><form></code> tag à qual os botões pertencem.</p> <p>Então, quando um formulário é enviado usando um botão que tem um <code>formtarget</code> atributo, o <strong>resposta é mostrada de acordo com o <code>formtarget</code> valor</strong>, ao invés de <code>alvo</code> valor de <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>No código acima, quando o formulário é enviado usando o segundo botão de envio (<code>impressão</code> ), a resposta <strong>aparecem em um novo contexto de navegação</strong>, como em uma nova aba.</p> <h4>4. Ocultar elementos semanticamente</h4> <p>Quando se trata de <strong>escondendo elementos</strong>, todos nós passamos por diferentes fases de esconder elementos: usando <strong><code>opacidade: 0</code>, <code>visibilidade: oculto</code>, <code>altura: 0; largura: 0</code>, <code>Mostrar nenhum</code>, <code>recuo de texto: -999px</code></strong> no nosso arquivo CSS.</p> <p>Cada método tem seu propósito, nenhum deles é redundante e, portanto, não é este: o <strong><code>escondido</code> Atributo HTML</strong>. Se um elemento tiver <code>escondido</code> especificado nele, será escondido.</p> <pre name="code"> <div hidden>… </div> </pre> <p>Trabalha o <strong>mesma maneira que o <code>Mostrar nenhum;</code> Regra de CSS;</strong> o elemento com o <code>escondido</code> atributo <strong>não é processado</strong> na página. Qualquer script dentro do elemento será executado, e se for um controle de formulário, ele será enviado junto com <strong>outros controles de formulário durante o envio do formulário</strong>.</p> <p>No entanto, o benefício de <code>escondido</code> é que é <strong>semanticamente apropriado</strong>, Afinal, HTML5 é tudo sobre semântica e <code>escondido</code> faz parte da comitiva do HTML5!</p> <p>Além disso, quando um elemento é escondido, é para ser <strong>escondido em todas as plataformas</strong>, não apenas em navegadores da web, mas em leitores de tela, TVs, projetores, etc..</p> <p>É também <strong>não depende do estilo</strong>, mesmo se você remover o autor CSS de uma página, o elemento permanecerá oculto. Considerando que, no caso de <code>Mostrar nenhum;</code> isso não vai acontecer. Então, pense em <code>escondido</code> Enquanto o <strong>versão ironclad de <code>Mostrar nenhum;</code></strong>.</p> <h4>5. Adicione atalhos de teclado</h4> <p>o <strong><code>chave de acesso</code> atributo global</strong> já foi definido em HTML4 e <strong>cria um atalho de teclado</strong> com o qual o usuário pode operar um elemento na página.</p> <p>A combinação de teclas para um atalho <strong>depende de duas coisas</strong>:</p> <ol><li>a <strong><code>chave de acesso</code> valor</strong> que nós damos a um elemento</li> <li>a <strong>teclas pré-atribuídas usadas por um navegador</strong> para o mesmo elemento</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGEM: Mozilla Developer Network</figcaption></figure><p>Veja este exemplo:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Visão </button> </pre> <p>No Firefox, se você <strong>pressione a combinação de teclas Alt + Shift + V (ou Alt + Control + V</strong> no macOS) você receberá o alerta “Visualizar clicou”.</p> <p>Como as chaves do navegador predefinidas variam de acordo com cada navegador e sistema operacional, recomenda-se <strong>que os usuários saibam das combinações de teclas</strong> usado para os atalhos.</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> Propriedades do CSS que você deve saber</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 aplicativos para iPhone para acompanhar seus investimentos</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 Utilitários de formatação e particionamento do disco rígido</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">Artigo seguinte</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 ideias que o Windows 10 deve copiar do Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Artigo anterior</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 elementos HTML que você não sabe usar</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ções úteis e dicas de desenvolvimento da web. Programação, web design, CSS, HTML, JAVASCRIPT. Configure e reinstale o WINDOWS. Criação de sites e aplicativos a partir do 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>