1.学习PHP为什么要学习HTML？
答：我们平常接触到的web页面是有HTML语言标记中HTML元素构成的文本文件，而HTML文本任何浏览器都支持的。
PHP是一种动态生成HTML的编程语言，在PHP生成HTML文档后，由浏览器解释执行，如果我们不懂HTML的知识，就不会知道HTML在浏览器端生成的效果如何，是否报错，是否和我们预期的结果一直。
2.为什么选择PHP作为后端开发的语言？
答：1.PHP上手快，进修时间成本较低：与Javaweb 相比学习周期是比较短的，语言没Java复杂吧。
2.开发周期短：在与其他服务器端语言比较，开发周期，项目上架快，实用。
3.迭代快：目前PHP语言已经更新到7版本了。
table作业：
收藏
<!DOCTYPE html>
<html>
<head>
<title>古风歌曲推荐</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="chapter01/images/music.png">
<style type="text/css">
table {
border:1px solid #666;
border-collapse: collapse;/*属性值collapse边框合并为单一边框，忽略spacing和empty-cells.separate/inherit*/
width: 800px;
text-align: center;
margin:20px auto;/*上下20，左右自动*/
}
table caption {
font-family: 微软雅黑;
font-size: 2rem;/*1rem=10px*/
color:#668;
font-weight: bolder;
margin-bottom: 20px;
}
table, th, td {/*注意table，th，td与table th td 的不同*/
border:1px solid #888;/*border属性：按顺序写 width值 style值 color值；style值有：dotted点，double双线，dashed 虚线*/
/*text-align: left;*/
}
table tr:first-child {/*定义/控制表格的第一个行table row first*/
background-color: lightgreen;
}
table tr:hover { /*所有行施加一个动作，hover 变色coral*/
background-color: #efefef;
color: coral;/*珊瑚色*/
}
/*table tr td img {
padding: 5px;
border-radius: 10px;
}*/
table tr td img {
width: 50px;
border-radius: 50%;
box-shadow: 3px 3px 3px #888;
}
/*table tr td a {
text-decoration: none;
width: 30px;
height: 40px;
padding: 5px;
border:1px solid black;
background-color: white;
color:black;
border-radius: 8px;
}*/
table tr td a:hover {/*当鼠标悬浮的时候，变成黑底白字*/
background: black;
color:white;}
.td_left{text-align: left;}
/*li{
list-style-type: none;
}*/
</style>
</head>
<body>
<table>
<caption>古风歌曲推荐</caption>
<tr>
<th>编号</th>
<th>曲名</th>
<th>演唱</th>
<th>封面</th>
<th>试听地址</th>
</tr>
<tr>
<td>1</td>
<td class="td_left">《随天老，自白头》</td>
<td>楠葵子</td>
<td><img src="chapter01/images/stl.png"></td>
<td><a href="https://music.163.com/#/search/m/?s=%E9%9A%8F%E5%A4%A9%E8%80%81%EF%BC%8C%E8%87%AA%E7%99%BD%E5%A4%B4&type=1">《随天老，自白头》</a></td>
</tr>
<tr>
<td>2</td>
<td class="td_left">《梨花凉》</td>
<td>叶洛洛</td>
<td><img src="chapter01/images/lhl.png"></td>
<td><a href="https://music.163.com/#/song?id=470677635">《梨花凉》</a></td>
</tr>
<tr>
<td>3</td>
<td>
<ul>
<li class="td_left">《青山入我怀》</li>
<li class="td_left">《松烟入墨》</li>
</ul>
</td>
<td>Winky诗</td>
<td><img src="chapter01/images/winky.png"></td>
<td>
<ul>
<li><a href="https://music.163.com/#/search/m/?id=470677635&s=%E9%9D%92%E5%B1%B1%E5%85%A5%E6%88%91%E6%80%80&type=1">《青山入我怀》</a></li><!-- 可以通过display:block 转换成块 然后style，left -->
<li><a href="https://music.163.com/#/song?id=28765208">《松烟入墨》</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行效果图如下：
总结：一、需要注意的知识点：
1.border属性：
border-width，border-style，border-color 按顺序填写，(border: 800px solid pink)但也可以某项不写；
width：当边框样式是none时候，不起作用，可以值为：thin(细)/medium/thick(粗)/10px；
style:可取值none，dotted点，dashed虚线,solid实现，double双线，
2.border-collapse属性：
border-collapse:collapse;/*属性值collapse边框合并为单一边框，忽略spacing和empty-cells.separate/inherit*/
3.table tr:first-child {/*定义/控制表格的第一个行table row first*/
background-color: lightgreen;
4.border-radius属性：圆角边框
值可以是百分数/px；一般都是写一个值=四个角值，
5.table tr:first-child {/*定义/控制表格的第一个行table row first*/
background-color: lightgreen;
6.box-shadow属性： 向框添加一个或多个阴影。
语法：box-shadow: h-shadow v-shadow (blur) (spread) (color) (inset);
box-shadow: 10px 10px 模糊距离px 5px #888888; 改为内部阴影
7.四个通用属性：
id, class, title, style
8.单双标签使用的场合；
二、依然迷茫的问题：
如何让：曲名列居中，而且是对齐的 既：居中且靠一边对齐的
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p
{
border: thin dashed rgb(250,0,255)
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
