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>