![[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
后端也叫服务器端，运行在服务器环境中
总结：前端html代码，由浏览器负责主要编译并执行，
后端代码，例如php，由服务器上的特殊程序来运行。
2 php是用来干什么的？
动态生成html代码
php程序的运行结果就是html，所以要学好html
-----------------------------------------
为什么选择php？
除了php，还有java python asp、
流行原因：快：开发快、上手快、更新快、迭代快。
也是简单易学。对企业而言。开发周期快而简单。更适合于中小型的项目。
-----------------------------------------
为什么用框架开发？
php可以进行原生开发
国内：ThinkPHP5.1.20
国外： laravel 5.6
框架就是生 产力，就是开发规范
--------------------------------------------------------------
html文档什么都不写行不行？行，但不推荐。
双标签，如果没有正确关闭，浏览器会自动添加闭合标签
元素是页面中要展现的内容,可见与不可见，元素是用标签来表示的
重点：标签是工具、是武器，标签与语义相关联 是用来描述元素的工具
元素和标签不是一回事。有些人把元素称作标签（如“P标签”）。需要记住的是，元素是一码事，标签（不论是开始标签还是终止标签）是另一码事。例如，HEAD元素总是存在的，即使它的开始标签和终止标签都没有也是如此。
属性就是用来描述标签的
4个公共属性：style：内联样式
id标识唯一元素
class 标识 同类元素
title 提示信息
单标签与双标签的区别
双标签：非可替换元素：就是直接卸载了html代码中的 主要是文本 然后由浏览器直接渲染出来
单标签：可替换元素：主要是为了引入外部文件。以/>结尾
表格标签的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
table {
width:1000px;
text-align:center;
margin:20px auto;
border-collapse: collapse;
background:skyblue;
}
table caption {
font-size:3rem;
font-weight:bolder;
color:red;
margin-bottom:20px;
}
table th,td {
border:1px solid #777;
}
table th {
background:skyblue;
}
table tr:hover {
background:pink;
color:coral;
}
table tr td img {
padding:5px;
border-radius:10px;
}
/*将a标签模拟成按钮*/
table tr td a {
/*去掉下划线*/
text-decoration-line:none;
width:240px;
height:80px;
padding:5px;
border:1px solid black;
background-color: white;
color:black;
border-radius:10px;
}
table tr td a:hover{
background-color: red;
color:white;
}
table tr td img{
width:50px;
}
</style>
<h2>购物清单</h2>
<p>牛奶</p>
<p>苹 果</p>
<p>电风扇</p>
<hr/>
<ul>
<li>牛奶</li>
<li>苹 果</li>
<li>电风扇</li>
</ul>
<hr/>
<table >
<caption>电脑配置清单</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>型号</th>
<th>数量</th>
<th>缩略图</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>显卡</td>
<td>GTX1080TI</td>
<td>1件</td>
<td><img src="https://img14.360buyimg.com/n7/jfs/t5833/273/120885697/136166/c3392826/591d69f7Na685c02c.jpg" alt="显卡"></td>
<td><a href="https://item.jd.com/5077654.html">点击购買</a></td>
</tr>
<tr>
<td>2</td>
<td>CPU</td>
<td>I7-8700K</td>
<td>1件</td>
<td><img src="https://img11.360buyimg.com/n7/jfs/t23968/191/387608657/157525/5205504c/5b2e012dN2b4aabf2.jpg" alt="CPU"></td>
<td><a href="https://item.jd.com/18794427126.html">点击购買</a></td>
</tr>
<tr>
<td>3</td>
<td>主板</td>
<td>ROG-STRIX B360-F GAMING</td>
<td>1件</td>
<td><img src="https://img12.360buyimg.com/n7/jfs/t16888/100/1874601305/258358/1d3b858d/5ad9831eNf429a75f.jpg" alt="主板"></td>
<td><a href="https://item.jd.com/27423161547.html">点击购買</a></td>
</tr>
<tr>
<td>4</td>
<td>散热器</td>
<td>酷冷至尊T400i</td>
<td>1个</td>
<td><img src="https://img12.360buyimg.com/n7/jfs/t5719/255/1740733584/348144/c373eb36/592926b7Nea3d17fd.jpg" alt="散热器"></td>
<td><a href="https://item.jd.com/2771147.html">点击购買</a></td>
</tr>
<tr>
<td>5</td>
<td>内存</td>
<td>复仇者LPX DDR4 2400 8G</td>
<td>2根</td>
<td><img src="https://img14.360buyimg.com/n7/jfs/t19108/34/2335384211/55150/acaf058b/5af2bde9N47ec826a.jpg" alt="内存"></td>
<td><a href="https://item.jd.com/10798570134.html">点击购買</a></td>
</tr>
<tr>
<td>6</td>
<td>硬盘</td>
<td>三星970 EVO 250G M.2 NVMe</td>
<td>1个</td>
<td><img src="https://img11.360buyimg.com/n7/jfs/t21034/122/2323457312/199927/ac30eb33/5b500991N43688c0d.jpg" alt="硬盘"></td>
<td><a href="https://item.jd.com/13732823691.html">点击购買</a></td>
</tr>
<tr>
<td>7</td>
<td>机箱</td>
<td>追风者 416PTG机箱</td>
<td>1台</td>
<td><img src="https://img12.360buyimg.com/n7/jfs/t23026/352/1350245485/261993/53347579/5b5bcd00N6d90b14d.jpg" alt="机箱"></td>
<td><a href="https://item.jd.com/4185632.html">点击购買</a></td>
</tr>
<tr>
<td>8</td>
<td>电源</td>
<td>全汉 蓝暴炫动Ⅱ代500W 电源（额定500W）</td>
<td>1件</td>
<td><img src="https://img12.360buyimg.com/n7/jfs/t18940/345/2362978186/274419/ce08f827/5af16402Nf785f025.jpg" alt="电源"></td>
<td><a href="https://item.jd.com/1293627.html">点击购買</a></td>
</tr>
</table>
<hr/>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：对于表格table的知识点的了解及应用。以及php开发的优点，能够快速上手，开发周期短，容易极快的完成项目的开发工作
