什么html标记来使用，用于显示标签/价值的数据？

Question

我想要呈现用户配置文件的容器，包含一系列的片公司的财产及其相关的价值观。

这里是一个摘录的信息和布局，我想显示：

第一名.......MyName

年龄...................MyAge

电子邮件................MyEmail

我知道，有大量的例子可用的，但问题是，它似乎没有共同接受的解决方案。

迄今为止我所看到的以下用途：

1. 表与标记(并 < tr>,< td>...)
2. 无序列表 < ul>标记(并 < 李>, < div>...)
3. 经常与标记 < h1>,< h2>...< p>
4. 定义列表 < DL>, < DT>和 < DD>
5. < 标签>...?

什么是最语义上正确的吗？什么是最简单的到显示器(2分列的布局)?什么你告诉我的使用和为什么原因吗？

(html/css代码段是更多比表示欢迎)

Answer 1

哇。我们真的有害怕每一个人的"台的布局是邪恶的！使用CSS！"的东西，不是吗？

表—有 <th> 标签和 <td> 为价值观是完全适用于这样的内容，给你渲染你想要的，至少作为在语义上正确的，因为一个定义清单，可以说更是如此。要么是最好的语义免div.

Answer 2

我认为在语义上正确的将是 <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> 标签可用 在这里，.

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

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

因为没有引用任何具体html节点名的CSS是，如果将来有一个公认的方式这样做，你只需要更改名节点在你HTML。