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开发的优点,能够快速上手,开发周期短,容易极快的完成项目的开发工作