![[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
1.学习PHP为什么必须要掌握HTML?
答：
前端开发指的是静态页面的编写，主要涉及到html、css、JavaScript三个工具；
后端又称作服务器端，是运行在服务器环境中的，php就是后端编程语言其中的一种；因为php程序的运行后输出的结果就是html，所以不难看出，任何网站都是有网页组成的，也就是说想做一个网站，必须要学会做网页，html就是网页的基本标签，因必须要掌握html，今后才可以更方便的制作网站。
2.为什么选择PHP开发动态网站？
答：
php又叫做超文本预处理器，是一种开源的脚本语言，融合了c、java等其他的语言特点，学起来比较快，容易上手；php相对于其他的编程语言来说可以快速的执行动态网页，执行生成的html效率高。PHP具有非常强大的功能，支持几乎所有流行的数据库以及操作系统。更为重要的是PHP可以用C、C++进行程序的扩展！尤其是近几年的发展，促使应用领域广泛，版本迭代快；php框架比较规范，开发效率高。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格实例操作</title>
</head>
<body>
<table>
<caption>手机参数对比</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>型号</th>
<th>价格</th>
<th>缩略图</th>
<th>基本参数</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td><h2>vivo</h2></td>
<td>NEX旗舰版</td>
<td><b>￥4498</b></td>
<td><img src="https://2a.zol-img.com.cn/product/191_220x165/566/ceRo14zJK4flI.jpg" alt="" width="100"></td>
<td>
<ul>
<li>核心数：八核</li>
<li>内存：8GB</li>
<li>主屏尺寸：6.59英寸</li>
<li>电池容量：4000mAh</li>
<li>后置摄像头：主摄2x1200万像素</li>
<li>前置摄像头：800万像素</li>
</ul>
</td>
<td><a href="">点击对比</a></td>
</tr>
<tr>
<td>2</td>
<td><h2>华为</h2></td>
<td>Mate RS</td>
<td><b>￥9999</b></td>
<td><img src="https://2c.zol-img.com.cn/product/190_320x240/464/cek9voqaVYpeg.jpg" alt="" width="100"></td>
<td>
<ul>
<li>核心数：八核</li>
<li>内存：6GB</li>
<li>主屏尺寸：6英寸</li>
<li>电池容量：4000mAh</li>
<li>后置摄像头：彩色4000万像素+黑白2000万像素</li>
<li>前置摄像头：2400万像素</li>
</ul>
</td>
<td><a href="">点击对比</a></td>
</tr>
<tr>
<td>3</td>
<td><h2>魅族</h2></td>
<td>16 Plus</td>
<td><b>￥3498</b></td>
<td><img src="https://2c.zol-img.com.cn/product/192_220x165/334/ceRtdl8nJsFw.jpg" alt="" width="100"></td>
<td>
<ul>
<li>核心数：八核</li>
<li>内存：8GB</li>
<li>主屏尺寸：6.5英寸</li>
<li>电池容量：3640mAh</li>
<li>后置摄像头：2000万像素+1200万像素</li>
<li>前置摄像头：2000万像素</li>
</ul>
</td>
<td><a href="">点击对比</a></td>
</tr>
<tr>
<td>4</td>
<td><h2>小米</h2></td>
<td>MIX 2s</td>
<td><b>￥3999</b></td>
<td><img src="https://2f.zol-img.com.cn/product/190_220x165/101/ceiOd9tvonVNA.jpg" alt="" width="100"></td>
<td>
<ul>
<li>核心数：八核</li>
<li>内存：6GB</li>
<li>主屏尺寸：5.99英寸</li>
<li>电池容量：3400mAh</li>
<li>后置摄像头：双1200万像素</li>
<li>前置摄像头：500万像素</li>
</ul>
</td>
<td><a href="">点击对比</a></td>
</tr>
</table>
</body>
</html>
<style type="text/css">
table{width: 850px;text-align: center;margin: 20px auto;border-collapse: collapse;}
table caption {font-size:3rem;font-weight:bold;color:#666;margin-bottom:20px;}
table,th,td {border:1px solid #ccc;}
table tr:first-child {background:lightgreen;}
table tr:hover {background:#efefef;color:coral;}
table tr:hover td:nth-of-type(2){color: blue;}
table tr b{color: red;}
table tr td:nth-of-type(6){text-align: left;}
table tr td img {padding:5px;border-radius:10px;}
table tr td a {text-decoration:none;width:100px;height:40px;line-height:40px;padding:5px;border:1px solid black;background-color:#fff;color:#000;border-radius:8px;}
table tr td a:hover {background-color:#000;color:#fff;}
ul li{list-style: none;font-size: 14px;color: #666;}
</style>点击 "运行实例" 按钮查看在线实例
运行图片：
总结：
1、html文档什么都不写也可以，但不推荐，会自动生成<html><head></head><body></body></html>
2、双标签，如果没有正确关闭，浏览器会自动添加关闭标签
3、元素就是页面中要展现的内容，分为可见与不可见 <img><h1><p>，<br>
元素是用标签来表示的
4、标签是用来描述元素的工具
5、属性就是用来描述标签的
标签的四个公共属性：
style：内联样式，
id：标识唯一元素，
class：标识 同类元素，
title： 提示信息
6、双标签和单标签的区别
非可替换元素：就是直接写在html代码中的，然后由浏览器直接渲染出来<h2><p><li><a>
可替换元素：来自源码的外部，通过标签的属性引入：图片，文件，富（多）媒体，<img><link>
