Saludos, Habr! Les presento la traducción del artículo
"9 trucos HTML extremadamente útiles" de
Klaus .
HTML tiene muchos secretos prácticos que pueden resultarle útiles.
Nativo del autorPero quiero asegurarme de que el sitio funcione en Internet Explorer y otros navegadores.
Utilizo
Endtest para crear pruebas automatizadas y ejecutarlas en una nube entre navegadores.
Netflix usa la misma plataforma para probar sus aplicaciones web.
Las habilidades de Endtest están incluso en la lista de habilidades necesarias para algunas de sus
ofertas de
trabajo .
Endtest tiene algunas características realmente útiles, como:
• Red de navegador cruzado que se ejecuta en computadoras con Windows y MacOS
• Editor sin código para pruebas automáticas.
• Soporte de aplicaciones web
• Soporte para aplicaciones nativas e híbridas para Android e iOS
• Videos ilimitados para ejecutar tus pruebas
• Comparación
capturas de pantalla
• Geolocalización
• si la declaración
• ciclos
• Sube archivos a tus pruebas
• Endtest API, para una fácil integración con su sistema CI / CD
• Declaraciones extendidas
• Pruebas móviles en dispositivos móviles.
• Prueba de correo electrónico con buzón de correo de prueba final
Puedes ver los
documentos .
A continuación hay 9 trucos HTML extremadamente útiles.
1. La etiqueta "figura"Se puede usar para marcar fotos.
El elemento
figura también puede contener
figcaption :
<figure> <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%"> <figcaption>Fig.1 - SWAT Kats</figcaption> </figure>
Y así es como se verá:
Fig. 1 - SWAT Kats
2. La etiqueta "video"Le permite incrustar un reproductor multimedia para la reproducción de video.
Por ejemplo, puede cargar su video en AWS S3 y usar la etiqueta "video" para insertarlo en su sitio web.
Usar YouTube para esto puede parecer poco profesional.
Y Vimeo no le permite insertar sus videos sin pago.
Puede especificar características específicas, como ancho, alto, inicio automático, ciclo, controles, etc.
<video autoplay="" loop="" controls="" width="640" height="480"> <source type="video/mp4" src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4"> </video>
Y así es como se verá:
También puede incrustar transmisiones en vivo usando
getUserMedia () o
WebRTC3. La etiqueta "imagen"Esta etiqueta ayuda a mostrar imágenes en forma pública, mostrando una versión alternativa de la imagen para pequeñas ventanas de visualización.
Debe contener una o más etiquetas
"fuente" y una etiqueta
"img" .
La etiqueta
img solo se usará si el visor no coincide con ninguna de
las etiquetas de
origen o si el navegador no lo admite.
<picture> <source media="(min-width: 968px)" srcset="large_img.jpg"> <source media="(min-width: 360px)" srcset="small_img.jpg"> <img src="default_img.jpg" alt="avatar"> </picture>
4. La etiqueta "progreso"La etiqueta de
progreso muestra el progreso de la tarea.
Esta etiqueta no debe confundirse con la etiqueta
"medidor" (que es un sensor).
<progress value="63" max="100"> </progress>
Así es como se ve:
5. Etiqueta "medidor"Puede usar la etiqueta
"meter" para medir datos en un rango determinado (sensor).
El resultado se puede establecer a través de los valores mínimo y máximo o en porcentaje.
<meter value="2" min="0" max="10">2 out of 10</meter>
<meter value="0.6">60%</meter>
Y aquí están:
6. La etiqueta "mapa"La etiqueta del
mapa se usa para definir un mapa de imagen del cliente.
Un mapa de imagen es una imagen con áreas interactivas.
Todo lo que tiene que hacer es ingresar las coordenadas X e Y en los elementos del
mapa .
Esto significa que crea un mapa de nuestro sistema solar, define un área para cada planeta y redirige a los visitantes a una página separada para cada planeta en el que hicieron clic.
<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth"> <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars"> <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn"> </map>
7. Atributo contentableEste atributo indica si el contenido de un elemento es editable.
<p contenteditable="true">This is an editable paragraph.</p>
8. Sugerencias de entrada <input type="text" list="planets"> <datalist id="planets"> <option value="Mercury"></option> <option value="Venus"></option> <option value="Earth"></option> <option value="Mars"></option> <option value="Jupiter"></option> <option value="Saturn"></option> <option value="Uranus"></option> <option value="Neptune"></option> </datalist>
Espero que no te importe que no agregué una variedad de estilos.
Prefiero diseñar ejemplos a mi gusto, lo más hermosos posible.
9. La etiqueta "noscript"El navegador solo muestra el contenido dentro
del elemento noscript si JavaScript está deshabilitado.
Esto proporciona un mecanismo alternativo para componentes que dejan de funcionar sin JavaScript.
<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>
Creo que es genial que estés buscando trucos HTML, pero ¿estás seguro de que tu aplicación web funciona correctamente en todos los navegadores y dispositivos?
Puede usar
Endtest para crear rápidamente pruebas automatizadas y ejecutarlas en una nube entre navegadores.
Ni siquiera necesitas un código para usarlo.
En serio, solo lea los
documentos .