![[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
一、概述
本次课程第一节主要讲述为什么要学习HTML和PHP。第二节讲述了表格的简单应用。
二、为什么学习PHP和HTML？
为什么选择PHP：1.快：上手快。开发快。迭代快。PHP是生成动态网页的工具之一。PHP的语法类似于C，Perl，ASP或者JSP。对于那些对上述之一的语言较熟悉的人来说，PHP上手快。相反的，如果你对PHP了解较多，那么你对于其他几种语言的学习都比较简单了。如果很了解HTML，甚至你已经知道怎样用编辑设计软件或者手工来制作好k的WEB站点。由于PHP代码能够无障碍的添加进你的站点，在你设计和维护站点的同时，你可以很轻松的加入PHP使得你的站点更加具有动态特性。
三、课程代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物清单</title>
<style type="text/css">
table caption{
color: red;
font-size: 30px;
}
/* table tr td img {
padding: 5px;
width: 50px;
height: 30px;
border-radius: 10px;
}*/
table tr td img {
padding:5px;
width: 100px;
/*padding:5px;*/
/*不是图片大小！！！元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。*/
border-radius: 10px;
}
table{
border-collapse: collapse;
text-align: center;
background-color: pink;
color: green;
width: 800px;
margin:20px auto;
border: 1px solid black;/*solid:边界样式;这里面写在table只能外边界*/
}
table tr td{
border: 1px solid green;/*solid:边界样式;*/
}
table tr:first-child{
background-color: lightblue;
color:black;
}
table a{
border: 1px solid black;
border-radius: 8px;
background-color: white;
color: black;
}
a:hover{
background-color: black;
color: white;
}
table tr td:hover {
background-color: #efefef;
color: coral;
}
</style>
</head>
<body>
<table>
<caption>购物清单</caption>
<tr>
<th>序号</th>
<th>买啥</th>
<th>啥牌</th>
<th>买几个</th>
<th>啥模样</th>
<th>咋买</th>
</tr>
<tr>
<td>1</td>
<td>milk</td>
<td>mengniu</td>
<td>1</td>
<td><img src="image/milk.jpg"></td>
<td><a href="https://www.taobao.com">buy</a></td>
</tr>
<tr>
<td>2</td>
<td>apple</td>
<td>hong</td>
<td>1</td>
<td><img src="image/apple.jpg"></td>
<td><a href="https://www.taobao.com">buy</a></td>
</tr>
<tr>
<td>3</td>
<td>fan</td>
<td>haier</td>
<td>1</td>
<td><img src="image/fan.jpg"></td>
<td><a href="https://www.taobao.com">buy</a></td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行截图：
四、课后作业。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>火影忍者手游角色介绍</title>
<style type="text/css">
table caption{
color: red;
font-size: 30px;
}
table tr td img {
/*padding:0px;*/
width: 300px;
/*padding:5px;*/
/*不是图片大小！！！元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。*/
border-radius: 10px;
}
table{
border-collapse: collapse;
text-align: center;
background-color: white;
color: black;
width: 800px;
margin:20px auto;
border: 1px solid black;/*solid:边界样式;这里面写在table只能外边界*/
}
table tr td{
border: 1px solid green;/*solid:边界样式;*/
background-color: #FFCC99;
}
table tr th{
border: 1px solid green;
background-color: lightblue;
color:black;
}
table a{
border: 1px solid black;
border-radius: 8px;
background-color: white;
color: black;
}
a:hover{
background-color: black;
color: white;
}
table tr td:hover {
background-color: #efefef;
color: coral;
}
</style>
</head>
<body style="background-color: grey">
<div style="display: inline;float: left; color: white;">
<h3>今天介火影里面的热门人物</h3>
<ul>
<li>水门</li>
<li>宇智波鼬</li>
<li>小南</li>
</ul>
</div>
<div id="one" style="display: inline; float: left;">
<table>
<caption></caption>
<tr>
<td colspan="5" valign="middle" height="35" background="bj.jpg">
<font size="3" color="yellow">
<strong>火影忍者手游角色介绍</strong>
</font>
</td>
</tr>
<tr>
<th>角色</th>
<th>形象</th>
<th>技能1介绍</th>
<th>技能2介绍</th>
<th>大招技能介绍</th>
</tr>
<tr>
<td>水门</td>
<td><img src="s.jpg"></td>
<td>神速</td>
<td>飞雷神</td>
<td>时空间螺旋丸</td>
</tr>
<tr>
<td>宇智波鼬</td>
<td><img src="y.jpg"></td>
<td>分身大爆破</td>
<td>天照</td>
<td>月读</td>
</tr>
<tr>
<td>小南</td>
<td><img src="x.jpg"></td>
<td>分离</td>
<td>升降</td>
<td>天使审判</td>
</tr>
</table>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果：
五、总结
别看table里面的标签很少，但是实际上是基础中的基础。
<th>和<td>的区别：th的字体有加粗。
遇到问题：错把padding当作设置图片的宽度。
课后作业的练习除了表格还对选择器有了加深的认识，作业中用到了float。
六、附录
手写代码
