今天主要是学习了php和html的关系，以及table,tr,td,ul,li等标签的使用
1 学习php为什么还要学习html？
前端开发主要是静态页面的编写，主要用到三个工具：html css Javascript
后端也叫服务器端，运行在服务器环境中
前端html代码，由浏览器负责主要编译并执行，后端代码，例如php，由服务器上的特殊程序来运行。
2 php是用来干什么的？
动态生成html代码
php程序的运行结果就是html，所以要学好html
实例
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
table{
width:700px; /*宽度*/
text-align: center; /*文本居中对齐*/
margin:20px auto; /*上下20像素,左右自动居中*/
border-collapse: collapse; /*折叠表格线*/
}
table caption{ /*标题设置样式*/
font-size:2rem; /*20像素，1rem=10像素*/
font-weight:bolder; /*加粗*/
color:#666; /*颜色*/
margin-bottom: 20px; /*下边距20像素*/
}
table,th,td{
border:1px solid #666; /*给表格1像素的线 颜色666*/
}
table tr:first-child{ /*table标签下的tr标签第一行*/
background-color: pink; /*背景颜色*/
}
table tr:hover{ /*给table标签下tr 伪元素*/
background-color: #afefef; /*背景色*/
color:red; /*文本色*/
}
table tr td img{ /*选择img*/
padding:10px;
border-radius:10px; /*图片圆角10像素*/
}
table tr td a { /*选择a标签*/ /*把a标签模拟按钮*/ /*找table下的tr(行) 然后td(单元格) 然后a*/
text-decoration: none; /*去掉下划线*/
width:140px; /* 宽*/
height:40px; /*高*/
padding:5px; /*内边距*/
border:1px solid black; /*表格线和颜色*/
background: white; /*背景*/
color:black; /*文本颜色*/
border-radius: 8px; /*圆角8像素*/
}
table tr td a:hover { /*给a标签添加移动效果*/
background: blue;
color:white;
}
/*table tr td img:hover{
width: 80%;height: 80%
}*/
</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>酱猪蹄</td>
<td>卤味</td>
<td>1个</td>
<td><img src="http://gong.3hgc.com/kecheng/1.jpg" width="100"></td>
<td><a href="http://taobao.com">点击查看</a></td>
</tr>
<tr>
<td>2</td>
<td>酱排骨</td>
<td>卤味</td>
<td>1袋</td>
<td><img src="http://gong.3hgc.com/kecheng/2.jpg" width="100"></td>
<td><a href="http://taobao.com">点击查看</a></td>
</tr>
<tr>
<td>3</td>
<td>大礼包</td>
<td>麻辣</td>
<td>1包</td>
<td><img src="http://gong.3hgc.com/kecheng/3.jpg" width="100"></td>
<td><a href="http://taobao.com">点击查看</a></td>
</tr>
<tr>
<td>4</td>
<td>牛肉粉</td>
<td>酸爽</td>
<td>1包</td>
<td><img src="http://gong.3hgc.com/kecheng/4.jpg" width="100"></td>
<td><a href="http://taobao.com">点击查看</a></td>
</tr>
<tr>
<td>5</td>
<td>提拉米苏</td>
<td>甜点</td>
<td>1箱</td>
<td><img src="http://gong.3hgc.com/kecheng/5.jpg" width="100"></td>
<td><a href="http://taobao.com">点击查看</a></td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
PHP动态生成html
双标签，如果没有正确关闭，浏览器会自动添加闭合标签
元素是页面中要展现的内容,可见与不可见，元素是用标签来表示的
单标签与双标签的区别
双标签：非可替换元素：就是直接卸载了html代码中的 主要是文本 然后由浏览器直接渲染出来
单标签：可替换元素：主要是为了引入外部文件。以/>结尾
掌握快捷键整行复制、多点选择
