Question

我在网站上构建员工及其家属的列表，并需要一些帮助以适当的语义方式来实现这一点。

我页面上的示例信息：

<div>
John Smith
Employee - 03/01/1980
</div>

<div>
Betty Smith
Spouse- 04/19/1981
</div>

<div>
Robert Smith
Child- 06/04/2002
</div>

人名与他们的角色/生日之下的风格不同。我应该使用span，ul，p还有其他什么？谢谢。

Answer 1

由于员工的列表包含所有关联的家属（看起来像表格数据），您可以使用下一个：

body {
  font-family: sans-serif;
}

table {
  margin: 1em 0;
  width: 100%;
}

table th, td {
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  padding: 4px;
}

table caption {
  font-size: 14px;
  background: #ccc;
  padding: 4px;
}

  <ul>
    <li>
      John Smith - 03/01/1980
      <table cellspacing="4">
        <caption>
          Dependents
        </caption
        <thead>
          <tr>
            <th>Name</th>
            <th>Relation</th>
            <th>Date of Birth</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Betty Smith</td>
            <td>Spouse</td>
            <td>04/19/1981</td>
          </tr>
          <tr>
            <td>Robert Smith</td>
            <td>Child</td>
            <td>06/04/2002</td>
          </tr>
          <tr>
            <td>Sarah Smith</td>
            <td>Child</td>
            <td>04/04/2004</td>
          </tr>
        </tbody>
      </table>
    </li>
  </ul>

Answer 2

我建议使用定义列表<dl>，<dt>和<dd>。

HTML <dl>元素包含一组术语和描述。此元素的常见用途是实现词汇表或显示元数据（键值对列表）。

dt, dd {
  margin: 0;
}
dt {
  color: green;
}
dd {
  color: gray;
  margin-bottom: 10px;
}

<dl>
  <dt>John Smith</dt>
  <dd>Employee - 03/01/1980</dd>
  <dt>Betty Smith</dt>
  <dd>Spouse- 04/19/1981</dd>
  <dt>Robert Smith</dt>
  <dd>Child- 06/04/2002</dd>
</dl>

Answer 3

如果您想使用列表，可以通过以下方式执行此操作：

＆＃13;

ul {
  padding-left: 0px;
}
  
li {
  list-style-type: none;
}

.name {
  background: #AAAAFA;
  height: 35px;
  width: 200px;
  font-size: 14px;
  font-weight: bold;
}

.role {
  background: #AAFAAA;
  height: 25px;
  width: 200px;
  font-size: 12px;
  margin-bottom: 10px;
}

＆＃13;

<div>
  <ul>
    <li class="name">John Smith</li>
    <li class="role">Employee - 03/01/1980</li>
  </ul>
</div>

<div>
  <ul>
    <li class="name">Betty Smith</li>
    <li class="role">Spouse- 04/19/1981</li>
  </ul>
</div>

<div>
  <ul>
    <li class="name">Robert Smith</li>
    <li class="role">Child- 06/04/2002</li>
  </ul>
</div>

＆＃13;

希望它有所帮助，此致

Answer 4

CUSTOM ELEMENTS WHOOOOOOO！

好但是认真：https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements

v1自定义元素的关键促成因素是 CustomElementRegistry.define()方法，可用于定义新的自定义元素。然后，新元素将使用提供的类对于任何实例，而不是默认的HTMLUnknownElement。习惯通过使用，元素也可以基于本地元素，如<button> 语法<button is="my-button">;这些被称为定制内置元素。

使用自定义元素，您的标记可能如下所示：

<staff-card>
    <staff-name>John Smith</staff-name>
    <staff-description>Employee - 03/01/1980</staff-description>
</staff-card>

然后您可以使用CSS设置样式。

编辑：您只需在JavaScript中定义它，然后就可以使用它并设置样式。

Answer 5

最好的语义是：

<div class="grid_1 title">Name</div><div class="grid_1 title">Employee</div>
<div class="grid_1">Name_1</div><div class="grid_1">Employee_1</div>
<div class="grid_1">Name_2</div><div class="grid_1">Employee_2</div>
<div class="grid_1">Name_3</div><div class="grid_1">Employee_3</div>
<div class="grid_1">Name_4</div><div class="grid_1">Employee_4</div>

的CSS：

.grid_1 {float：left}

响应式网页设计

当我们在页面上只有一个配置文件时，HTML结构是另一个下面的一个字段，垂直顺序。当我们在一页上有很多人时，我们的大脑会寻找像桌子一样的行。我们的眼睛看起来水平，有关人的更多数据。它通常就是这样，它是最好的语义，我们的大脑就像那种布局。如果你想要添加一些东西，你只需添加一个＆＃34;列＆＃34;在你想要的位置。人们用眼睛搜索专栏，例如，为了名字，这是一个很好的做法按名称升序排序等等。很多语义原因为＆＃34;表＆＃34;看。

Grid（div）比table更好，因为它可以更好地阅读移动设备，平板电脑等等。=响应式网页设计。

构造文本和子文本标记的语义方法

5 个答案: