Мастерство в HTML Скалярных измерениях

Введение

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

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

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Настройте HTML-файл

В этом шаге создайте HTML-файл с именем index.html и добавьте базовую структуру HTML.

<!doctype html>
<html>
  <head>
    <title>HTML Meter Tag Lab</title>
  </head>
  <body></body>
</html>

Добавьте тег в HTML-файл

В этом шаге добавьте тег <meter> в HTML-файл с атрибутами value, max и min.

<meter value="50" min="0" max="100"></meter>

Добавьте метку для тега

В этом шаге добавьте метку для тега <meter>, чтобы обеспечить лучшую доступность.

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100"></meter>

Добавьте нижний предел для тега

В этом шаге добавьте атрибут low, чтобы указать диапазон, который должен рассматриваться как低值。

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30"></meter>

Добавьте верхний предел для тега

В этом шаге добавьте атрибут high, чтобы указать диапазон, который должен рассматриваться как высокое значение.

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30" high="80"></meter>

Добавьте оптимальное значение для тега

В этом шаге добавьте атрибут optimum, чтобы установить оптимальное значение измерительного прибора.

<label for="meter">My Meter:</label>
<meter
  id="meter"
  value="50"
  min="0"
  max="100"
  low="30"
  high="80"
  optimum="50"
></meter>

Завершите HTML-файл

В этом шаге закройте HTML-файл, добавив закрывающий тег для тегов <body> и <html>.

<!doctype html>
<html>
  <head>
    <title>HTML Meter Tag Lab</title>
  </head>
  <body>
    <label for="meter">My Meter:</label>
    <meter
      id="meter"
      value="50"
      min="0"
      max="100"
      low="30"
      high="80"
      optimum="50"
    ></meter>
  </body>
</html>

Резюме

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

HTML Скалярные измерения