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

Question

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

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

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

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

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

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

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

1. 带有标记的表（和 <tr>,<td>...）
2. 带有<ul>标记的无序列表（和<li>、<div>...）
3. 使用 < h1 >、< h2 >...< p > 的常规标记
4. 带有<DL>、<DT>和<DD>的定义列表
5. <标签>...？

什么是语义最正确的？ 什么是最容易显示的（在 2 列布局中）？ 您建议我使用什么以及出于什么原因？

（html/css 代码片段非常受欢迎）

Answer 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>标签的更多信息，请点击此处。

Answer 2

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

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

Answer 3

我知道这已经得到了回答，但我认为定义列表非常合适。
我确实同意表格总是适合表格数据的观点......
然而，我已经在很多地方使用了它，我更喜欢避免使用表格 - 我认为这不是一种不正确的方法。

定义列表：

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

Answer 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 中的节点名称。