javascript - 在 span/div 标签中表示值的最佳/正确方法是什么？

Question

假设我需要在 html 中跟踪一个值(产品价格)，以便在 javascript 中使用它。例如:

Product A: $<span>200.00</span>
Product B: $<span>300.00</span>

这里不考虑 javascript，而是 HTML，可以用多种方式描述产品和值(value)，例如:

<span>200</span>
<span value="200"></span>
<span data-value="200"></span>
<span title="200"></span>

等...

表示产品值(value)的更好且语义正确的方法是什么？

Answer 1

其中只有两个是真正可行的，并且只有一个可以让您将值与其外观/表示分开表示:

这些是可行的:

<span>200</span>
<span data-value="200"></span>

这是唯一可以让您将值与其表示分开表示的方法:

<span data-value="200"></span>

但是您还想包含它的表示，例如:

<span data-value="200">$200</span>

在 span 上使用 value 将是无效的 HTML，而使用 title 将使用 UI 功能来包含数据。