86

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

我喜欢 <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 中都更有意义。对上述边框进行样式设置是微不足道的。然而,如上所述,语义充其量是模糊的。

想法、评论、问题?

编辑/更新 也许这是我应该明确提到的与结构有关的事情,但定义列表也存在没有对这些对进行语义分组的问题。dda和 a之间的排序和隐含边界dt很容易理解,但它们对我来说仍然有些偏离。

4

14 回答 14

60

感谢这个有趣的问题。这里还有一些事情需要考虑。

什么是一对?两个元素在一起。所以我们需要一个标签。假设它是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>

键值对通常存储在数据库中,而那些通常存储表格数据,因此该表最适合恕我直言。

你怎么看?

于 2010-07-19T19:43:09.607 回答
34

遵循Alexandr Antonov 提供的规范(以及更多详细信息):使用dldtdd和可选div的 。

dl, dt, 和的组合dd对于键值对在语义上很好:

<dl>
    <dt>Key1</dt>
    <dd>Value1</dd>
    <dt>Key2</dt>
    <dd>Value2</dd>
</dl>

为了更轻松地进行样式设置或解析,divs 可以用作 的子代dl来对键值对进行分组(并成为 的dt子代dddl

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>

于 2018-05-13T06:26:39.797 回答
12

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</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>Age</dt>
            <dd>25</dd>
        </dl>
    </li>
</ul>
于 2013-02-27T17:50:18.810 回答
6

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

Atable是一种方法,但是无序列表呢?

<ul>
    <li class="key-value-pair">
        <span class="key">foo</span>
        <span class="value">bar</span>
    </li>
</ul>
于 2010-07-19T12:54:45.630 回答
5

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>网格并为其设置样式

于 2018-09-29T20:16:38.953 回答
3

这不是我喜欢的解决方案,但它是对语义元素的巧妙滥用:

使用新的<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>

于 2013-06-27T21:31:50.740 回答
2

在代码和渲染中,很难在视觉上正确地偏移这些对。例如,如果我想在每对之间设置边框,那将是一个问题。

在我之前的其他人已经处理了(我认为非常好)在代码中提供视觉定义的问题。这留下了渲染和 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:'→ '; }

这适用于键值对,但如果您在一个“集合”中有多个 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-incrementcounter-reset)可以派上用场:http ://www.w3.org/TR/ CSS2/generate.html#counters

于 2010-07-19T13:16:52.513 回答
2

当然,您可以只使用HTML 自定义元素。(规范)它们是完全有效的 HTML5。

不幸的是,浏览器支持不是那么好,但是当我们处理语义时,我们很少关心浏览器支持这样的普通事情。:-)

一种可以表示它的方式:

像这样注册您的全新花式元素后:

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

你这样写标记:

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

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>

你不能得到比这更多的语义!

然而,我有可能在(一个真实的地方)走得太远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>
于 2016-07-25T17:42:12.007 回答
1

唔。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>

这可能是最好的方式。

于 2010-07-19T12:43:42.490 回答
1

除了<dl>元素,您几乎总结了 HTML 的所有选项:有限的选项。

但是您并没有迷失方向,还有一个选择:使用可以翻译成 HTML 的标记语言。Markdown 是一个很好的选择。

使用某些降价引擎提供的表格扩展,您可以拥有如下代码:

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

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

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

于 2013-05-31T19:30:18.373 回答
0

在每对之间放置一个空行怎么样?

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

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

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

    <dt>Name</dt> 
    <dd>Value</dd> 
</dl> 
于 2010-07-19T12:59:48.750 回答
0

使用列表怎么样?

订购:

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

<ul>用于无序列表,并跳过该value="index"位。

于 2013-02-14T06:39:42.243 回答
0

来自规范的行:

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

我假设使用元素<dl>,<dt><dd>.

于 2016-07-25T16:43:49.817 回答
-1

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

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

这种方式在冗长的定义中可能会更容易一些(尽管如果您使用的定义非常错误,那么定义列表可能并不是您真正想要的)。

至于屏幕上的渲染,应用到 dd 的粗底边距是足够的视觉分离。

于 2010-07-19T12:48:12.183 回答