![[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，JAVASCRIPT,前端代码是由浏览器解析并且运行，后端服务器开发使用php的作用原理是动态生成HTML代码，如果将htm基本标签元素进行掌握，再利用css进行页面布局，后期学习PHP会更加轻松，容易对页面进行数据交互绑定 。
为什么选择PHP开发动态网站？
php虽然不是开发语言中最好的，但是一般中小型项目中，其开发周期相比其它语言较短，有丰富的类库，目前也有了比较统一的开发规范，这也是众多企业选择php语言的原因之一，快速有效！
HTML列表可以使用三种方式编写，代码示例如下：
<!DOCTYPE html>
<html>
<head>
<title>购物清单</title>
</head>
<style type="text/css">
table{
width: 700px;
text-align: center;
border-collapse: collapse; /*合并表格的边框*/
margin: 20px auto;
}
/*给标题设置样式*/
table caption{
font-size: 3rem;/* 1rem=10px */
font-weight: bolder; /*设置边框加粗*/
color: #666;
margin-bottom: 20px;
}
/* table 的标题以及文本设置边框样式*/
table,th, td{
border: 1px solid #666;
}
/*给table下的第一个tr设置样式*/
table tr:first-child{
background-color: lightgreen;
}
table tr:hover{/*鼠标移上变色响应*/
background-color: #efefef;
color: coral;
}
table tr td img{
padding: 5px;
border-radius: 10px; /*给图片添加圆角*/
}
/*将a标签模拟成按钮*/
table tr td a{
text-decoration: none; /*去掉下划线*/
width: 140px;
height: 30px;
border:1px solid black; /*给边框设置像素以及颜色*/
background-color: white;
color: black;
border-radius: 5px /*产生圆角*/
}
</style>
<body>
<h2>购物清单</h2>
<!-- 段落标签 -->
<p>空调</p>
<p>冰箱</p>
<p>冷饮</p>
<hr>
<!-- 无序列表 -->
<ul>
<li>空调</li>
<li>冰箱</li>
<li>冷饮</li>
</ul>
<!-- 如果对一组相关的事物具体描述,应该使用表格标签 -->
<table>
<!-- 标题内容 -->
<caption>购物清单</caption>
<!-- 表头 -->
<tr>
<th>编号</th>
<th>名称</th>
<th>数量</th>
<th>介绍图</th>
<th>预定</th>
</tr>
<!-- 表的内容 -->
<tr>
<td>1110</td>
<td>大米</td>
<td>3袋</td>
<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534264768187&di=743600325e3ca8d410eeeb5b4e72315f&imgtype=0&src=http%3A%2F%2Fimg001.hc360.cn%2Fm1%2FM03%2F55%2FA3%2FwKhQb1Q8l-iERKR5AAAAAK7rXLs932.jpg" width="100"> </td>
<td><a href="">预定</a></td>
</tr>
<tr>
<td>1111</td>
<td>腊肉</td>
<td>2斤</td>
<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534264955804&di=4564bf3fb6187da2a85da222ee57931e&imgtype=0&src=http%3A%2F%2Fpic8.photophoto.cn%2F20080820%2F0042040254330043_b.jpg" width="100">
</td>
<td><a href="">预定</a></td>
</tr>
<tr>
<td>1112</td>
<td>榴莲</td>
<td>5斤</td>
<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534264790581&di=168578a81f26dd423916069ed3ce0dec&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3868539636%2C212814347%26fm%3D214%26gp%3D0.jpg" width="100"> </td>
<td><a href="">预定</a></td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果如下图所示
