HTML-тег <meter>

HTML-тег <meter> используется для представления скалярного измерения в известном диапазоне или дробного значения. Он обычно применяется для отображения таких значений, как использование диска, уровень заряда батареи или ход выполнения задачи, диапазон значений которых предопределен.

Тег <meter> обеспечивает визуальное представление значения и может включать дополнительную информацию, такую как минимальный, максимальный и оптимальный диапазон измерения.

Базовый синтаксис HTML-тега <meter>

Базовая структура тега <meter> следующая:

<meter value="current" min="minimum" max="maximum">Fallback Text</meter>

Атрибут value указывает текущее измерение, а атрибуты min и max определяют диапазон.

Атрибуты HTML-тега <meter>

значение: указывает текущее значение измерения.
мин: определяет минимальное значение диапазона(по умолчанию 0).
макс.: определяет максимальное значение диапазона(по умолчанию 1).
низкий: указывает нижнюю границу «низкого» диапазона, где значение считается ниже среднего.
высокий: указывает верхнюю границу «высокого» диапазона, где значение считается выше среднего.
оптимум: определяет оптимальное значение или диапазон для измерения.
Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .

Базовый пример HTML-тега <meter>

Вот простой пример счетчика, отображающего использование диска:

<!DOCTYPE html>
<html>
    <body>
        <h2>Disk Usage</h2>
        <p>Disk space used: <meter value="70" min="0" max="100">70%</meter></p>
    </body>
</html>

Пояснение: счетчик показывает, что использовано 70% дискового пространства в диапазоне от 0 до 100.

Пример с низким, высоким и оптимальным значениями

Атрибуты low , high и optimum могут предоставить дополнительный контекст для значения:

<!DOCTYPE html>
<html>
    <body>
        <h2>Battery Level</h2>
        <p>Battery status: <meter value="50" min="0" max="100" low="20" high="80" optimum="100">50%</meter></p>
    </body>
</html>

Пример с низким, высоким и оптимальным значениями

Пояснение: Текущий уровень заряда батареи составляет 50%. Значения ниже 20% считаются низкими, значения выше 80% — высокими, а 100% — оптимальными.

Оформление тега <meter> с помощью CSS

Вы можете настроить внешний вид счетчика с помощью CSS:

<!DOCTYPE html>
<html>
    <head>
        <style>
            meter {
                width: 100%;
                height: 20px;
                border: 1px solid #ccc;
                background: #f9f9f9;
            }
        </style>
    </head>
    <body>
        <h2>Progress Status</h2>
        <p>Task progress: <meter value="45" min="0" max="100">45%</meter></p>
    </body>
</html>

Результат: счетчик отображается в измененном стиле с индивидуальным размером, границей и цветом фона, что улучшает его визуальную привлекательность.

Практическое применение тега <meter>

Отслеживание прогресса: отображение прогресса выполнения задач, загрузок или достижений в рамках заранее определенного диапазона.
Мониторинг ресурсов: отображение использования диска, потребления памяти или скорости сети.
Показатели производительности: визуальное представление контрольных показателей или оценок.
Индикаторы заряда батареи: отображают уровень заряда батареи устройств или приложений.