名值对的语义和结构

谢谢你这个有趣的问题。这里没有什么要考虑的了。

什么是一对?两种元素结合在一起。所以我们需要一个标签。 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中肯定不起作用。

综上所述:

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>

键和值对通常存储在数据库中,那些通常存储表格数据, 所以这张桌子最适合我。

你怎么认为?

跟随 specification (和 further details )Alexandr Antonov提供: 使用 dl , dt dd ,也可以选择 div .

dl公司 , 日期 ,和 dd公司 对于键值对在语义上是良好的:

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

为了更方便地设计或分析, 部门 s可以用作 dl公司 日期 和 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>

XHTML2引入了使用 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

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>

A table

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

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>

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

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

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>

在代码和渲染中,很难在视觉上正确地偏移这些对。举例来说,如果我想,但是每一对都有一个边界,那将是一个问题。

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

它适用于键值对,但如果在一个“集合”中有多个dd,则会出现问题,如:

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

然而,撇开边框样式的限制不谈,做任何其他事情来关联集合(背景、编号等)都是很有可能的。这里有一个很好的概述: http://www.maxdesign.com.au/articles/definition/

我认为还有一点值得注意,如果您希望以最佳的样式定义列表来提供视觉分离,那就是CSS的自动编号功能( counter-increment 和 counter-reset http://www.w3.org/TR/CSS2/generate.html#counters

当然,你可以用 HTML Custom elements spec

不幸的是,浏览器支持并不是那么好,但是如果我们很少关心像浏览器支持这样简单的事情的话,那么当我们处理语义的时候

你可以用这样一种方式来表达它:

在注册了你的全新花式元素之后:

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>

隐马尔可夫模型。 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>

除了 <dl>

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

使用一些降价引擎提供的表扩展,您可以得到如下代码:

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

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

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

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

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

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

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

命令:

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

<ul> 对于无序列表,请跳过 value="index" 钻头。

spec :

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

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

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

至于在屏幕上的渲染,应用于dd的一个大的底部边距是足够的视觉分离。