<data>:資料元素

Baseline 已廣泛支援

此功能已非常成熟,可在多種裝置和瀏覽器版本上使用。自 2017 年 10 月以來,它已在各大瀏覽器中可用。

<data> HTML 元素將給定的內容與機器可讀的翻譯關聯起來。如果內容與時間或日期相關,則必須使用 <time> 元素。

試一試

<p>New Products:</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>
data:hover::after {
  content: " (ID " attr(value) ")";
  font-size: 0.7em;
}

屬性

此元素的屬性包括全域性屬性

value

此屬性指定元素內容的機器可讀翻譯。

示例

下面的示例顯示了產品名稱,同時也為每個名稱關聯了產品編號。

html
<p>New Products</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

結果

技術摘要

內容類別 流式內容語句內容、明顯內容。
允許內容 短語內容.
標籤省略 無,起始標籤和結束標籤都必須存在。
允許父級 任何接受短語內容的元素。
隱式 ARIA 角色 generic
允許的 ARIA 角色 任意
DOM 介面 HTMLDataElement

規範

規範
HTML
# the-data-element

瀏覽器相容性

另見