![[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
学习php为什么必须要掌握HTML：
答：html+css+js/jquery web前端，只用这个做出的web前端是静态网页，嵌入php脚本并连接数据库了之后就升级为动态网页了。而要把静态变成动态，就要做嵌入php的操作，如果对html不了解，就对静态网站的动态化无从下手。不熟悉前端，不会对前端做更改、调整。在网页的动态化过程中会出现各种样式错乱，样式失效、兼容等问题。做网站后台的可以不非常精通前段，但必须对前端了解，熟练。
为什么选择php开发动态网站？
答：php相比于其他语言入门块，但难精通。php不会让开发者去烦恼指针、内存等一些不好理解的东西，更神奇的是变量都不用声明直接用，解释器自动的会判断，还有各种各样好用的函数，减少代码量；php开发周期短，相比jsp、python做网站，开发周期减少2倍以上；php的mvc框架也很成熟，直接封装了对数据库的操作，使开发速度更快；php更新迭代速度很快，php7比php5速度提升4倍；
编程题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第三天-第三课</title>
<style>
.tb1{
width:600px;
text-align:center;
border-collapse:collapse;/* 合并表格边框线 */
margin:10px;
padding:5px;
}
.tb1 caption{border:solid 1px;font-size:30px;padding:2px 0;font-family: "微软雅黑"}
.tb1 tr:first-child{/* 第一个tr */
background:lightgrey;
}
.tb1 tr td{
border:solid 1px;
}
.tb1 tr td img{height:60px;width:100px;padding:5px;}
.tb1 tr td a{text-decoration-line: none;display:inline-block;width:100px;height: 30px;border:solid 1px green;border-radius:15px;font-color:orange;line-height: 30px;font-weight: bold;}
.tb1 tr td a:hover{color:green;border:1px solid orange;}
</style>
</head>
<body>
<h3>购物清单</h3>
<p>牛奶</p>
<p>零食</p>
<p>yin料</p>
<!-- 对于多个具有关联性的内容，使用列表元素包装 -->
<ul>
<li>牛奶</li>
<li>牛奶</li>
<li>yin料</li>
</ul>
<!-- 如果对一组相关的食物具体描述，可以使用表格标签 -->
<table class="tb1">
<caption>购物清单</caption><!-- 表格标题 -->
<tr>
<td width="10%">序号</td>
<td width="15%">名称</td>
<td width="15%">品pai</td>
<td width="30%">缩略图</td>
<td width="30%">操作</td>
</tr>
<tr>
<td>1</td>
<td>牛奶</td>
<td>伊利</td>
<td><img src="./static/images/img1.jpg"></td>
<td><a href="#">点击gou买</a></td>
</tr>
<tr>
<td>2</td>
<td>瓜子</td>
<td>洽洽</td>
<td><img src="./static/images/img2.jpg"></td>
<td><a href="#">点击gou买</a></td>
</tr>
<tr>
<td>3</td>
<td>矿泉水</td>
<td>农夫山泉</td>
<td><img src="./static/images/img3.jpg"></td>
<td><a href="#">点击gou买</a></td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图：
备注：老师您好，感谢这么仔细的阅读我们的作业。
