Html 名称-值对的语义和结构
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3281070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Semantics and Structure of Name-Value Pairs
提问by Ryan Kinal
This is a question I have been struggling with for a while. What is the proper way to mark up name/value pairs?
这是我一直在努力解决的问题。标记名称/值对的正确方法是什么？
I'm fond of the <dl> element, but it presents a problem: There is no way to separate one pair from another - they have no unique container. Visually, the code lacks definition. Semantically, though, I think this is the correct markup.
我喜欢 <dl> 元素，但它带来了一个问题：无法将一对与另一对分开 - 它们没有唯一的容器。从视觉上看，代码缺乏定义。不过，从语义上讲，我认为这是正确的标记。
<dl>
<dt>Name</dt>
<dd>Value</dd>
<dt>Name</dt>
<dd>Value</dd>
</dl>
In the above code, it is difficult to properly offset the pairs visually, both in code and rendered. If I wanted to, for instance, but a border around each pair, that would be a problem.
在上面的代码中，无论是在代码中还是在渲染中，都很难在视觉上正确地偏移对。例如，如果我想要，但每对周围都有一个边界，那将是一个问题。
We may point to tables. It could be argued that name-value pairs are tabular data. That seems incorrect to me, but I see the argument. However, the HTML does not differentiate the name from the value, except in position, or with the addition of class names.
我们可以指向表格。可以说名称-值对是表格数据。这对我来说似乎不正确，但我看到了论点。但是，HTML 不区分名称和值，除了位置或添加类名称。
<table>
<tr>
<td>Name</td>
<td>Value</td>
</tr>
<tr>
<td>Name</td>
<td>Value</td>
</tr>
</table>
This makes much more sense from a visual standpoint, both in code and in CSS. Styling the aforementioned border is trivial. However, as mentioned above, the semantics are fuzzy at best.
从视觉角度来看，这在代码和 CSS 中都更有意义。设计上述边框是微不足道的。然而，如上所述，语义充其量是模糊的。
Thoughts, comments, questions?
想法，评论，问题？
Edit/UpdatePerhaps this was something I should have explicitly mentioned in relation to structure, but a definition list also has the problem of not semantically grouping the pairs. The ordering and implicit border between a ddand a dtis easily understood, but they still feel slightly off to me.
编辑/更新也许这是我应该明确提及的与结构相关的内容，但是定义列表也存在不能在语义上对这些对进行分组的问题。add和 a之间的顺序和隐含边界dt很容易理解，但我仍然觉得它们有点不对劲。
采纳答案by takeshin
Thanks for this interesting question. There are few more things to consider here.
感谢这个有趣的问题。这里还有几件事需要考虑。
What is a pair? Two elements together. So we need a tag for this.
Let's say it is pairtag.
什么是一对？两个元素在一起。所以我们需要一个标签。假设它是pair标签。
<pair></pair>
The pair contains the key, and the corresponding value:
该对包含键和相应的值：
<pair><key>keyname</key><value>value</value></pair>
Then, we need to list the pairs:
然后，我们需要列出对：
<pairlist>
<pair><key>keyname</key><value>value</value></pair>
<pair><key>keyname</key><value>value</value></pair>
</pairlist>
The next thing to consider, is the display of the pairs. The usual layout is the tabular one:
接下来要考虑的是对的显示。通常的布局是表格布局：
key value
key value
and the optional separator, which is usually colon:
和可选的分隔符，通常是冒号：
key : value
key : value
The colons can be easily added via CSS, but this certainly won't work in IE.
可以通过 CSS 轻松添加冒号，但这在 IE 中肯定不起作用。
Case described above is the ideal one. But there is no valid HTML markup to fit in this easily.
上述案例是理想的案例。但是没有有效的 HTML 标记可以轻松地适应这种情况。
To sum up:
总结：
dlis semantically closest, for simple cases of key and value, but is hard to apply visual styles
(eg. to display the pairs inline or to add red border to just hovered pair). The case which fits most for dlis glossary. But this is not the case we discuss.
dl在语义上最接近，对于键和值的简单情况，但很难应用视觉样式（例如，内联显示对或向刚刚悬停的对添加红色边框）。最适合的案例dl是词汇表。但我们讨论的情况并非如此。
The only alternative I can see in this case is to use table, like this:
在这种情况下，我能看到的唯一替代方法是使用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>
One more:
多一个：
<ul>
<li><strong>key</strong> value</li>
<li><strong>key</strong> value</li>
</ul>
or:
或者：
<ul>
<li><b>key</b> value</li>
<li><b>key</b> value</li>
</ul>
or, when the keys may be linked:
或者，当可以链接密钥时：
<ul>
<li><a href="/key1">key1</a> value</li>
<li><a href="/key2">key1</a> value</li>
</ul>
The key and value pairs are usually stored in database, and those usually store tabular data, so the table would fit best IMHO.
键值对通常存储在数据库中，而那些通常存储表格数据，因此该表最适合恕我直言。
What do you think?
你怎么认为？
回答by Danny Lin
Following the specification(and further details) provided by Alexandr Antonov: use dl, dt, dd, and optionally div.
继规范（和进一步的细节由亚历山大安东诺夫提供）：使用dl，dt，dd，和任选的div。
A combination of dl, dt, and ddis semantically fine for key-value pairs:
dl, dt, 和 的组合dd对于键值对在语义上很好：
<dl>
<dt>Key1</dt>
<dd>Value1</dd>
<dt>Key2</dt>
<dd>Value2</dd>
</dl>For easier styling or parsing, divs can be used as children of dlto group the key-value pairs (and makes dtand ddbe grandchildren of dl):
为了更容易的样式或解析，divs 可以用作 的子项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; }<dl>
<div>
<dt>Key1</dt>
<dd>Value1</dd>
</div>
<div>
<dt>Key2</dt>
<dd>Value2</dd>
</div>
</dl>回答by Yukulélé
XHTML 2 introduces the ability to group terms and definitions using the dielement
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
Unfortunately though, XHTML 2 is dead and HTML5 doesn't have dielement
不幸的是，XHTML 2 已经死了，HTML5 没有 di元素
So, you can combine ul > liwith dl > dt + dd:
所以，你可以结合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>
回答by gpmcadam
I think a definition list is probably a bad idea. Semantically, they are used for definitions. Other key-value lists will often differ from definition titles and descriptions.
我认为定义列表可能是个坏主意。在语义上，它们用于定义。其他键值列表通常与定义标题和描述不同。
A tableis one way to go, but what about an unordered list?
Atable是一种方法，但是无序列表呢？
<ul>
<li class="key-value-pair">
<span class="key">foo</span>
<span class="value">bar</span>
</li>
</ul>
回答by Michiel Bruggenwirth
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>I used <dl><dt><dd>and styled them with grid
我用<dl><dt><dd>网格使用和样式化它们
回答by Iiridayn
This is not my preferred solution, but it is a clever abuse of the semantic element:
这不是我喜欢的解决方案，但它巧妙地滥用了语义元素：
Use a new <dl>per <dt>/<dd>pair:
使用新的<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>
An example with css floats and red border on 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>回答by lucideer
it is difficult to properly offset the pairs visually, both in code and rendered. If I wanted to, for instance, but a border around each pair, that would be a problem.
无论是在代码中还是在渲染中，都很难在视觉上正确地偏移对。例如，如果我想要，但每对周围都有一个边界，那将是一个问题。
Others before me have dealt (quite well I think) with the problem of providing visual definition in code. Which leaves the problem of rendering and CSS. This can be done quite effectively in most cases. The biggest exception is placing a border around each set of dt/dds, which is admittedly extremely tricky - perhaps impossible to style reliably.
在我之前的其他人已经处理（我认为很好）在代码中提供可视化定义的问题。这就留下了渲染和 CSS 的问题。在大多数情况下，这可以非常有效地完成。最大的例外是在每组 dt/dds 周围放置一个边框，这无疑是非常棘手的 - 也许不可能可靠地设置样式。
You could do:
你可以这样做：
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:'→ '; }
Which works for key-value PAIRS, but presents problems if you have multiple dds within one "set" like:
这适用于键值对，但如果在一个“集合”中有多个 dds，则会出现问题，例如：
<dt>Key1</dt>
<dd>Val1.1</dd>
<dd>Val1.2</dd>
<dt>Key2</dt>
<dd>Val2.1</dd>
<dd>Val2.2</dd>
However, border-styling limitations aside, doing anything else to associate sets (backgrounds, numbering, etc.) is quite possible with CSS. There's a nice overview here: http://www.maxdesign.com.au/articles/definition/
然而，抛开边框样式的限制，用 CSS 做任何其他事情来关联集合（背景、编号等）是完全可能的。这里有一个很好的概述：http: //www.maxdesign.com.au/articles/definition/
Another point I think is worth noting, if you're looking to optimally style definition-lists to provide visual separation - CSS's automatic-numbering features (counter-incrementand counter-reset) can come in quite handy: http://www.w3.org/TR/CSS2/generate.html#counters
我认为还有一点值得注意，如果您希望优化定义列表的样式以提供视觉分离 - CSS 的自动编号功能（counter-increment和counter-reset）可以派上用场：http: //www.w3.org/TR/ CSS2/generate.html#counters
回答by Armstrongest
Of course, you could just use HTML Custom elements. ( spec)They're completely valid HTML5.
当然，您可以只使用HTML 自定义元素。（规范）它们是完全有效的 HTML5。
Unfortunately, browser support isn't that great, but if rarely do we care about such pedestrian things as browser support when we're dealing with semantics. :-)
不幸的是，浏览器支持并不是那么好，但是当我们处理语义时，我们很少关心浏览器支持之类的普通事情。:-)
One such way you could represent it:
你可以用一种这样的方式来表示它：
After registering your brand new fancy element like so:
像这样注册您的全新花式元素后：
var XKey = document.registerElement('x-key');
document.body.appendChild(new XKey());
You write markup like so:
你这样写标记：
<ul>
<li>
<x-key>Name</x-key>
Value
</li>
</ul>
The only condition that HTML Custom elements have are that they need a dash in them. Of course, you can now be super creative... if you're building an auto parts warehouse, with lists of parts and serial numbers:
HTML 自定义元素的唯一条件是它们需要一个破折号。当然，您现在可以变得非常有创意……如果您正在建立一个汽车零件仓库，并带有零件和序列号列表：
<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>
You can't get much more semantic than that!
你不能得到比这更多的语义！
However, there IS a chance I have gone too far into semantic-shangri-la-la(a real place) and might be tempted to scale it back to something a little more generic:
但是，有可能我已经进入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>
Or perhaps this ( if I needed to style and show the key visually )
或者这个（如果我需要设计样式并在视觉上显示键）
<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>
回答by Unicron
Hmm. dt/ddsound best for this and it ispossible to offset them visually, although I do agree it's more difficult than for a table.
唔。dt/dd声音最适合这一点，它是能够在视觉上抵消他们，虽然我不同意它比对表更加困难。
As for source code readability, how about putting them into one line?
至于源代码的可读性，把它们放在一行怎么样？
<dl>
<dt>Name</dt> <dd>Value</dd>
<dt>Name</dt> <dd>Value</dd>
</dl>
I agree it's not 100% perfect, but seeing as you can use space characters for indentation:
我同意它不是 100% 完美的，但是您可以使用空格字符进行缩进：
<dl>
<dt>Property with a looooooooooong name</dt> <dd>Value</dd>
<dt>Property with a shrt name</dt> <dd>Value</dd>
</dl>
it might be the nicest way.
这可能是最好的方式。
回答by Florian Margaine
Except for the <dl>element, you've pretty much summed up all the options of HTML: limited ones.
除了<dl>元素之外，您几乎已经总结了 HTML 的所有选项：有限的选项。
However you're not lost, there is one option left: using a markup language that can be translated to HTML. A very good option is Markdown.
但是您并没有迷失，还有一个选择：使用可以翻译成 HTML 的标记语言。Markdown 是一个非常好的选择。
Using a table extension that some markdown engines provide, you can have code like this:
使用某些 Markdown 引擎提供的表扩展，您可以编写如下代码：
| Table header 1 | Table header 2 |
-----------------------------------
| some key | some value |
| another key | another value |
This means that you need a build step to translate the Markdown to HTML of course.
这意味着您当然需要一个构建步骤来将 Markdown 转换为 HTML。
This way you get meaningful markup (table for tabular data) and maintainable code.
通过这种方式，您可以获得有意义的标记（表格数据的表格）和可维护的代码。
