Мастерство в использовании тегов HTML: улучшайте свой веб-контент

Введение

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

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

Настройка HTML-документа

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Data Tag Lab</title>
  </head>
  <body></body>
</html>

Добавление тега

Внутри тега body добавьте тег <data>, чтобы присвоить пользовательскую информацию, которую вы хотите присвоить своим данным, которые вы хотите отобразить.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Data Tag Lab</title>
  </head>
  <body>
    <h1>Product List</h1>
    <ul>
      <li><data value="12345">Product 1</data></li>
      <li><data value="67890">Product 2</data></li>
    </ul>
  </body>
</html>

Использование JavaScript для доступа к пользовательской информации

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Data Tag Lab</title>
  </head>
  <body>
    <h1>Product List</h1>
    <ul>
      <li><data id="prod1" value="12345">Product 1</data></li>
      <li><data id="prod2" value="67890">Product 2</data></li>
    </ul>
    <script>
      // Retrieving custom value of data tag with ID prod1
      var prod1Value = document.getElementById("prod1").getAttribute("value");
      console.log(prod1Value); // Output: 12345
    </script>
  </body>
</html>

Изменение значения тега с использованием JavaScript

Вы также можете изменить значение тега <data> с использованием JavaScript. Добавьте еще один блок кода JavaScript ниже первого, чтобы изменить значение тега <data> с идентификатором prod2.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Data Tag Lab</title>
  </head>
  <body>
    <h1>Product List</h1>
    <ul>
      <li><data id="prod1" value="12345">Product 1</data></li>
      <li><data id="prod2" value="67890">Product 2</data></li>
    </ul>
    <script>
      // Retrieving custom value of data tag with ID prod1
      var prod1Value = document.getElementById("prod1").getAttribute("value");
      console.log(prod1Value); // Output: 12345

      // Modifying the value of data tag with ID prod2
      document.getElementById("prod2").setAttribute("value", "24680");
      console.log(document.getElementById("prod2").getAttribute("value")); // Output: 24680
    </script>
  </body>
</html>

Резюме

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

HTML Machine-Readable Data