HTML <data>标签

HTML <data>标签用于表示内容中的数值。它是 HTML5 中新增的元素。

用法

<data>标签中的内容表示数值。可以使用value属性来定义数值，也可以将数值作为标签内容进行指定。

示例代码:

<p>今天的访问量是 <data value="100">100</data> 人次</p>

Markdown格式:

今天的访问量是 <data value="100">100</data> 人次

属性

<data>标签有两个属性可用，分别是:

• value：用于定义数值。如果不定义此属性，则元素内容即为数值。
• id：用于选定元素的一个唯一标识符。

示例代码:

<p>网站运行时间：<data id="uptime-days" value="360"></data> 天</p>
<script>
  const uptimeElement = document.getElementById('uptime-days');

  function updateUptime() {
    const uptime = Math.floor((Date.now() - new Date('2022-01-01T00:00:00.000Z')) / (1000 * 60 * 60 * 24));
    uptimeElement.setAttribute('value', uptime);
    uptimeElement.textContent = uptime;
  }

  setInterval(updateUptime, 1000);
</script>

Markdown格式:

网站运行时间：<data id="uptime-days" value="360"></data> 天

<script>
  const uptimeElement = document.getElementById('uptime-days');

  function updateUptime() {
    const uptime = Math.floor((Date.now() - new Date('2022-01-01T00:00:00.000Z')) / (1000 * 60 * 60 * 24));
    uptimeElement.setAttribute('value', uptime);
    uptimeElement.textContent = uptime;
  }

  setInterval(updateUptime, 1000);
</script>

以上代码演示了如何动态更新<data>标签的数值。此处使用了 JavaScript 的 setInterval() 方法来一秒钟更新一次运行时间。

样式

HTML <data>标签的样式可以通过 CSS 进行设置。<data>标签是一个内联元素，可以设置内联样式，也可以使用 CSS 类选择器引用它。

示例代码:

<p>今天的访问量是 <data class="visit" value="100">100</data> 人次</p>
<style>
  .visit {
    color: #f00;
    font-size: 1.5rem;
  }
</style>

Markdown格式:

今天的访问量是 <data class="visit" value="100">100</data> 人次

<style>
  .visit {
    color: #f00;
    font-size: 1.5rem;
  }
</style>

以上代码演示了如何使用 CSS 对<data>标签进行样式设置。此处设置了字体大小为 1.5rem，颜色为红色。