Question

这是我一直在努力解决的问题。标记名称/值对的正确方法是什么？

我喜欢＆lt; dl＆gt;元素，但它提出了一个问题：没有办法将一对与另一对分开 - 它们没有唯一的容器。在视觉上，代码缺乏定义。但从语义上讲，我认为这是正确的标记。

<dl>
    <dt>Name</dt>
    <dd>Value</dd>
    <dt>Name</dt>
    <dd>Value</dd>
</dl>

在上面的代码中，很难在视觉上正确地偏移对，无论是代码还是渲染。例如，如果我想，但每个对周围的边框，这将是一个问题。

我们可能会指向表格。可以说，名称 - 值对是表格数据。这似乎对我不正确，但我看到了这个论点。但是，除了位置或添加类名外，HTML不会将名称与值区分开来。

<table>
    <tr>
        <td>Name</td>
        <td>Value</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Value</td>
    </tr>
</table>

从视觉角度来看，这在代码和CSS中都更有意义。设计上述边界是微不足道的。但是，如上所述，语义最多也是模糊的。

思考，评论，问题？

修改/更新 也许这是我应该在结构方面明确提到的，但是定义列表也存在不对语义进行分组的问题。 dd和dt之间的排序和隐含边界很容易理解，但对我来说仍然感觉有些偏差。

Answer 1

感谢您提出这个有趣的问题。这里还有很多事情需要考虑。

什么是一对？两个元素在一起。所以我们需要一个标签。假设它是pair标记。

 <pair></pair>

该对包含密钥和相应的值：

 <pair><key>keyname</key><value>value</value></pair>

然后，我们需要列出对：

<pairlist>
     <pair><key>keyname</key><value>value</value></pair>
     <pair><key>keyname</key><value>value</value></pair>
</pairlist>

接下来要考虑的是对的显示。通常的布局是表格式：

key value
key value

和可选的分隔符，通常是冒号：

key : value
key : value

可以通过CSS轻松添加冒号，但这肯定不适用于IE。

上述案例是理想的案例。但是没有有效的HTML标记可以轻松适应这种情况。

总结一下：

对于键和值的简单情况，

dl在语义上最接近，但很难应用视觉样式（例如，显示内联对或为刚刚悬停的对添加红色边框）。最适合dl的案例是词汇表。但这不是我们讨论的情况。

在这种情况下，我能看到的唯一选择是使用table，如下所示：

<table summary="This are the key and value pairs">
    <caption>Some notes about semantics</caption>
    <thead class="aural if not needed">
        <tr><th scope="col">keys</th><th scope="col">values</th></tr>
    </thead>
    <tbody class="group1">  
        <tr><th scope="row">key1</th><td>value1</td></tr>
        <tr><th scope="row">key2</th><td>value2</td></tr>
    </tbody>
    <tbody class="group2">
        <tr><th scope="row">key3</th><td>value3</td></tr>
        <tr><th scope="row">key4</th><td>value4</td></tr>
    </tbody>
</table>

还有一个：

<ul>
  <li><strong>key</strong> value</li>
  <li><strong>key</strong> value</li>
</ul>

或：

<ul>
  <li><b>key</b> value</li>
  <li><b>key</b> value</li>
</ul>

或者，当钥匙可以链接时：

<ul>
  <li><a href="/key1">key1</a> value</li>
  <li><a href="/key2">key1</a> value</li>
</ul>

键和值对通常存储在数据库中，通常存储表格数据，所以表格最适合恕我直言。

您怎么看？

Answer 2

XHTML 2引入了使用di元素

对术语和定义进行分组的功能

<!-- Do not us this code! -->
<dl>
    <di>
        <dt>Name</dt>
        <dd>John</dd>
    </di>
    <di>
        <dt>Age</dt>
        <dd>25</dd>
    </di>
</dl>

X/HTML 5 vs XHTML 2 > Enhancement To Definitions Lists

不幸的是，XHTML 2已经死了，HTML5没有di元素

因此，您可以将ul > li与dl > dt + dd结合使用：

<ul>    
    <li>
        <dl>
            <dt>Name</dt>
            <dd>John</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>Age</dt>
            <dd>25</dd>
        </dl>
    </li>
</ul>

Answer 3

我认为定义列表可能是一个坏主意。从语义上讲，它们用于定义。其他键值列表通常与定义标题和描述不同。

table是一种方法，但无序列表呢？

<ul>
    <li class="key-value-pair">
        <span class="key">foo</span>
        <span class="value">bar</span>
    </li>
</ul>

Answer 4

这不是我首选的解决方案，但它巧妙地滥用了语义元素：

每<dl> / <dt>对使用新的<dd>：

<div class="terms">
    <dl><dt>Name 1</dt><dd>Value 1</dd></dl>
    <dl><dt>Name 2</dt><dd>Value 2</dd></dl>
</div>

悬停时带有css浮动和红色边框的示例：

dt:after { content:":"; }
dt, dd { float: left; }
dd { margin-left: 5px }
dl { float: left; margin-left: 20px; border: 1px dashed transparent; }
dl:hover { border-color: red; }

<div class="terms">
    <dl>
        <dt>Name 1</dt>
        <dd>Value 1</dd>
    </dl><!-- etc -->
    <dl><dt>Name 2</dt><dd>Value 2</dd></dl>
    <dl><dt>Name 3</dt><dd>Value 3</dd></dl>
    <dl><dt>Name 4</dt><dd>Value 4</dd></dl>
    <dl><dt>Name 5</dt><dd>Value 5</dd></dl>
    <dl><dt>Name 6</dt><dd>Value 6</dd></dl>
</div>

Answer 5

在代码和渲染中，很难在视觉上正确地偏移对。例如，如果我想，但每个对周围的边框，那将是一个问题。

我之前的其他人（我认为很好）处理了在代码中提供视觉定义的问题。这留下了渲染和CSS的问题。在大多数情况下，这可以非常有效地完成。最大的例外是在每组dt / dds周围放置一个边框，这无疑是非常棘手的 - 可能无法可靠地设计风格。

你可以这样做：

dt,dd{ border:solid; }
dt{ margin:10px 0 0 0; border-width:1px 1px 0 1px; }
dd{ margin:0 0 10px 0; border-width:0 1px 1px 1px; padding:0 0 0 10px; }
dd::before{ content:'→ '; }

适用于键值PAIRS，但如果您在一个“set”中有多个dds，则会出现问题：

<dt>Key1</dt>
  <dd>Val1.1</dd>
  <dd>Val1.2</dd>
<dt>Key2</dt>
  <dd>Val2.1</dd>
  <dd>Val2.2</dd>

然而，除了边框样式限制之外，使用CSS做任何其他事情来关联集合（背景，编号等）是很有可能的。这里有一个很好的概述：http://www.maxdesign.com.au/articles/definition/

我认为值得注意的另一点是，如果您希望优化样式定义列表以提供视觉分离 - CSS的自动编号功能（counter-increment和counter-reset）可以派上用场：http://www.w3.org/TR/CSS2/generate.html#counters

Answer 6

当然，你可以使用HTML Custom elements。（spec）他们是完全有效的HTML5。

不幸的是，浏览器支持并不是那么好，但是如果我们处理语义时，我们很少关心浏览器支持等行人事务。： - ）

您可以用这种方式代表它：

注册你的全新花哨元素之后：

var XKey = document.registerElement('x-key');
document.body.appendChild(new XKey());

你写这样的标记：

<ul>
  <li>
    <x-key>Name</x-key>
    Value
  </li>
</ul>

HTML Custom元素的唯一条件是它们需要破折号。当然，你现在可以超级创造......如果你正在建立一个汽车零件仓库，包括零件和序列号列表：

<ul>
  <li>
    <auto-part>
      <serial-number>AQ12345</serial-number>
      <short-description>lorem ipsum dolor...</short-description>
      <list-price>14</list-price>
    </auto-part>
  </li>
</ul>

你不能得到更多的语义！

然而，我有可能走得太远semantic-shangri-la-la（一个真实的地方），可能会想要将它扩展回更通用的东西：

<ul>
  <li class='auto-part' data-serial-number="AQ12345">
      <p class='short-description'>lorem ipsum dolor...</p>
      <p class='list-price'>14</p>
  </li>
</ul>

或许这个（如果我需要设计并在视觉上显示键）

<ul>
  <li class='auto-part'>
      <x-key>AQ12345<//x-key>
      <p class='short-description'>lorem ipsum dolor...</p>
      <p class='list-price'>14</p>
  </li>
</ul>

Answer 7

遵循Alexandr Antonov提供的specification（和further details）：使用dl，dt，dd和{{1} }}

div，dl和dt的组合在语义上对于键值对很好：

dd

为了更轻松地进行样式设置或解析，<dl> <dt>Key1</dt> <dd>Value1</dd> <dt>Key2</dt> <dd>Value2</dd> </dl>可以用作div的子项来对键值对进行分组（并使dl和dt成为孙子dd）：

dl

dl { display: table; } dl > div { display: table-row; } dl > div > dt, dl > div > dd { display: table-cell; border: 1px solid black; padding: 0.25em; } dl > div > dt { font-weight: bold; }

Answer 8

dl {
  display: grid;
  grid-template-columns: auto auto;
}

dd {
  margin: 0
}

<dl>
  <dt>key</dt>
  <dd>value</dd>
  <dt>key</dt>
  <dd>value</dd>
</dl>

我使用了<dl> <dt> <dd>并用网格设置了样式

Answer 9

嗯。 dt / dd听起来最好，可以直观地抵消它们，但我确实认为它比桌子更难。

至于源代码的可读性，将它们放在一行怎么样？

<dl>
    <dt>Name</dt> <dd>Value</dd>
    <dt>Name</dt> <dd>Value</dd>
</dl>

我同意它不是100％完美，但看到你可以使用空格字符进行缩进：

<dl>
    <dt>Property with a looooooooooong name</dt>   <dd>Value</dd>
    <dt>Property with a shrt name</dt>             <dd>Value</dd>
</dl>

这可能是最好的方式。

Answer 10

除了<dl>元素之外，您几乎总结了HTML的所有选项：有限的。

但是你没有迷失，只剩下一个选项：使用可以翻译成HTML的标记语言。 Markdown是一个非常好的选择。

使用某些降价引擎提供的表扩展，您可以使用以下代码：

| Table header 1 | Table header 2 |
-----------------------------------
| some key       | some value     |
| another key    | another value  |

这意味着您需要一个构建步骤来将Markdown转换为HTML。

通过这种方式，您可以获得有意义的标记（表格数据表）和可维护代码。

Answer 11

如何在每对之间放置一个空行？

这不需要对长值进行特殊处理。

<dl> 
    <dt>Name</dt> 
    <dd>Value</dd> 

    <dt>Name</dt> 
    <dd>Value</dd> 

    <dt>Name</dt> 
    <dd>Value</dd> 
</dl>

Answer 12

使用列表怎么样？

序：

<ol>
  <li title="key" value="index">value</li>
  …
</ol>

或者使用<ul>作为无序列表，并跳过value="index"位。

Answer 13

来自spec的行：

名称 - 值组可以是术语和定义，元数据主题和值，问题和答案，也可以是名称 - 值数据的任何其他组。

我假设使用元素<dl>，<dt>和<dd>。

Answer 14

我确实喜欢Unicron将它们全部放在一行上的想法，但另一种选择是将值缩进到定义名称下面：

<dl>
    <dt>Name</dt>
       <dd>Value</dd>
    <dt>Name</dt>
       <dd>Value</dd>
</dl>

这种方式在可笑的长定义中可能会更容易一些（尽管如果你使用了荒谬的错误定义，那么定义列表可能不是你真正想要的那样）。

对于屏幕上的渲染，应用于dd的胖底边距是足够的视觉分离。

名值对的语义和结构

14 个答案: