5 características HTML que quizás no conozcas

Para Lenguaje tan simple y fácil de aprender., HTML seguramente ofrece una cantidad inesperada de características útiles, Muchos de los cuales la mayoría de nosotros ni siquiera conocemos. Es difícil mantenerse al día con los tiempos y puedes pensar que todos “usted podría no saber” Los artículos deben ser sobre las etiquetas más recientes, HTML también tiene algunos Características bastante útiles que ya están disponibles por un tiempo..

Desde revisar la ortografía hasta agregar atajos de teclado, en este artículo, te mostraré Cinco características HTML menos conocidas.

1. Revisa la ortografía mientras escribes

los corrector ortográfico atributo solicita a los navegadores que verifiquen la ortografía mientras un usuario escribe un elemento. Este atributo es global, lo que significa, Puedes agregarlo a cualquier etiqueta HTML.

Sin embargo, solo funciona en elementos que pueden tomar entrada de texto. Tenerlo global es útil porque puede ser heredado por elementos hijos. Por ejemplo, agregarlo a un

etiqueta y todos sus elementos secundarios que toman entrada de texto heredarán este atributo.

El corrector ortográfico funciona todo el texto tipos: texto, buscar, url, y correo electrónico. Tambien funciona en </code>, y elementos editables</strong> (elementos con <code>contenteditable</code> atributo).</p> <p>Su valor puede ser una cadena vacía., <code>cierto</code>, o <code>falso</code>. La cadena vacía y <code>cierto</code> será <strong>habilitar el corrector ortográfico</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Escribe algo aquí </p> </pre> <p>En el codigo anterior, <strong>ambos <code><div></code> y <code><p></code> las etiquetas revisarán la ortografía</strong> cuando un usuario está escribiendo en ellos.</p> <p>Si el usuario tiene <strong>deshabilitar la corrección ortográfica</strong> en la configuración del navegador no se verificará la ortografía, <strong>incluso si <code>corrector ortográfico</code> fue añadido</strong>.</p> <h4>2. Estar a salvo de recursos CDN comprometidos</h4> <p>Es bastante común alojar recursos, como scripts y archivos de hojas de estilo, a través de <abbr>CDN</abbr>s. Pero, si el <strong>CDN se ve comprometida</strong>, también lo hacen los archivos alojados, y si algún recurso recuperado se ve comprometido en su sitio web, también lo hace su sitio!</p> <p>Vea lo que dice Mozilla Developer Network sobre el problema:</p> <blockquote><p><q>… El uso de CDN también conlleva un riesgo, ya que si un atacante obtiene el control de un CDN, puede inyectar contenido malintencionado arbitrario en los archivos de la CDN (o reemplazar los archivos por completo) y, por lo tanto, también puede atacar a todos los sitios que obtienen archivos. de ese CDN.</q></p></blockquote> <p>Para prevenir esto, <strong>Integridad del sub-recurso (SRI)</strong> Fue introducido a principios de 2014 por W3C. Este esquema <strong>compara el valor de hash</strong> (el resultado de aplicar una función hash a una entrada) <strong>de un recurso</strong> para validarlo.</p> <p>Por ejemplo, hay un archivo JavaScript en <code>https://example.com/example.js</code>. Primero tú <strong>aplicar una función hash</strong> a ese archivo, entonces <strong>añadir el valor hash producido</strong> al <strong><code>integridad</code> atributo</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>Ahora, cada vez que se cargue una página web de su sitio con el código anterior. <code>example.js</code>, el navegador <strong>primero aplica la función hash</strong>, y cargas y corre <code>example.js</code> solo cuando es <strong>valor hash coincide con el <code>integridad</code> valor</strong>.</p> <p>Si <strong><code>example.com</code> fue comprometido</strong> y <strong><code>example.js</code> fue interferido</strong> con entonces el valor hash de <code>example.js</code> no coincidirá con el <strong><code>integridad</code> valor</strong>. </p> <p>Los CDN más comunes ya proporcionan <strong>SRI <code>integridad</code> valores</strong>, Pero también puedes generar uno aquí..</p> <h4>3. Anular objetivos de formulario en los botones de envío</h4> <p>Probablemente estés familiarizado con el <strong><code>objetivo</code> atributo</strong>, el que decide <strong>donde se abre un recurso hipervinculado</strong>, por ejemplo, en la misma página o en una nueva pestaña. También puede saber que lo mismo <code>objetivo</code> atributo utilizado en el <code><form></code> etiqueta decide <strong>Donde se muestra la respuesta del formulario de presentación.</strong>.</p> <p>En uno de los primeros borradores de HTML5., <code>objetivo de la forma</code> Se definió junto con otros cuatro atributos de envío de formulario: <strong><code>formación</code>, <code>formenctype</code>, <code>método de forma</code></strong>, y <strong><code>formnovalidate</code></strong>. </p> <p>Estos atributos pueden ser <strong>utilizado con botones de envío</strong>, y anulan sus respectivos atributos en el <code><form></code> etiqueta a la que pertenecen los botones.</p> <p>Entonces, cuando se envía un formulario utilizando un botón que tiene un <code>objetivo de la forma</code> atributo, el <strong>La respuesta se muestra de acuerdo a la <code>objetivo de la forma</code> valor</strong>, en vez de <code>objetivo</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>En el código anterior, cuando el formulario se envía con el segundo botón de envío (<code>impresión</code> ), la respuesta será <strong>aparecer en un nuevo contexto de navegación</strong>, como en una nueva pestaña.</p> <h4>4. Ocultar elementos semánticamente.</h4> <p>Cuando se trata de <strong>elementos ocultos</strong>, Todos pasamos por diferentes fases de ocultamiento de elementos: usando <strong><code>opacidad: 0</code>, <code>visibilidad: oculta</code>, <code>altura: 0; ancho: 0</code>, <code>pantalla: ninguna</code>, <code>texto-sangría: -999px</code></strong> en nuestro archivo CSS.</p> <p>Cada método tiene su propósito, ninguno de ellos es redundante, y este no es este: el <strong><code>oculto</code> Atributo HTML</strong>. Si un elemento tiene <code>oculto</code> especificado en él, estará oculto.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Funciona el <strong>igual que el <code>pantalla: ninguna;</code> Regla CSS;</strong> el elemento con el <code>oculto</code> atributo <strong>no se rinde</strong> en la pagina. Se ejecutará cualquier script dentro del elemento, y si se trata de un control de formulario, se enviará junto con <strong>otros controles de formulario durante el envío del formulario</strong>.</p> <p>Sin embargo, el beneficio de <code>oculto</code> es que es <strong>semánticamente apropiado</strong>, Después de todo, HTML5 tiene que ver con la semántica y <code>oculto</code> Es parte de la comitiva HTML5!</p> <p>Además, cuando un elemento está oculto, es para ser <strong>escondido en todas las plataformas</strong>, No solo en navegadores web, sino también en lectores de pantalla, TV, proyectores, etc..</p> <p>Es también <strong>no depende del estilo</strong>, incluso si elimina el CSS del autor de una página, el elemento permanecerá oculto. Considerando que en el caso de <code>pantalla: ninguna;</code> eso no va a pasar Entonces, piensa en <code>oculto</code> como el <strong>versión acorazada de <code>pantalla: ninguna;</code></strong>.</p> <h4>5. Añadir atajos de teclado</h4> <p>los <strong><code>llave de acceso</code> atributo global</strong> Ya estaba definido en HTML4 y <strong>crea un atajo de teclado</strong> Con el que el usuario puede operar un elemento en la página..</p> <p>La combinación de teclas para un atajo será <strong>depende de dos cosas</strong>:</p> <ol><li>la <strong><code>llave de acceso</code> valor</strong> que le damos a un elemento</li> <li>la <strong>teclas pre-asignadas usadas por un navegador</strong> por el mismo elemento</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGEN: Red de Desarrolladores de Mozilla</figcaption></figure><p>Tomemos este ejemplo:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Ver </button> </pre> <p>En Firefox, si <strong>presione la combinación de teclas Alt + Shift + V (o Alt + Control + V</strong> en macOS) obtendrás la alerta “Ver Clicked”.</p> <p>Dado que las claves de navegador predefinidas varían con cada navegador y sistema operativo, se recomienda que <strong>informar a los usuarios de las combinaciones de teclas</strong> utilizado para los atajos.</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> Propiedades CSS que deberías 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 aplicaciones de iPhone para realizar un seguimiento de sus inversiones</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 Utilidades de Formateo y Partición del Disco Duro</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">Siguiente articulo</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 ideas que Windows 10 debería copiar de Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Artículo 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 puede que no sepas 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"> Información útil y consejos de desarrollo web. Programación, diseño web, CSS, HTML, JAVASCRIPT. Configure y reinstale WINDOWS. Creación de sitios y aplicaciones desde cero. </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>