![[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、css、JavaScript三个语言；
后端又称作服务端是运行在服务器环境中的，php就是后端编程语言其中的一种；因为php程序的运行后输出的结果就是html，所以不难看出，任何网站都是有网页组成的，也就是说想做一个网站，必须要学会做网页，html就是网页的基本标签，因必须要掌握html，今后才可以更方便的制作网站。
2.为什么选择PHP开发动态网站？
支持几乎所有流行的数据库以及操作系统版本迭代快；php框架比较规范，开发效率高。 开发时间断 上线搞钱块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>出库表格</title>
</head>
<body>
<h2>出库清单</h2>
<p>小米5S</p>
<p>小米8</p>
<p>小米8s</p>
<p>小米6</p>
<hr> <!-- 分割线 -->
<ul>
<li>小米5S</li>
<li>小米8</li>
<li>小米8s</li>
<li>小米6</li>
</ul>
<hr>
<style type="text/css">
table{
width: 700px; /*定义宽度*/
text-align: center; /*文本居中*/
margin: 20px auto; /*外边距*/
border-collapse: collapse; /*合并边框线*/
}
table caption{
font-size: 23px; /*设置字体大小*/
font-weight: bold; /*字体加粗*/
color: red; /*字体颜色*/
margin-bottom: 20px; /*外边距下20*/
}
table,th,td{
border: 1px solid #666; /*外边框 像素1 实线 颜色*/
}
table tr:first-child{
background-color: lightgreen; /*背景颜色*/
}
table tr td img{
padding: 5px; /*内边距*/
border-radius: 10px; 外 /*边圆角10*/
}
table tr td a {
text-decoration-line:none; /*取消下划线*/
width: 140px; /*宽度*/
height: 40px; /*高度*/
padding:5px; /*内边距 5*/
border: 1px solid black /*外边距 1个像素点 实线 白色*/
background-color:width; /*背景颜色白色*/
color: black; /*字体颜色黑色*/
border-radius: 8px; /* 边圆角8*/
}
table tr td a:hover{
background-color: black /*背景颜色黑色*/
color:white; /*字体颜色 白色*/
}
</style>
<table>
<b><caption>出库清单</caption></b>
<tr>
<th>编号</th>
<th>产品名称</th>
<th>数量</th>
<th>缩略图</th>
<th>确认出库</th>
</tr>
<tr>
<th>1</th>
<th>小米5S</th>
<th>1部</th>
<td><img src="http://imgslim.geekpark.net/uploads/image/file/cc/df/ccdf157b82ddfd02258e96e68fa43f97.PNG" width="100px"></td>
<td><a href="https://www.mi.com/index.html">确认出库</a></td>
</tr>
<tr>
<th>2</th>
<th>小米8</th>
<th>1部</th>
<td><img src="http://imgslim.geekpark.net/uploads/image/file/cc/df/ccdf157b82ddfd02258e96e68fa43f97.PNG" width="100px"></td>
<td><a href="https://www.mi.com/index.html">确认出库</a></td>
</tr>
<tr>
<th>3</th>
<th>小米8s</th>
<th>1部</th>
<td><img src="http://imgslim.geekpark.net/uploads/image/file/cc/df/ccdf157b82ddfd02258e96e68fa43f97.PNG" width="100px"></td>
<td><a href="http://imgslim.geekpark.net/uploads/image/file/cc/df/ccdf157b82ddfd02258e96e68fa43f97.PNG">确认出库</a></td>
</tr>
<tr>
<th>4</th>
<th>小米6</th>
<th>1部</th>
<td><img src="http://imgslim.geekpark.net/uploads/image/file/cc/df/ccdf157b82ddfd02258e96e68fa43f97.PNG" width="100px"></td>
<td><a href="https://www.mi.com/index.html">确认出库</a></td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
![V1GBX9R9))3E6{XK}Y71]0G.png](https://img.php.cn//upload/image/241/113/459/1534296489643295.png "1534296489643295.png")
总结：
html可以什么都不写，但不推荐，会自动生成<html>
元素就是页面要呈现的内容，分为可见与不可见 <img> <h1> <br> 元素是用标签来表示的
标签是用来描述元素的，属性是用来描述标签的。
标签的四个公用属性：
style：内联样式 id：标识唯一元素 class：标识 同类元素 title：提示信息
