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

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

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

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Kenmore White 17" Microwave</span>
  <img src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
  <div itemprop="aggregateRating"
    itemscope itemtype="http://schema.org/AggregateRating">
   Rated <span itemprop="ratingValue">3.5</span>/5
   based on <span itemprop="reviewCount">11</span> customer reviews
  </div>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <!--price is 1000, a number, with locale-specific thousands separator
    and decimal mark, and the $ character is marked up with the
    machine-readable code "USD" -->
    <span itemprop="priceCurrency" content="USD">$</span><span
          itemprop="price" content="1000.00">1,000.00</span>
    <link itemprop="availability" href="http://schema.org/InStock" />In stock
  </div>
  Product description:
  <span itemprop="description">0.7 cubic feet countertop microwave.
  Has six preset cooking categories and convenience features like
  Add-A-Minute and Child Lock.</span>
  Customer reviews:
  <div itemprop="review" itemscope itemtype="http://schema.org/Review">
    <span itemprop="name">Not a happy camper</span> -
    by <span itemprop="author">Ellie</span>,
    <meta itemprop="datePublished" content="2011-04-01">April 1, 2011
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
      <meta itemprop="worstRating" content = "1">
      <span itemprop="ratingValue">1</span>/
      <span itemprop="bestRating">5</span>stars
    </div>
    <span itemprop="description">The lamp burned out and now I have to replace
    it. </span>
  </div>
  <div itemprop="review" itemscope itemtype="http://schema.org/Review">
    <span itemprop="name">Value purchase</span> -
    by <span itemprop="author">Lucas</span>,
    <meta itemprop="datePublished" content="2011-03-25">March 25, 2011
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
      <meta itemprop="worstRating" content = "1"/>
      <span itemprop="ratingValue">4</span>/
      <span itemprop="bestRating">5</span>stars
    </div>
    <span itemprop="description">Great microwave for the price. It is small and
    fits in my apartment.</span>
  </div>
  ...
</div>

产品A:$200.00
产品乙：300元

这里不考虑javascript，而考虑HTML，可以用多种方式描述产品和价值，如：

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

200

等等

---

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

其中只有两种方法是切实可行的，只有一种方法允许您将价值与其外观/表示分开表示：

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

这些是可行的：

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

200

这是唯一一个允许您将值与其表示分开表示的值：

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

但是，您还希望包含它的表示，例如：

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

200美元

---

在

span

上使用

value

将是无效的HTML，而使用

title

将使用UI功能来包含数据。

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

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

这些是可行的：

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

200

这是唯一一个允许您将值与其表示分开表示的值：

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

但是，您还希望包含它的表示，例如：

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

200美元

---

在

span

上使用

值

将是无效的HTML，而使用

标题

将使用UI功能来包含数据。

在HTML级别上，价格没有特定的语义含义。具体来说，在第一个示例中，它甚至不是价格，因为您忽略了货币——它只是一个数字。因此，无语义的

就可以了

您似乎在寻找或微数据，特别是模式。这允许您为搜索引擎等提供额外的标记，例如：

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

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Kenmore White 17" Microwave</span>
  <img src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
  <div itemprop="aggregateRating"
    itemscope itemtype="http://schema.org/AggregateRating">
   Rated <span itemprop="ratingValue">3.5</span>/5
   based on <span itemprop="reviewCount">11</span> customer reviews
  </div>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <!--price is 1000, a number, with locale-specific thousands separator
    and decimal mark, and the $ character is marked up with the
    machine-readable code "USD" -->
    <span itemprop="priceCurrency" content="USD">$</span><span
          itemprop="price" content="1000.00">1,000.00</span>
    <link itemprop="availability" href="http://schema.org/InStock" />In stock
  </div>
  Product description:
  <span itemprop="description">0.7 cubic feet countertop microwave.
  Has six preset cooking categories and convenience features like
  Add-A-Minute and Child Lock.</span>
  Customer reviews:
  <div itemprop="review" itemscope itemtype="http://schema.org/Review">
    <span itemprop="name">Not a happy camper</span> -
    by <span itemprop="author">Ellie</span>,
    <meta itemprop="datePublished" content="2011-04-01">April 1, 2011
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
      <meta itemprop="worstRating" content = "1">
      <span itemprop="ratingValue">1</span>/
      <span itemprop="bestRating">5</span>stars
    </div>
    <span itemprop="description">The lamp burned out and now I have to replace
    it. </span>
  </div>
  <div itemprop="review" itemscope itemtype="http://schema.org/Review">
    <span itemprop="name">Value purchase</span> -
    by <span itemprop="author">Lucas</span>,
    <meta itemprop="datePublished" content="2011-03-25">March 25, 2011
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
      <meta itemprop="worstRating" content = "1"/>
      <span itemprop="ratingValue">4</span>/
      <span itemprop="bestRating">5</span>stars
    </div>
    <span itemprop="description">Great microwave for the price. It is small and
    fits in my apartment.</span>
  </div>
  ...
</div>

肯莫尔白色17英寸微波炉
额定值3.5/5
基于11条客户评论
$1,000.00
有现货的
产品说明：
0.7立方英尺台面微波炉。
有六个预设烹饪类别和便利功能，如
添加一分钟和儿童锁。
客户评论：
不是一个快乐的露营者-
作者：Ellie，
2011年4月1日
1/
五星
灯烧坏了，现在我得换新的
信息技术
价值购买-
卢卡斯，
2011年3月25日
4/
五星
价格上很好的微波炉。它又小又好
适合我的公寓。
...

这是向元素引入智能含义的推荐方法，W3C不必将HTML标准与语义含义的每一个微小概念混为一谈

由“大型搜索引擎人员”专门为此目的：

org是谷歌、微软和雅虎的合作项目，旨在 通过创建受支持的结构化数据标记模式来改进web 主要搜索引擎。页面上的标记有助于搜索引擎 了解网页上的信息并提供更丰富的结果 共享标记词汇表使网站管理员更容易决定 标记模式，并从他们的努力中获得最大利益

---

在HTML级别上，价格不具有特定的语义含义。具体来说，在第一个示例中，它甚至不是价格，因为您忽略了货币-它只是一个数字。因此，无语义的

就可以了

您似乎正在查找或微数据，特别是架构。这允许您为搜索引擎等提供额外的标记，例如：

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

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Kenmore White 17" Microwave</span>
  <img src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
  <div itemprop="aggregateRating"
    itemscope itemtype="http://schema.org/AggregateRating">
   Rated <span itemprop="ratingValue">3.5</span>/5
   based on <span itemprop="reviewCount">11</span> customer reviews
  </div>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <!--price is 1000, a number, with locale-specific thousands separator
    and decimal mark, and the $ character is marked up with the
    machine-readable code "USD" -->
    <span itemprop="priceCurrency" content="USD">$</span><span
          itemprop="price" content="1000.00">1,000.00</span>
    <link itemprop="availability" href="http://schema.org/InStock" />In stock
  </div>
  Product description:
  <span itemprop="description">0.7 cubic feet countertop microwave.
  Has six preset cooking categories and convenience features like
  Add-A-Minute and Child Lock.</span>
  Customer reviews:
  <div itemprop="review" itemscope itemtype="http://schema.org/Review">
    <span itemprop="name">Not a happy camper</span> -
    by <span itemprop="author">Ellie</span>,
    <meta itemprop="datePublished" content="2011-04-01">April 1, 2011
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
      <meta itemprop="worstRating" content = "1">
      <span itemprop="ratingValue">1</span>/
      <span itemprop="bestRating">5</span>stars
    </div>
    <span itemprop="description">The lamp burned out and now I have to replace
    it. </span>
  </div>
  <div itemprop="review" itemscope itemtype="http://schema.org/Review">
    <span itemprop="name">Value purchase</span> -
    by <span itemprop="author">Lucas</span>,
    <meta itemprop="datePublished" content="2011-03-25">March 25, 2011
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
      <meta itemprop="worstRating" content = "1"/>
      <span itemprop="ratingValue">4</span>/
      <span itemprop="bestRating">5</span>stars
    </div>
    <span itemprop="description">Great microwave for the price. It is small and
    fits in my apartment.</span>
  </div>
  ...
</div>

肯莫尔白色17英寸微波炉
额定值3.5/5
基于11条客户评论
$1,000.00
有现货的
产品说明：
0.7立方英尺台面微波炉。
有六个预设烹饪类别和便利功能，如
添加一分钟和儿童锁。
客户评论：
不是一个快乐的露营者-
作者：Ellie，
2011年4月1日
1/
五星
灯烧坏了，现在我得换新的
信息技术
价值购买-
卢卡斯，
2011年3月25日
4/
五星
很好的微波炉价格。它又小又小
适合我的公寓。
...

这是向元素引入智能含义的推荐方法，W3C不必将HTML标准与语义含义的每一个微小概念混为一谈

由“大型搜索引擎人员”专门为此目的：

org是谷歌、微软和雅虎的合作项目！到 通过创建受支持的结构化数据标记模式来改进web 主要的搜索引擎。页面标记有助于搜索引擎 了解网页上的信息并提供更丰富的结果。A. 共享标记词汇表使网站管理员更容易决定 标记模式，并从他们的努力中获得最大利益

海事组织“数据价值”。“值”是“数据值”中输入和内容（以及“标题”是图像）的保留属性。“value”是输入和内容的保留属性（“title”是图像的保留属性）