![[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直接的关系，为啥选择php语言，html的标签以及单标签双标签区别，具体展现如下：
1,学习PHP为什么必须要掌握HTML?
答：
首先开发分为前端和服务器端开发，而前端是指静态页面的编写，用到了HTML,CSS，JAVASCRIPT,而前端代码是由浏览器解析并且运行，而php的作用原理是动态生成HTML代码，如果将htm基本标签元素进行掌握，再利用css进行页面布局，后期学习PHP会更加轻松容易对页面进行数据交互绑定
2.为什么选择PHP开发动态网站？
答：
php虽然不是开发程序中最简单的，但是一般中小型项目中，其开发周期相比其它语言较短，这也是众多企业选择php语言的原因之一，快速有效！
3，标签的四个公共属性;
style:内联样式,
id 标识唯一元素
class 标识 同类元素
title 标题属性
4，双标签和单标签的区别
单标签用/>结尾，只是一种简写 （<img />是单标签）
双标签可以替换所有的单标签
在学习中我懂得 如果对一组相关的事物具体描述,应该使用表格标签 下面是我利用table标签制作的简单表格
<!DOCTYPE html>
<html>
<head>
<title>购物清单</title>
</head>
<style type="text/css">
table{
width: 700px;
text-align: center;
border-collapse: collapse; /*将table边框由双框变为单框*/
margin: 20px auto;
}
/*给标题设置样式*/
table caption{
font-size: 3em;
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 yellow; /*给边框设置像素以及颜色*/
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>点击 "运行实例" 按钮查看在线实例