Question

我目前正在为下面的列表设计写出标记。

我正在考虑使用定义列表<dl>而不是<ul>，因为没有项目符号，因此没有CSS来删除项目符号。并且它的标记也较少。我是否以正确的方式思考，还有什么我应该考虑的事情吗？

HTML标记

<aside class="details">

    <dl>
        <dt>Role</dt>
        <dd>UI Design</dd>
        <dd>Frontend-development</dd>
        <dt>Client</dt>
        <dd>Jame Saunders</dd>
        <dt>Year</dt>
        <dd>2016</dd>
        <a href="http://www.google.com">Visit Site</a>
    </dl>

</aside>

唯一的问题是每个<dt>

之间的间距

Answer 1

好的，所以我不认为描述列表是正确的方法。描述列表用于显示项目的定义。

EX：

＆＃13;

<!DOCTYPE html>
<html>
<body>

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

</body>
</html>

＆＃13;

我建议使用<ul>标记。它比DL工作得更好，它使用正确的HTML5风格。所以我掀起了一个JSFiddle来展示它看起来如何使用<ul>并使它看起来几乎与图像完全一样。 JSFiddle

我添加了一些CSS：

li.title {
  font-weight: bold;
  color: rgb(0, 0, 0);
  margin-bottom: 2px;
}
li {
  color:rgb(50, 255, 231);
}
a.link {
  color: #ff0000;
  font-weight:bold;
  text-decoration:none;
}
li.link {
  margin-top:5px;
}
ul {
  list-style-type: none;
}

以便它像图像一样显示，并添加了一些间距和链接样式。希望这适用于您以及将来对<dl>标签的尊重，请参考to the w3schools example.

Answer 2

此处不会使用.vcxproj代码，而是使用<dl>代码，但在{i}之后调整了<ul>和margin padding用于获取所需输出的标记。

HTML：

<dl>

CSS：

<dl>
  <dt>Role</dt>
  <dd>UI Design</dd>
  <dd>Frontend-development</dd>
  <dt>Client</dt>
  <dd>Client Name</dd>
  <dt>Year</dt>
  <dd>2016</dd>
  <a href="http://www.google.com">Visit Site</a>
</dl>

https://jsfiddle.net/1tgatcs2/

使用标头创建语义清晰的列表

2 个答案: