![[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简称超文本连线协议, PHP主要应用于服务器端,,HTML 应用于的终端是为了动态生成HTML 文件并呈现给客人
2.为什么选择PHP用于动态开发HTML文件
效率至上原则,PHP拥有强大的功能及效率 能更高效的开发HTML文件并用于实际用途.为企业和客人争取宝贵的时间.降低开发成本和工期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table{
width :800px; /*设置600像素表格*/
text-align: center; /*文本居中*/
margin:20px auto ; /*设置上下间距20px 居中对齐*/
border-collapse:collapse; /*设置单元格线条重叠*/
}
table,th,td {
border: 2px solid #666
}
table caption{
background-color:#efefef; /*表头添加背景色*/
}
table tr:first-child{
background-color:orange; /*设置第一行元素背景色为橘色*/
}
table tr:hover{ /*设置鼠标移动到变化*/
background-color:#efefef;
color:blue;
}
table tr img{
padding:5px; /*设置图片周边距5px*/
border-radius: 20px; /*设图片圆角 20px*/
}
table tr td a{
text-decoration: none; /*去除文字下滑线*/
width:100px; /*设定宽度*/
height:20px; /*设定高度*/
padding:5px; /*设定距离文字间距*/
border:1px solid #666; /*区域描边*/
background:white; /*指定背景色*/
color:black /*指定文字色*/
}
table tr td a:hover{
background:black;
color:white;
}
ul li{
text-align: center;
}
ul{
/*margin: auto;*/
}
h2{
font-size:3rem;
}
</style>
<title>够物清单</title>
</head>
<body>
<table>
<caption><h2>够物清单</h2></caption>
<tr>
<th>序列</th>
<th>名称</th>
<th>数量</th>
<th>照片</th>
<th>够买地址</th>
</tr>
<tr>
<th>1</th>
<td>西瓜</td>
<td>2只</td>
<td><img src="http://img1.gtimg.com/hb/pics/hv1/100/2/1386/90125260.jpg" width ="100px" title="西瓜"></td>
<td><a href="http://www.baidu.com">添加够物车</a></td>
</tr>
<tr>
<th>2</th>
<td>南瓜</td>
<td>2只</td>
<td><img src="http://img2.soyoung.com/post/20150416/1/20150416132951538.png" width ="100px" title="南瓜"></td>
<td><a href="http://www.baidu.com">添加够物车</a></td>
</tr>
<tr>
<th>3</th>
<td>葡萄</td>
<td>2斤</td>
<td><img src="http://www.dehong.gov.cn/uploadfile/2016/0331/20160331053853641.jpg" width ="100px" title="葡萄"></td>
<td><a href="http://www.baidu.com">添加够物车</a></td>
</tr>
</table>
<ul>
<li>温馨提示:</li>
<li>#水果保质期有限,请尽快食用#</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例