![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：作业缺少的尽快补上！！
Collection
Collection
一、问答题
1,学习php为什么必须掌握HTML？
2.为什么选择PHP开发动态网站？
二、编程题
要求：
制作一张表格,要求使用到:<table><tr>+<th>,<tr>+<td>,<h2>,<p>,<ul>+<li>,<img>,<a>允许使用有限的CSS进行样式美化，但不可以过量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签应用</title>
<style pype="text/txt">
table{
border-collapse: collapse;/*折叠表格线*/
width: 800px;
text-align: center;
margin: 30px auto;/*整体居中*/
}
table caption{ font-size: 2rem;/*1rem=10px*/
margin-bottom: 20px;
font-weight: bolder;/*加粗*/
color: #666
}
table tr:first-child/*选择table标签下的tr的第一行*/ { background-color:lightgreen;
}
table tr:hover { background-color: #efefef;
color:coral;
}
table, th, td{border: 1px solid #666
}
table tr td img {
padding: 5px;
border-radius:10px;/*圆角*/
}
/*将a标签模拟成按钮*/
table tr td a{/*去掉下划线*/
text-decoration-line: none;
width: 150px;
height: 50px;
border:1px solid black;
background:white;
color:black;
border-radius:8px;
}
table tr td a:hover{
background:black;
color:white;
}
</style>
</head>
<body>
<table>
<caption>笔记本电脑排行榜</caption>
<tr>
<th>排行榜</th>
<th>品排</th>
<th>价格</th>
<th>网友评分</th>
<th>图片缩略图</th>
<th>地址</th>
</tr>
<tr>
<td>1</td>
<td>平果电脑</td>
<td>￥8000</td>
<td>五星</td>
<td><img src="https://2c.zol-img.com.cn/product/152_220x165/410/ceKqX7JWBXa0c.jpg" width="100"></td>
<td><a href="http://detail.zol.com.cn/notebook/index401365.shtml">点击这里</a></td>
</tr>
<tr>
<td>2</td>
<td>联想电脑</td>
<td>￥6800</td>
<td>四星</td>
<td><img src="https://2a.zol-img.com.cn/product/185_220x165/364/ceRKUq3vsfuQ.jpg" width="100" ></td>
<td><a href="http://detail.zol.com.cn/notebook/index1180706.shtml">点击这里</a></td>
</tr>
<tr>
<td>3</td>
<td>华硕电脑</td>
<td>￥5000</td>
<td>五星</td>
<td><img src="https://2d.zol-img.com.cn/product/181_220x165/193/cenZL6uTXLfUo.jpg" width="100"></td>
<td><a href="http://detail.zol.com.cn/notebook/index1167313.shtml">点击这里</a></td>
</tr>
<tr>
<td>4</td>
<td>戴尔电脑</td>
<td>￥4500</td>
<td>五星</td>
<td><img src="https://2b.zol-img.com.cn/product/176_220x165/639/ceA9zn1hCHts.jpg" width="100"></td>
<td><a href="http://detail.zol.com.cn/notebook/index1154272.shtml">点击这里</a></td>
</tr>
<tr>
<td>5</td>
<td>惠普电脑</td>
<td>￥4000</td>
<td>五星</td>
<td><img src="https://2b.zol-img.com.cn/product/191_220x165/645/ceD8CFBqaASw.jpg" width="100"></td>
<td><a href="http://detail.zol.com.cn/notebook/index1215789.shtml">点击这里</a></td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
