![[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代码。
PHP的运行结果就是HTML
为什么要学习PHP？
上手快，开发快，更新快，更新快，迭代快。
我们为什么要用框架开发？
PHP可以原生开发项目
国内：TP 5.1.2
国外：laravel 5.6
框架就是shengchan力，就是开发规范
1.HTML文档什么都不写 行不行 ？ 行 但不推荐，会自动生成HTML head body等标签
2.双标签如果没有正确关闭标签，浏览器会自动添加关闭标签
3.元素是页面中呈现的内容，可见和不可见，元素是用标签来表示的
4.标签 标签是工具，是武器，与语义相关联。标签是用来描述元素的工具
5.属性就是用来描述标签的 style 、title、id、class等等
6.双标签与单标签的区别
《CSS权威指南》
非可替换元素 ，直接写在HTML代码中，主要是文本，然后由浏览器渲染输出
可替换元素，通过属性引入，图片，文件，富媒体
单标签：可替换元素
双标签：非可替换元素
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>购物清单</h2>
<p>牛奶</p>
<p>apple</p>
<p>电风扇</p>
<hr />
<!-- 对于具有关联性的内容，用列表进行展示 -->
<ul type="disc">
<li>牛奶</li>
<li>apple</li>
<li>西瓜</li>
</ul>
<ul type="square">
<li>牛奶</li>
<li>apple</li>
<li>西瓜</li>
</ul>
<ul type="circle">
<li>牛奶</li>
<li>apple</li>
<li>西瓜</li>
</ul>
<hr />
<img src="./static/images/footlogo.png" alt="" style="border-radius: 50%" title="米" id="mi" /><br />
<hr />
<!-- 对相关事物的具体描述，用表格 -->
<table>
<caption>购物清单</caption> <!-- 表名 -->
<tr>
<th>编号</th> <!-- 表头 -->
<th>名称</th>
<th>数量</th>
<th>缩略图</th>
<th>操作</th>
</tr>
<tr>
<td>1</td> <!-- 单元格 -->
<td>牛奶</td>
<td>10瓶</td>
<td><img src="./static/images/8_14/milk.jpg" alt="" /></td>
<td><a href="#">点击</a></td>
</tr>
<tr>
<td>2</td>
<td>电风扇</td>
<td>10个</td>
<td><img src="./static/images/8_14/fan.jpg" alt="" /></td>
<td><a href="#">点击</a></td>
</tr>
<tr>
<td>3</td>
<td>apple</td>
<td>5斤</td>
<td><img src="./static/images/8_14/apple.jpg" alt="" /></td>
<td><a href="#">点击</a></td>
</tr>
</table>
<style>
img{
width:100px;
}
table{
width:700px;
margin:20px auto; /*外边距 上下填充20px 左右自动居中*/
text-align:center;
border-collapse:collapse; /*重叠表格线*/
}
table caption{
font-size:30px;
font-weight:bold;
}
table,th,td{
border: 1px solid #000;
}
table tr:first-child{ /*第一个tr*/
background-color:lightseagreen;
}
table tr:hover{
background-color:#ccc;
color:red;
}
table tr td img{
padding:10px; /*内边距*/
border-radius:20px; /*设置圆角*/
}
/*a标签模拟成按钮*/
table tr td a{
text-decoration:none; /*去掉下划线*/
width:140px;
height:40px;
padding:10px;
border:2px solid #000;
border-radius:20px;
}
table tr td a:hover{
background-color:#000;
color:#fff;
}
#mi{
width:200px;
}
#mi:hover{
width:250px;
}
</style>
</body>
</html>点击 "运行实例" 按钮查看在线实例
