掌握 HTML 数据标签：提升你的网页内容

介绍

HTML 中的 <data> 标签用于为你希望在网页上显示的某些数据分配自定义信息。例如，如果你有一个列出不同产品的网站，你可以使用 <data> 标签将产品代码添加到此标签中，这些信息对最终用户不可见。本实验将指导你在 HTML 代码中使用 <data> 标签。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 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>

添加 data 标签

在 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> 标签的自定义信息。在你的 HTML 代码下方添加一个 JavaScript 代码块，通过其 ID 访问 <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 修改 <data> 标签的值。在第一个 JavaScript 代码块下方添加另一个代码块，以修改 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>

总结

在本实验中，你学习了如何在 HTML 中使用 <data> 标签为网页上显示的数据分配自定义信息。你还学习了如何使用 JavaScript 访问和修改 <data> 标签的值。<data> 标签是电子商务网站以及其他需要唯一代码或值的项目的实用工具。

HTML 机器可读数据

介绍

设置 HTML 文档

添加 data 标签

使用 JavaScript 访问自定义信息

使用 JavaScript 修改 Data 标签的值

总结