<imagen>
La estructura es similar a la etiqueta de video con <sources> pero se usa para imágenes. Alguien podría decir: “Espera, ¿no tenemos ya el <img> ?, por qué usaría esto … es inútil”. Ok, no es así y es un poco mejor que la etiqueta <img> si piensas.
¿Cómo se maneja cuando tiene una imagen con dos o más cualidades? Tal vez intente utilizar el renderizado del servidor para detectar el agente de usuario, de modo que le sirva la calidad al dispositivo y a AAAHH. ¿Por qué no solo usamos el elemento Picture ? Así es, con el elemento Picture puede usar consultas de medios para decirle al navegador qué imagen debe mostrar y las otras fuentes serán ignoradas para que las imágenes se puedan cargar más rápido. Si combina Picture con las propiedades clásicas responsivas de CSS, puede lograr las imágenes responsivas reales. Mira el ejemplo y cambia el tamaño para analizar el cambio.
<picture>
<source media = "(max-width: 500px)" srcset = "alt / image.img">
<img src = "ruta / a / image.img">
</picture>
<fieldset>
Así es, HTML viene con un “grupo de formularios” nativo. En mi opinión, a veces es mejor usar esta etiqueta para ahorrar tiempo creando el diseño y en realidad es mejor para SEO. No voy a mentir, es muy feo, pero esa es otra buena noticia porque no te preocupas por posicionar elementos, sino solo por inventarlos.
<fieldset>
<legend> Inicio de sesión: </legend>
Usuario: <input type = "text"> <br>
contraseña: <input type = "password"> <br>
<button> Iniciar sesión </button>
</fieldset>
Bueno, no soy tan creativo con CSS, pero tienes la idea con mi lápiz, espero que seas mejor con CSS que yo.
<progreso>
Hay tantas bibliotecas que vienen con barras de progreso complejas, pero no entiendo por qué esta etiqueta está infrautilizada. Es muy fácil aplicar CSS y si no le importa establecer valores mínimos y máximos, no importa porque se mostrará como una barra de carga indeterminada.
<progress max = 100 value = 13> </progress>
Como puede ver, es bastante fácil de diseñar y manipular el valor con JavaScript . La próxima vez que necesites una barra de progreso, considera a este viejo amigo.
<base>
Esta etiqueta es una de mis favoritas, ayuda más de lo que piensas. Esto ayudará a manejar mejor los enlaces relativos <a> porque solo necesita declarar la URL raíz en la cabeza con <base> y todos los enlaces que están con rutas relativas no tomarán el valor predeterminado sino la URL base que se declaró, el atributo de destino general también se puede reescribir. Lo sé, por defecto, los enlaces relativos se redirigen a la ruta real, pero a veces con contenido dinámico generado esto no es bueno. Las rutas para imágenes o archivos que sean relativos también tomarán el valor predeterminado <base> a menos que proporcione una URL completa; si lo hace, la <base> se ignorará sin problemas.
<base href = ” https://www.example.com/ " target = ”_ blank”>
<a href="a-post.html"> Una publicación </a>
Más etiquetas de entrada
¿Sabía que hay más entradas que solo texto o tipo de contraseña ?, no, tampoco estoy hablando de entrada de correo electrónico. Para llamar a sus poderes solo cambie el atributo type y el navegador hará el trabajo.
Entradas de fecha
Quizás el más conocido de este tipo es [type = date] , pero tenemos entradas más específicas para mes, semana e incluso horas.
<input type = ”date” />
<input type = ”datetime-local” />
<input type = ”month” />
<input type = ”week” />
<input type = ”time” />
Estas entradas devolverán formatos válidos y legibles para la clase Date ().
Selector de color
Debo ser honesto, el estilo del indicador de entrada [type = color] depende en gran medida de su navegador, pero es una solución rápida y limpia para darle al usuario la opción de elegir el color.
<input type = ”color” />
Esta entrada devolverá un valor de número hexadecimal.
Rango
El tipo de entrada de rango es la solución cuando desea darle al usuario la opción de seleccionar un número entre un rango. Una vez que he usar esto para crear un control deslizante de volumen en mi propio reproductor de vídeo, esto hizo el truco mediante el min y max valores que son aceptados. [tipo = rango]
<input type = ”rango” />
Estas entradas en el mundo real se muestran aquí:
<detalles>
Tan simple como eso, una sección oculta conmutable, nativa y personalizable. Con solo hacer clic en la etiqueta <summary> dentro de <details> será suficiente para mostrar todo el contenido oculto. Por cierto, no necesita JavaScript y sí, puede hacerlo más bonito con CSS.
Etiquetas de formato de texto
Hay algunas etiquetas de formato que me gustan, pero no son suficientes para ocupar un lugar completo en mi entrada. Estas son etiquetas que no aplican tanto estilo, pero son importantes para ser coherentes y escribir HTML con mejores prácticas, y encuentran un gran uso en el siguiente lugar.
<marca>
Usar un <span> para rodear el texto y luego dar un color de fondo en realidad es una mala práctica desde la existencia de <mark> , evite usar <span> y comience a usar <mark> cuando necesite resaltar el texto. <mark> viene de forma predeterminada con un marcador clásico de color amarillo, pero responde a las propiedades de color CSS sin ningún problema.
<p>
Lorem ipsum dolor se sienta amet consectetur adipisicing elit. <mark> Dolores temporibus vitae praesentium quaerat </mark> quidem eaque dignissimos corporis dolorum explicabo? ¿Alias?
</p>
<abbr>
Si necesita usar un acrónimo en su texto, esta etiqueta es el chico malo que aceptará el trabajo.
<abbr title = "Do I Eat Today?"> DIET </abbr>
El atributo de título puede ser una buena adición para obtener la información sobre herramientas nativa de lo que significa el acrónimo.
<pre>
El texto preformateado o <pre> para amigos, se utiliza para mostrar el texto tal como está escrito, con todos los espacios, pestañas y caracteres admitidos, el texto se representará exactamente como está formateado en el bloque.
<pre>
/ * Código * /
var json = {
a: 1,
b: 2,
c: 3
}
ejemplo de función () {
console.log ("Hola mundo");
volver verdadero;
}
ejemplo ();
</pre>
Puede dar cierta capacidad de respuesta porque, de forma predeterminada, el elemento no se preocupa por el ancho de su pantalla, pero esto quizás eliminará parte de la magia <pre> .
<hr>
Este no es un texto de formato exactamente, pero funciona bien en el elemento <p> y no es tan importante, así que lo pondré aquí. Se usa como divisor, por defecto tiene un color de contraste con fondo blanco y usa el 100% del ancho principal.
<! - Tan simple como esto: ->
<hr />
Fácil de cambiar el estilo de la propiedad CSS de color de borde . Esta etiqueta es realmente buena.
El uso de todas estas etiquetas de texto se ilustra aquí:
[contento]
Si quieres crear un editor WYSIWYG (Lo que ves es lo que obtienes) en HTML es realmente más fácil de lo que piensas. Solo agregar la propiedad [contenteditable] a su div donde está colocando su editor convertirá automáticamente todo el contenido dentro de escritura para el usuario.
<div contenteditable>
<p> Un texto lorem </p>
</div>
Esto es más poderoso de lo que piensa porque cuando un elemento está en designMode, las funciones execCommand serán utilizables y puede vincularlas a botones para que el usuario pueda resaltar, negrita, cursiva, subrayar, etc. Dentro de su editor personalizado. Algunas bibliotecas de editor como Quilljs (recomendado), TinyMCE (no recomendado para LGPL ) o incluso el editor medio, usan [contenteditable] para crear su base de editores, no usan una < textarea> grande como alguien podría pensar. Cuando llegue el momento de almacenar el contenido en la base de datos, quizás tenga algunos problemas en los que tenga que escapar de los saltos de línea, las comillas o las etiquetas HTML, pero al final realmente vale la pena.
Aquí hay un bolígrafo Quilljs que muestra su editor, no es mío, pero es realmente bueno:
Conclusión
No te olvides de dar y corazones; para todas las etiquetas, incluso si no son tan populares, puede ser una mejor opción que lo que usaría regularmente. Espero que con esta publicación comience a buscar otras propiedades interesantes como patrón , oculto o datos- * y otros elementos semánticos.
Referencia:Yo mismo → https://twitter.com/ImLuyou