语义HTML:用户列表
Semantic HTML: List of Users
我应该如何标记用户列表?
每个用户都有姓名、照片和职位。
这个怎么样?
<h1>Venmo</h1>
<h2>Employees</h2>
<ul>
<li>
<article>
<img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b">
<h3>Matt Di Pasquale</h3>
<p>Software Engineer</p>
</article>
</li>
<!-- ... -->
</ul>
我应该删除 article
元素吗?我应该删除 ul
和 li
元素吗?
这与其说是用户列表,不如说是关于用户的 table 数据。每个用户都有一个图像、一个名字和一个职位。这给你行和列。
table {
display: block;
}
tr {
display: block;
overflow: auto;
clear: left;
margin-bottom: 10px;
}
td {
display: block;
width: 200px;
}
td:first-child {
float: left;
width: auto;
}
td:nth-child(2) {
margin-left: 60px;
padding-bottom: 6px;
border-top: solid grey 2px;
}
td:nth-child(3) {
margin-left: 60px;
padding-top: 6px;
border-bottom: solid grey 2px;
}
<table>
<tr>
<td>
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/black_female_business_user.png" alt="" width="50" />
</td>
<td>Jane Smith</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/black_female_business_user.png" alt="" width="50" />
</td>
<td>Jane Smith</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/black_female_business_user.png" alt="" width="50" />
</td>
<td>Jane Smith</td>
<td>Software Engineer</td>
</tr>
</table>
我应该如何标记用户列表?
每个用户都有姓名、照片和职位。
这个怎么样?
<h1>Venmo</h1>
<h2>Employees</h2>
<ul>
<li>
<article>
<img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b">
<h3>Matt Di Pasquale</h3>
<p>Software Engineer</p>
</article>
</li>
<!-- ... -->
</ul>
我应该删除 article
元素吗?我应该删除 ul
和 li
元素吗?
这与其说是用户列表,不如说是关于用户的 table 数据。每个用户都有一个图像、一个名字和一个职位。这给你行和列。
table {
display: block;
}
tr {
display: block;
overflow: auto;
clear: left;
margin-bottom: 10px;
}
td {
display: block;
width: 200px;
}
td:first-child {
float: left;
width: auto;
}
td:nth-child(2) {
margin-left: 60px;
padding-bottom: 6px;
border-top: solid grey 2px;
}
td:nth-child(3) {
margin-left: 60px;
padding-top: 6px;
border-bottom: solid grey 2px;
}
<table>
<tr>
<td>
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/black_female_business_user.png" alt="" width="50" />
</td>
<td>Jane Smith</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/black_female_business_user.png" alt="" width="50" />
</td>
<td>Jane Smith</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/black_female_business_user.png" alt="" width="50" />
</td>
<td>Jane Smith</td>
<td>Software Engineer</td>
</tr>
</table>