这是我一段时间以来一直在苦苦挣扎的问题。标记名称/值对的正确方法是什么？
我喜欢
- 元素，但这带来了一个问题:无法将一对对分开-它们没有唯一的容器。在视觉上，代码缺乏定义。不过从语义上来说，我认为这是正确的标记。
<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的视觉 Angular 来看，这更有意义。设置上述边框的样式很简单。但是，如上所述，语义充其量是模糊的。
有想法，评论，问题吗？
编辑/更新
也许这是我应该在结构上明确提及的内容，但是定义列表也存在不对语义进行分组的问题。
dd和dt之间的排序和隐式边界很容易理解，但是它们对我来说仍然有些许不适。 最佳答案
感谢您提出这个有趣的问题。这里还有几件事要考虑。
什么是一对？两个元素在一起。因此，我们需要一个标签。
假设它是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>
键和值对通常存储在数据库中，而键和值对通常存储表格数据，
所以桌子最适合恕我直言
你怎么看？
关于html - 名称-值对的语义和结构，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3281070/