在朱老师的第一节课上,我总学到了,php和html直接的关系,为啥选择php语言,html的标签以及单标签双标签区别,具体展现如下:
1,学习PHP为什么必须要掌握HTML?
答:
首先开发分为前端和服务器端开发,而前端是指静态页面的编写,用到了HTML,CSS,JAVASCRIPT,而前端代码是由浏览器解析并且运行,而php的作用原理是动态生成HTML代码,如果将htm基本标签元素进行掌握,再利用css进行页面布局,后期学习PHP会更加轻松容易对页面进行数据交互绑定
2.为什么选择PHP开发动态网站?
答:
php虽然不是开发程序中最简单的,但是一般中小型项目中,其开发周期相比其它语言较短,这也是众多企业选择php语言的原因之一,快速有效!
3,标签的四个公共属性;
style:内联样式,
id 标识唯一元素
class 标识 同类元素
title 标题属性
4,双标签和单标签的区别
单标签用/>结尾,只是一种简写 (<img />是单标签)
双标签可以替换所有的单标签
在学习中我懂得 如果对一组相关的事物具体描述,应该使用表格标签 下面是我利用table标签制作的简单表格
实例
<!DOCTYPE html> <html> <head> <title>购物清单</title> </head> <style type="text/css"> table{ width: 700px; text-align: center; border-collapse: collapse; /*将table边框由双框变为单框*/ margin: 20px auto; } /*给标题设置样式*/ table caption{ font-size: 3em; font-weight: bolder; /*设置边框加粗*/ color: #666; margin-bottom: 20px; } /* table 的标题以及文本设置边框样式*/ table,th, td{ border: 1px solid #666; } /*给table下的第一个tr设置样式*/ table tr:first-child{ background-color: lightgreen; } table tr:hover{ background-color: #efefef; color: coral; } table tr td img{ padding: 5px; border-radius: 10px; /*给图片添加圆角*/ } /*将a标签模拟成按钮*/ table tr td a{ text-decoration: none; /*去掉下划线*/ width: 140px; height: 30px; border:1px solid yellow; /*给边框设置像素以及颜色*/ background-color: white; color: black; border-radius: 5px /*产生圆角*/ } </style> <body> <h2>购物清单</h2> <!-- 段落标签 --> <p>空调</p> <p>冰箱</p> <p>冷饮</p> <hr> <!-- 无序列表 --> <ul> <li>空调</li> <li>冰箱</li> <li>冷饮</li> </ul> <!-- 如果对一组相关的事物具体描述,应该使用表格标签 --> <table> <!-- 标题内容 --> <caption>购物清单</caption> <!-- 表头 --> <tr> <th>编号</th> <th>名称</th> <th>数量</th> <th>介绍图</th> <th>预定</th> </tr> <!-- 表的内容 --> <tr> <td>1110</td> <td>大米</td> <td>3袋</td> <td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534264768187&di=743600325e3ca8d410eeeb5b4e72315f&imgtype=0&src=http%3A%2F%2Fimg001.hc360.cn%2Fm1%2FM03%2F55%2FA3%2FwKhQb1Q8l-iERKR5AAAAAK7rXLs932.jpg" width="100"> </td> <td><a href="">预定</a></td> </tr> <tr> <td>1111</td> <td>腊肉</td> <td>2斤</td> <td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534264955804&di=4564bf3fb6187da2a85da222ee57931e&imgtype=0&src=http%3A%2F%2Fpic8.photophoto.cn%2F20080820%2F0042040254330043_b.jpg" width="100"> </td> <td><a href="">预定</a></td> </tr> <tr> <td>1112</td> <td>榴莲</td> <td>5斤</td> <td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534264790581&di=168578a81f26dd423916069ed3ce0dec&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3868539636%2C212814347%26fm%3D214%26gp%3D0.jpg" width="100"> </td> <td><a href="">预定</a></td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例