HTML 5 introduce dos etiquetas nuevas, a saber, la etiqueta <progress> y la etiqueta < meter> . En este artículo, discutiremos ambas etiquetas.
Etiqueta de progreso : esta etiqueta se utiliza para representar una barra de progreso en la página web para mostrar el progreso de una tarea. Algunos usos de la barra de progreso incluyen mostrar el progreso de carga/descarga de archivos en un sitio web. La barra de progreso se crea usando la siguiente sintaxis.
Sintaxis:
<progress>....</progress>
Atributos: esta etiqueta acepta dos atributos, como se menciona a continuación.
- max: Representa el trabajo total que se debe realizar para completar una tarea.
- valor: Representa la cantidad de trabajo que ya se completó.
Ejemplo: la etiqueta de progreso también se puede diseñar con CSS. Veamos todos estos atributos y el estilo de la barra de progreso con un ejemplo.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Progress tag</title> </head> <body> <p>Normal Progress bar</p> <progress></progress> <p>Progress bar with max and value attributes</p> <progress value="50" max="200"></progress> <p>Progress bar with CSS</p> <progress style="width:200px; height:40px;" ></progress> </body> </html>
Producción:
Etiqueta de medidor: una etiqueta de medidor también se conoce como indicador y básicamente define una escala para la medición de datos dentro de un rango específico. Los usos de una etiqueta de medidor pueden incluir el combustible que queda en el tanque, la temperatura de un objeto, etc. La etiqueta de medidor se escribe de la siguiente manera.
Sintaxis:
<meter>....</meter>
Atributos: esta etiqueta acepta muchos atributos que se enumeran a continuación.
- formulario: Define uno o más formularios a los que pertenece la etiqueta del medidor.
- max: Se utiliza para especificar el valor máximo de un rango.
- min: Se utiliza para especificar el valor mínimo de un rango.
- alto: Se utiliza para especificar el rango que se considera un valor alto.
- bajo: Se utiliza para especificar el valor del rango que se considera a continuación.
- óptimo : Se utiliza para especificar el valor óptimo para el rango.
- valor: Se utiliza para especificar el valor requerido o real del rango.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Meter tag</title> </head> <body> <p>Normal Meter</p> <meter value="0.6"></meter> <p>Meter tag with attributes</p> <meter value="50" max="200" min="20"></meter> <p>Meter tag with CSS</p> <meter value="0.4" style="width:200px; height:40px;"></meter> </body> </html>
Producción:
Etiqueta de medidor
Nota: Si no especificamos el atributo de valor de la etiqueta <meter>, se mostrará un medidor vacío.
Navegadores compatibles:
- Google Chrome
- Borde de Microsoft
- Mozilla Firefox
- Safari
- Ópera
- explorador de Internet