名称 – 值对的语义和结构
这是我一直在苦苦挣扎的一个问题。 什么是标记名称/值对的正确方法？
我喜欢<dl>元素，但是它提出了一个问题：没有办法将一对与另一个分开 – 它们没有独特的容器。 在视觉上，代码缺乏定义。 但从语义上讲，我认为这是正确的标记。
<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之间的sorting和隐含的边界很容易被理解，但是他们仍然感觉有点偏离我。
感谢这个有趣的问题。 这里还有几件事要考虑。
什么是一对？ 两个元素在一起。 所以我们需要一个标签。 假设它是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>
键和值对通常存储在数据库中，而那些通常存储表格数据，所以表格将适合最好的恕我直言。
你怎么看？
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与XHTML 2>增强定义列表
不幸的是，XHTML 2已经死了，HTML5没有di元素
所以，你可以把ul > li与dl > dt + dd结合起来：
<ul> <li> <dl> <dt>Name</dt> <dd>John</dt> </dl> </li> <li> <dl> <dt>Age</dt> <dd>25</dt> </dl> </li> </ul>
我认为一个定义列表可能是一个坏主意。 在语义上，它们用于定义。 其他键值列表通常会与定义标题和描述有所不同。
一张table是一个要走的路，但是一个无序列表呢？
<ul> <li class="key-value-pair"> <span class="key">foo</span> <span class="value">bar</span> </li> </ul>
这不是我的首选解决scheme，但它是对语义元素的巧妙滥用：
使用一个新的<dl> per <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>
hover时用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>
嗯。 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>
这可能是最好的方法。
在代码和渲染中都很难正确地偏移这些对。 例如，如果我想要，但是每一对都有一个边框，那将是一个问题。
在我之前的其他人已经处理（相当好，我认为）与代码中提供视觉定义的问题。 这留下了渲染和CSS的问题。 这在大多数情况下可以相当有效地完成。 最大的例外是在每个dt / dds集合周围放置一个边界，这当然非常棘手 – 也许不可能可靠地进行devise。
你可以这样做：
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:'→ '; }
哪些适用于键值对，但是如果在一个“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的自动编号function（ counter-increment和counter-reset ）就可以非常方便地使用了： http：// www。 w3.org/TR/CSS2/generate.html#counters
除了<dl>元素，你几乎总结了HTML的所有选项：有限的。
然而，你并没有失去，还剩下一个select：使用可以翻译成HTML的标记语言。 Markdown是一个很好的select。
使用一些降价引擎提供的表扩展，你可以有这样的代码：
| Table header 1 | Table header 2 | ----------------------------------- | some key | some value | | another key | another value |
这意味着您需要一个构build步骤来将Markdown转换为HTML。
这样你可以得到有意义的标记（表格数据）和可维护的代码。
当然，你可以使用HTML自定义元素 。 （ 规格 ）它们是完全有效的HTML5。
不幸的是，浏览器的支持并不是那么好，但是如果我们在处理语义的时候，很less关心浏览器的支持。 🙂
你可以用这样的方式来表示它：
注册您的全新花式元素之后，如下所示：
var XKey = document.registerElement('x-key'); document.body.appendChild(new XKey());
你写这样的标记：
<ul> <li> <x-key>Name</x-key> Value </li> </ul>
HTML自定义元素的唯一条件是他们需要破折号。 当然，你现在可以超级创意…如果你正在build立一个汽车零部件仓库，有零件和序列号列表：
<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>
我确实喜欢Unicron把它们全部放在一行上的想法，但是另一种select是缩进定义名称下面的值：
<dl> <dt>Name</dt> <dd>Value</dd> <dt>Name</dt> <dd>Value</dd> </dl>
这种方式可能会在一个可笑的长定义中更容易一些（尽pipe如果你使用的定义是错误的，那么定义列表毕竟不是你真正想要的）。
至于在屏幕上的渲染，应用于dd的胖底部边距是大量的视觉分离。
如何在每一对之间放置一个空行？
这对长值不需要特殊的处理。
<dl> <dt>Name</dt> <dd>Value</dd> <dt>Name</dt> <dd>Value</dd> <dt>Name</dt> <dd>Value</dd> </dl>
如何使用列表？
sorting：
<ol> <li title="key" value="index">value</li> … </ol>
或者使用<ul>作为无序列表，并跳过value="index"位。
规格 ：
名称 – 值组可以是术语和定义，元数据主题和值，问题和答案或任何其他名称 – 值数据组 。
我假定使用元素<dl> ， <dt>和<dd> 。
