导航分类

HTML <colgroup> 标签 HTML <datalist> 标签

HTML <data> 标签

主题

默认模式
浅蓝色模式
淡红色模式
深夜模式

定义和用法

<data>标签是HTML5中引入的一个元素，用于将内容与机器可读的翻译关联起来。

<data>标签的主要作用是为其内容提供一个机器可读的值。

<data>元素的基本语法：

<p>我最喜欢的水果是 <data value="fruit_001">苹果</data>。</p>

使用实例

接下来用多种实例演示<data>标签的用法，来深化您对<data>的理解。

1. 为内容提供ID或编码

实例代码运行代码

复制

<ul>
    <li><data value="ISBN978-3-16-148410-0">《JavaScript高级程序设计》</data></li>
    <li><data value="ISBN978-7-115-39710-5">《HTML5权威指南》</data></li>
</ul>

2. 与JavaScript配合使用

实例代码运行代码

复制

<data id="product1" value="P12345">超薄笔记本电脑</data>

<script>
    const productElement = document.getElementById('product1');
    console.log(productElement.value); // 输出: P12345
    console.log(productElement.textContent); // 输出: 超薄笔记本电脑
</script>

全局属性

<data>标签还支持 HTML 中的全局属性。

事件属性

<data>标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示<data>元素：

data {
    display: inline;
    font-style: normal;
    font-weight: normal;
    color: inherit;
    text-decoration: none;
}

注意事项

确保 value 属性是机器可读且有意义的。
不要滥用<data>标签，只在需要关联机器可读值时使用。
如果同时使用<data>的 span 属性和<col>元素，span 属性会被忽略。
对于日期时间，优先使用<time>标签。

浏览器支持


支持	支持	支持	支持	支持

HTML <colgroup> 标签 HTML <datalist> 标签

评论区 0

发表评论

教程介绍

HTML 参考手册涵盖 HTML 元素、属性、事件等详细解析，助您快速检索 HTML 使用方法。

50 章节

46 阅读

0 评论