javascript - HTML 中应该使用什么标签，没有特殊含义，仅用于携带元数据？

Question

是否有任何无意义的 HTML 标签来携带额外的元数据，例如指定 block /区域的 JavaScript 属性？喜欢:

<div class="item">
   <meaninglesselement data-id="123">
   <meaninglesselement data-type="sometype">
   <meaninglesselement data-validate="true">

   ...
</div>

我知道我可以将 data-* 属性移动到 div class="item" 但我想要一个干净代码的解决方案，即使会有很多参数。

Answer 1

如果它是可能对访问者或机器人有用的整个文档的元数据，您应该使用 meta element .您只能使用 defined或 registered name values (但你可以 register wiki 中的新内容)。

对于您的脚本等只需要的元数据，您可以使用 data-* attributes在现有元素上(例如 body)或者您可以使用 script element :

The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user.

[…]

When used to include data blocks (as opposed to scripts), the data must be embedded inline, the format of the data must be given using the type attribute, the src attribute must not be specified, and the contents of the script element must conform to the requirements defined for the format used.

您可以将此元素放在 head 或 phrasing content 所在的文档正文中(如 span)也可以使用。

有一个用作数据 block (而不是脚本)的信息示例:

 <script type="text/x-game-map">
 ........U.........e
 o............A....e
 .....A.....AAA....e
 .A..AAA...AAAAA...e
 </script>

因此您可以使用 HTML 或 JSON 或您需要的任何格式。

如果您想使用 HTML，它可能 (***) 看起来像:

<div class="item">
  <script type="text/html">
    <div data-id="123"></div>
    <div data-foo="bar"></div>
    <div>foobar</div>
  </script>
</div>

***(I'm not sure 如果它必须是一个“完整的”符合 HTML 文档或者如果“片段”，就像我的例子一样，也是允许的)