![[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代码，由服务器上的特殊程序来运行。php就是用来动态生成HTML代码的，因为php程序的运行结果就是html，所以要学好html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表表格</title>
<style type="text/css">
table{
width: 800px;
text-align: center;
margin: 20px auto;
border-collapse: collapse; /*将表格线折叠起来*/
}
table caption{
font-size: 3rem; /*1rem=10px*/
font-weight: bold;
color: #666;
margin-bottom: 20px;
}
table,th,tr,td{
border: 1px solid #666 ;
}
table tr:first-child{ /*设置首行背景色*/
background: lightgreen;
}
table tr:hover{
background-color:#efefef;
color: coral;
}
table tr td img{
padding: 5px;
border-radius: 10px; /*给图片圆角*/
}
table tr td a{
text-decoration: none;
width: 140px;
height: 40px;
background: #fff;
padding: 5px;
border: 1px solid black;
border-radius:8px;
}
table tr td a:hover{
background-color: black;
color: #fff;
}
</style>
</head>
<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>
<th>操作</th>
</tr>
<tr> <!-- 表格内容 -->
<td>1</td>
<td>牛奶</td>
<td>伊利</td>
<td>1箱</td>
<td><img src="image/1.png"></td>
<td><a href="">点击买</a></td>
</tr>
<tr>
<td>2</td>
<td>苹_果</td>
<td>红富士</td>
<td>10个</td>
<td><img src="image/1.png"></td>
<td><a href="">点击买</a></td>
</tr>
<tr>
<td>3</td>
<td>电风扇</td>
<td>格力</td>
<td>1台</td>
<td><img src="image/1.png"></td>
<td><a href="">点击买</a></td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：朱老师这节课讲解了PHP和HTML之间的关系，html结构，标签与元素之间的关系。元素是用标签来表示的，标签是用来描述元素的工具。双标签和单标签的区别。
非可替换元素：直接写在html代码中，如h标签、p、li、a等，
可替换元素：来自源码外部，通过标签属性来引入。 如图片、文件
表格： <caption>标题</caption>
<tr><th>表头</th></tr>
<tr>标签 表示行
<tr><td>表单元格</td></tr>
<td> 表单元格
border-collapse: collapse; /*将表格线折叠起来*/
table tr:first-child{ /*设置首行背景色*/
background: lightgreen;
}
border-radius: 10px; /*给图片圆角*/
