HTML 机器可读数据

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") subgraph Lab Skills html/basic_elems -.-> lab-70730{{"`HTML 机器可读数据`"}} html/head_elems -.-> lab-70730{{"`HTML 机器可读数据`"}} html/charset -.-> lab-70730{{"`HTML 机器可读数据`"}} html/lang_decl -.-> lab-70730{{"`HTML 机器可读数据`"}} html/inter_elems -.-> lab-70730{{"`HTML 机器可读数据`"}} html/custom_attr -.-> lab-70730{{"`HTML 机器可读数据`"}} end

设置 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 教程