<h2>购物清单</h2>
<p>牛奶</p>
<p>苹1果</p>
<p>电风扇</p>
<hr>
<!-- 对于多个具有关联性的内容，应该用列表元素进行包装 -->
<ul>
<li>牛奶</li>
<li>苹1果</li>
<li>电风扇</li>
</ul>
<hr>
<!-- 如果要对一组相关的事物具体描述，应该使用表格 -->
<style type="text/css">
table{
width :700px;
text-align: center;
margin: 20px auto;
border-collapse: collapse;
}
table caption{
font-size: 3rem;/* 1rem=10px */
font-weight:border;
color: #666;
margin-bottom: 20px;
}
table,th,td{border: 1px solid #666;}
table tr:first-child{background-color: lightgreen;}/*添加第一行背景色*/
table tr:hover{background-color: #efefef;color: coral;}
table tr td img{}
/*将a标签包装成按钮样式*/
table tr td a{
text-decoration-line: none;/*先去掉下划线*/
width: 140px;
height: 40px;
padding: 5px;
border: 1px solid black;
background-color: white;
color: black;
border-radius: 8px;
}
table tr td a:hover{background-color: black;
color: white;}
</style>
<table>
<caption>购物清单</caption>
<!-- ctrl+shift+D 快速复制 -->
<tr>
<th>编号</th>
<th>名称</th>
<th>品1牌</th>
<th>数量</th>
<th>缩略图</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>牛奶</td>
<td>伊利</td>
<td>1箱</td>
<td><img src="" width="100"></td>
<td><a href="http://jd.com">点击购1买</a></td>
</tr>
<tr>
<td>2</td>>
<td>苹1果</td>
<td>红富士</td>
<td>5斤</td>
<td><img src="" width="100"></td>
<td><a href="http://jd.com">点击购1买</a></td>
</tr>
<tr>
<td>3</td>>
<td>电风扇</td>
<td>美的</td>
<td>1台</td>
<td><img src="" width="100"></td>
<td><a href="http://jd.com">点击购1买</a></td>
</tr>
</table>
