Collection
Collection
1、学习PHP为什么必须要掌握HTML?
主要是PHP最后展现出来的结果都是通过HTML展现。所以必须要熟悉结果的展现，否则不知道结果怎么展现，前面的开发就等于没有用了。
2、为什么选择PHP开发动态网站？
主要还是PHP的开发非常快，有利于项目的快速开发、快速迭代，所以选择PHP。
下面是根据CSS学习的基础属性，设置HTML的table展现：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
table {
width: 700px;
text-align: center;
margin: 20px auto;
border-collapse: collapse;
}
table caption {
font-size: 3rem; /*1rem=10px*/
font-weight: bolder;
color: #666;
margin-bottom: 20px;
}
table,th,td{
border: 1px solid #666;
}
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-line: none;
width: 140px;
height: 40px;
padding: 5px;
border: 1px solid black;
background-color:white;
color: black;
border-radius: 8px;
}
table tr td a:hover
{
background-color: black;
color: white;
}
</style>
<table>
<caption>购物清单</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>品q牌</th>
<th>数量</th>
<th>缩列图</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>牛奶</td>
<td>伊利</td>
<td>1箱</td>
<td><img src="milk.jpg" width="100"></td>
<td><a href="http://jd.com">点击购a买</a></td>
</tr>
<tr>
<td>2</td>
<td>苹a果</td>
<td>红富士</td>
<td>5斤</td>
<td><img src="apple.jpg" width="100"></td>
<td><a href=" 买</a></td>
</tr>
<tr>
<td>3</td>
<td>风扇</td>
<td>美的</td>
<td>一台</td>
<td><img src="fan.jpg" width="100"></td>
<td><a href=" 买</a></td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
通过上面的编写，熟悉主要两种属性设置
（1）父到子元素的属性设置：table tr td a ｛属性｝
（2）子元素的第一个属性设置：table tr:first-child{}
同时学习到一些特殊的属性作用：
text-decoration-line: none; 可以去超链接掉的下划线。
a:hover ；通过此属性，可以设置鼠标滑过的属性。