Question

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

以下是我想要展示的信息和布局的摘录：

名字 ....... MyName

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

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

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

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

带有标记的表（和＆lt; tr＆gt;，＆lt; td＆gt; ...）
带有＆lt;的无序列表ul＆gt;标记（和＆lt; li＆gt;，＆lt; div＆gt; ...）
使用＆lt;的常规标记h1＆gt;，＆lt; h2＆gt; ......＆lt; p＆gt;
使用＆lt;定义列表DL＆gt;，＆lt; DT＆gt;和＆lt; DD＆gt;
＆LT;标签＆gt; ...？

语义最正确的是什么？什么是最容易显示（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>标记的更多信息here。

Answer 2

哇。我们真的害怕所有人都对“桌面布局是邪恶的！使用CSS！“东西，不是吗？

表格 - 标签为<th>，值为<td> - 完全适用于此类内容，为您提供所需的呈现，并且至少在语义上与定义列表，可以说更多。两者都优于无语义的div。

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

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

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

4 个答案: