Correction status:qualified
Teacher's comments:
笔记:
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>
点击 "运行实例" 按钮查看在线实例