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

Question

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

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

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

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

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

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

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

1. 带标记的表格(和 、...)
2. 带有
   标记(和
   • 、
     ...)的无序列表
   • 使用 < h1 >、< h2 >...< p > 的常规标记
   • 用

     、

     和

     定义列表

   • <标签>...?

什么是语义最正确的？什么最容易显示(在 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> 的更多信息可用标签 here .