用于显示标签/值数据的 html 标记是什么？答案

【问题标题】：What html markups to use for displaying label/value data?用于显示标签/值数据的 html 标记是什么？
【发布时间】：2009-11-06 13:54:03
【问题描述】：

我想呈现一个包含标签列表及其关联值的配置文件用户容器。

这是我想展示的信息和布局的摘录：

名字.......我的名字

年龄........我的年龄

电子邮件................我的电子邮件

我知道有大量可用的示例，但问题是似乎没有普遍接受的解决方案。

到目前为止，我已经看到了以下用法：

带有标记的表格（和、...）
带有
- 、
  ...）
- 带有、...
- 带有
  、
  和
  
  的定义列表
- ...?

【问题讨论】：

标签： html css markup semantic-markup

【解决方案1】：

我认为在语义上最正确的是<dl>、<dt> 和<dd>，因为您所显示的实际上是定义的名字、年龄和电子邮件。

<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>foo@bar.com</dd>
</dl>

但是，显然，在表格中显示它的最简单方法是使用 <table>、<th> 和 <td>。您可以使用类似这样的定义列表来组合表格布局：

dt { float: left; clear: left; width: 6em; font-weight: bold; }
dd { float: left; }

<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>foo@bar.com</dd>
</dl>

有关<dl> 标签的更多信息here。

【讨论】：

你确定它在语义上是最正确的吗？根据我一直在阅读的内容，
用于定义/描述对（例如词汇表），这与标签/值对不同。
我想这取决于你对“定义”的定义是什么。例如，在我的上下文中，我的名字被定义为“Dominic”。您是否认为这是对“define[d]”一词的有效使用有点主观。
根据规范 (w3.org/TR/html4/struct/lists.html#h-10.3)，DL 可以用于更多的“定义”。列表类型旨在用作键值对（或多个值）类型列表的列表。
这篇文章 (benmeadowcroft.com/webdev/articles/definition-lists.shtml) 给出了仅使用术语/描述对的
用法示例。它说“定义列表很重要，因为它们为与之关联的文本提供了上下文”。显然，您定义一个术语一次，仅此而已。例如，这是一个真正的用法：
CSS
和
Cascade Style Sheet
因为“CSS”的值侧不应该为每个用户改变，这与标签“First”相反名称”
在最新的html5 spec 中已更名为描述列表。似乎澄清了名称/值对是合适的。

【解决方案2】：

哇。我们真的用“表格布局是邪恶的！使用 CSS！”东西，不是吗？

表格 — 标签为<th>，值为<td> — 完全适用于此类内容，为您提供所需的渲染，并且至少在语义上与定义列表一样正确，可以说更是如此。两者都比无语义的 div 更可取。

【讨论】：

如此真实！真的，如果您的数据是表格的，请将其放入表格中。这就是他们的目的。
可以说这不是数据表，而是标签和值的列表。如果有更多的值，那么它肯定是一个表
在我的情况下，确实有更多的价值。但我不明白你的评论。根据你的说法，只有很少的项目，这是一个标签/值列表，但是当项目的数量超过某个阈值时，它就变成了一个表格？？？？您是否根据项目的数量限制无序列表（
我会尽量消除混乱。当有更多值时......例如名字.....MyName、AnotherName 等（例如数据行）然后它是一个数据表。上面的代码显然只是标签/值的列表。
@fabien。我认为你错过了我的观点。我想说当一个标签有多个值时，你应该使用一个表。在这种情况下，标签/值是一对一的关系，那么真正的 dl 更合适。即使列表长达 100 项。

【解决方案3】：

我知道这已经得到解答，但我认为定义列表可能非常合适。
我确实同意 bobince 表格始终适用于表格数据...
不过，我在很多地方都使用过这种方法，我宁愿避免使用表格——而且我不认为这是一种不正确的方法。

定义列表：

<dl>
  <dt>Label</dt>
  <dd>Value</dd>

  <dt>Label 2</dt>
  <dd>Value 2</dd>
</dl>

使用 CSS：

dl dt {
  float: left;
  width: 200px;
  text-align: right;
}

dt dd {
  margin-left: 215px;
}

【讨论】：

这对我很有用。我相信有一个错字。 CSS 应该是：dl dt {...} 和 dl dd {...}
修正了错字:)

【解决方案4】：

这是一个很好的问题，也是一个可以引起很多争论的问题，因为没有固定的方法。

他们中的许多人都有论据，但就我个人而言，我会保持简单。

<div class="profile">
    <p>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </p>
    <p>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </p>
    <p>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </p>
</div>

或

<ul class="profile">
    <li>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </li>
    <li>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </li>
    <li>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </li>
</ul>

CSS 看起来像这样；

.profile p {
    overflow: hidden;
}

.profile .label {
    vertical-align: top;
    float: left;
    width: 40%;
}

.profile .value{
    vertical-align: top;
    float: left;
    width: 60%;
}

没有在 CSS 中引用任何特定的 html 节点名称的原因是，如果将来有一种公认的方式来执行此操作，您只需更改 HTML 中的节点名称。

【讨论】：

我认为这是一个糟糕的解决方案。您永远不会在任何地方定义 - 语义 - 标签是标签，它们连接到值。除了普通的网络浏览器（屏幕阅读器、移动设备等）之外，每个段落中的文本看起来都像“First Name Myname”、“Age Myage”等 - 这不是很可读。
尽量避免将 p 标签用于非段落的内容。
这在语义上不正确。 P 标签用于段落，没有定义什么是标签，什么是值
也许这不是正确的答案。然而，它是一种广泛的用法，不应该被否决！ Downvote 通常是超出范围或完全错误的答案！
广泛使用不会使答案正确。前段时间基于表格的布局有广泛的使用，但这并没有使它正确。对不起，这个标记完全错误。