![[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?
答：第一点因为HTML是用来编写静态的网页的，而PHP就是用来编写动态的网页的，而编写好动态页面的基础就是先掌握静态网页的各个部分的含义，所以只有先熟练掌握了html才能真正的学好php。
2.为什么选择PHP开发动态网站？
答：软件开发最重要的是软件所带来的效益，而软件的开发效率又是一个重要的因素，开发商都希望以最块的速度得到他么想要的软件，节省开发的费用，而php开发效率快，与html配合最默契，可以直接镶嵌在html代码中，满足了开发商对效率的要求，php的特点可以总结为：上手快，开发快，迭代快。
下面是使用<table>标签完成的购物商城的小案例，主要包括了一些css样式的使用，伪类的使用，<h2>,<p>,<ul>+<li>,<img>,<a>标签的使用：
<!-- 制作一张表格,要求使用到:
<table><tr>+<th>,<tr>+<td>,
<h2>,<p>,<ul>+<li>,<img>,<a>
允许使用有限的CSS进行样式美化，但不可以过量。 -->
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta charset="utf-8">
<style type="text/css">
table {
border-collapse: collapse;/*将表格线折叠*/
width: 600px;
text-align: center;/*将表格居中显示*/
margin: 30px auto;/*消除系统默认边距，设置左右边距*/
}
h2{
font-size: 30px;
font-weight: bolder;
font-family: 楷体;
color:#666;
text-align: center;
}
table, th, td {
border: 1px solid #666;
padding: 5px;
}
table tr:first-child {
background-color: pink;
}
table tr td:hover {
background-color: #efefef;
color: coral;
}
table tr td img {
width: 100px;
padding: 2px;
border-radius: 20%;
}
table tr td img:hover{
width: 102px;
padding: 1px;
border-radius: 20%;
}
table tr td a{
text-decoration: none;/*去除下划线*/
width: 140px;
height: 40px;
padding: 3px;
border: 1px solid black;
background: #ccc;
color: black;
border-radius: 8px;
}
table tr td a:hover{
background: #666;
color: white;
}
</style>
</head>
<body>
<table>
<h2>商城首页</h2>
<tbody>
<tr>
<th>编号</th>
<th>名称</th>
<th>品名</th>
<th>单价</th>
<th>样品</th>
<th>选择商品</th>
</tr>
<tr>
<td>001</td>
<td>牛奶</td>
<td>
<ul>
<li>伊利</li>
<li>蒙牛</li>
<li>科迪</li>
</ul>
</td>
<td>
<ul>
<li>49.8元/箱</li>
<li>50.8元/箱</li>
<li>48.8元/箱</li>
</ul>
</td>
<td><img src="images/milk.jpg" title="这是牛奶"></td>
<td><a href="http://taobao.com">查看详情</a></td>
</tr>
<tr>
<td>002</td>
<td>水果</td>
<td>
<ul>
<li>平果</li>
<li>梨子</li>
<li>葡萄</li>
</ul>
</td>
<td>
<ul>
<li>28.8元/箱</li>
<li>38.8元/箱</li>
<li>48.8元/箱</li>
</ul>
</td>
<td><img src="images/apple.jpg" title="这是水果"></td>
<td><a href="http://taobao.com">查看详情</a></td>
</tr>
<tr>
<td>003</td>
<td>电器</td>
<td>
<ul>
<li>风扇</li>
<li>冰箱</li>
<li>空调</li>
</ul>
</td>
<td>
<ul>
<li>498元/箱</li>
<li>698元/箱</li>
<li>888元/箱</li>
</ul>
</td>
<td><img src="images/fan.jpg" title="这是风扇"></td>
<td><a href="http://taobao.com">查看详情</a></td>
</tr>
</tbody>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行效果截图：
说明：此效果图片主要使用到了表格标签和一些简单的css样式，伪类的使用，表格边框、背景，间距的设置等知识，<img>单标签的使用，还有无序列表<ul><li></ul><li>标签的使用。
手抄代码：
说明：手抄代码主要是对所学的知识点的总结，相当于对知识点的更一步加深和理解掌握，通过手抄代码把一些记得模糊的知识点和忘记的知识点又重新梳理了一下，如单双标签的使用，及元素、标签、属性三者之间的关系等等。
总结：本次所学知识点主要包括以下几点：
（1）解答了心中的疑惑，为什么要学php还要学习html,因为PHP是用来编写动态网页的，动态网页的基础就是html静态网页的扩展，只有知道了网页的真正原理，才能更好地掌握和学习php，又知道了问什么选择php来开发动态网页，因为PHP的开发效率快，上手快，迭代快，必然就是它的使用性更多，还知道了使用框架的好处，代码规范，易维护。
（2）单标签和双标签的使用方法，单标签的内容是引入外部文件的，而双标签的内容是用户自己添加进去的，还学习了<ul><li>无序列表的使用，简单样式的控制，<img><a>标签的使用以及他们样式属性的简单使用等。
（3）使用<table>表格，实现了一个简单的购物清单的小功能，样式的选择方式，背景色的调整，<a><img>标签中简单的样式的使用，伪类的使用，鼠标指到对应的<tr><td>变化颜色，通过伪类制作出类似按钮的效果功能等
