前端 跟python没有任何关系 什么是前端? 任何与用户直接打交道的操作界面都可以称之为前端 比如:电脑界面,手机界面,平板界面 什么是后端? 暂时先理解成 幕后操作者 不直接与用户打交道 为什么要学前端 因为你们是全栈开发工程师 前端的学习流程 自制力 来老男孩学习的心路历程 1.信心满满 老子一定能学会 凭啥学不会 2.哎呦卧槽 好像有点难 可能学不会 3.我靠 怎么还不毕业 老子要出去挣大钱 4.卧槽 怎么毕业了 我啥都不会 软件开发架构 c/s b/s Web服务的本质: 浏览器中敲入网址回车发送了几件事? 1.浏览器朝服务端发送请求 2.服务端接收请求 3.服务端返回相应的响应 4.浏览器接收响应 根据特定的规则渲染页面展示给用户看 四大特性: 1.基于请求响应 2.基于TCP/IP之上的作用于应用层的协议 3.无状态(服务端无法保存用户的状态,一个人来一千次 我都记不住 还当你如初见) 4.无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了) websocket 相当于是HTTP协议的一个大的补丁 它支持长连接 请求数据格式 请求首行(标识HTTP协议版本,当前请求方式) 请求头(一大堆k,v键值对) 请求体(携带的是一些敏感信息比如 密码,身份证号...) 响应数据格式 响应首行(标识HTTP协议版本,响应状态码) 响应头(一大堆k,v键值对) 响应体(返回给浏览器页面的数据 通常响应体都是html页面) 响应状态码 用一串简单的数字来表示一些复杂的状态或者提示信息 1XX:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据 2XX:服务端成功响应 你想要的数据(请求成功200) 3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 302) 4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403) 5XX:服务器内部错误(500) 请求方式 1.get请求 朝服务端要资源(比如浏览器窗口输入www.baidu.com) 2.post请求 朝服务端提交数据(比如用户登录 提交用户名和密码) URL:统一资源定位符(大白话 就是网址) HTML 超文本标记语言 要想让你的页面能够正常被浏览器显示出来 你所写的页面 就必须遵循html标记语法 也就意味着所有能够被浏览器显示出来的页面 内部都是html代码 浏览器只认识html css js web本质 浏览器 服务器 文件(后缀名是.html结尾的文件,也就意味着 只要看到.html结尾文件 那么它就是一个前端页面文件) 文件的后缀名仅仅是给人看的 计算机无所谓 因为都是二进制数据 HTML注释 写网页的一套标准 注释是代码之母 <!--单行注释--> <!-- 多行注释 多行注释 --> 一般情况下 html的注释都会按照下面的方式书写 <!--导航条样式开始--> <!--导航条样式结束--> HTML文档结构 <html> <head></head>:head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的 <body></body>:body内的标签 就是浏览器展示给用户看的内容 </html> 打开html页面的两种方式 1.找到文件路径 选择浏览器打开 2.pycharm快捷方式直接打开 标签的分类1: 1.双标签(<h1></h1> <a></a>) 2.单标签(自闭和标签 <img/>) head内常用标签 title用来显示网页标题 style用来控制样式的 内部支持写css代码 script内部支持写js代码 也支持导入外界的js文件 link专门用来引入外部的css文件 标签的分类2 1.块儿级标签(独占浏览器一行) div p h 1.块儿级标签可以修改长宽 2.块儿级标签内部可以嵌套任意的块级标签 但是p标签虽然是块儿级标签 但是他不能够其他块儿级标签 包括自身 可以嵌套行内标签 总结: 只要是块儿级标签 都可以嵌套行内标签 p标签只能嵌套行内 其他块儿级可以嵌套任意的块儿级标签 2.行内标签(自身文本多大就占多大) span b s i u div和span通常都是用来构建网页布局的 body内常用标签 基本标签 h标签:标题标签 p标签:段落标签 符号 常用标签 div span p img src存放的是图片的路径(该路径可以是本地的也可以是网上的) 1.也可以放url(会自动请求该url获取相应数据) 2.也可以直接放图片的二进制数据 会自动转换成图片 alt当图片加载不出来的时候 显示的提示信息 title当鼠标悬浮在图片上 提示的信息 height,width 当你只指定一个参数的时候 另外一个会等比例缩放 a href后面存放url的时候 点击跳转到该url 如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色 target 默认是_self当前页面跳转 _blank新建页面跳转 锚点功能(回到顶部) href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签 每一个标签都应该有三个比较重要的属性 1.id值 该值就类似于人的身份证号 在用一个html文档id应该保证唯一不重复 2.class值 该值就类似于面向对象里面的继承 可以写多个 3.style(不是必备) 支持在标签内直接写css代码 属于行内样式 优先级最高 补充 任何标签都支持自定义属性!!! 列表标签 表格标签(*****) <table> <thead></thead> <tbody></tbody> </table> border 表格边框 cellpadding 内边距 cellspacing 外边距 tr表示一行 th和td都是文本 建议在thead内用th tbody内用td colspan表示的水平方向 rowspan表示的竖直方向 表单标签(******) 能够接收用户输入(输入 选择 上传)并将其发送给后端 以注册实例位例讲解form表单 action控制数据提交的目的地 1.不写的情况下 默认提交到当前页面所在的路径 2.写全路径(https://www.baidu.com) 3.路径后缀(/index/) input input标签就类似于是前端变形金刚 type text:普通文本 password:密文 不展示明文 date:日期 submit:触发提交动作 button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作 reset:重置表单内容 radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked" checkbox:多选 同上 可以设置默认值 file:获取用户上传的文件 select标签 默认是单选 可以通过multiple变成多选 如果想默认选择 用selected (selected="selected") textarea标签 获取用户输入的大段文本 form表单默认是get请求 你需要通过method参数 换成post提交 form表单中 要想触发提交动作 只有两种情况可以 1.input标签type指定成submit 2.直接写button标签 获取用户输入(输入 选择 上传...)的标签 都必须有一个name属性 这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value <input type="text" id="d1" name="username" value="默认值"> name就相当于是字典的key value就是字典的值 获取都的用户输入都会被放入value属性中 form表单传文件的时候 需要指定enctype参数 emmet插件 防呆措施
前端: 跟Python没有任何关系 什么是前端? 任何与用户直接打交道的操作界面都可以称之为前端 例:电脑界面,手机界面,平板界面 前端基础: HTML(内容:网页的骨架(标签)) CSS(外观:网页的样式:(选择器+属性)) JavaScript(动作:网页的动态效果(基础语法+BOM&DOM操作))(语言:bug多) javaScript :一门语言,可以写后端 前端框架:Bootstrap 要求:看懂,会改 web:软件开发架构:c/s,b/s web服务的本质: 浏览器中敲入网址回车发送了几件事? 1.浏览器中敲入网址回车发送了几件事? 1.浏览器朝服务端发送请求 2.服务端接受请求 3.服务端返回响应的响应 4.浏览器接收响应,根据特点规则渲染页面展示给用户看 HTTP协议(超文本传输协议) 规定了浏览器与服务器之间传输的数据格式 四大特性: 1.基于请求(点击页面)响应(页面跳转展示) 2.基于TCP/IP之上的作用于应用层的协议 3.无状态(服务端无法保存用户的状态) 4.无连接(请求来一次响应一次,之后立马断开,两者之间不再有任何关系) websocket 相当于HTTP协议 的一个大补丁, 支持长连接 请求数据格式 1.请求首行(标识HTTP协议版本,当前请求方式) 2.请求头(一大堆k,v键值对) 3.请求体(携带的是一些敏感信息比如 密码,身份证号...) 响应数据格式 响应首行(标识HTTP协议版本,响应状态码) 响应头(一大堆k,v键值对) 响应体(返回给浏览器页面的数据 通常响应体都是html页面) 响应状态码 用一串简单的数字来表示一些复杂的状态或者提示信息 1XX:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据 2XX:服务端成功响应 你想要的数据(请求成功200) 3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 302) 4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403) 5XX:服务器内部错误(500) 请求方式: 1.get请求 朝服务端要资源(比如浏览器窗口输入www.baidu.com) 2.post请求 朝服务端提交数据(比如用户登录 提交用户名和密码) URL:统一资源定位符(网址) HTML: 超文本标记语言 h1 a img 要想让你的页面能够正常被浏览器显示出来 你所写的页面 就必须遵循html标记语法 也就意味着所有能够被浏览器显示出来的页面 内部都是html代码 浏览器 只认识 html css,js web本质 浏览器 服务器 文件(后缀名是.html结尾的文件,也就意味着 只要看到.html结尾文件 那么它就是一个前端页面文件) 文件的后缀名仅仅是给人看的 计算机无所谓 因为都是二进制数据 HTML 注释: 注释是 代码之母 <!--单行注释--> <!-- 多行注释 --> 一般情况下 html的注释都会按照下面的方式书写 <!--导航条样式开始--> <!--导航条样式结束--> HTML文档结构 <html> <head></head> head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的 <body></body> body内的标签 就是浏览器展示给用户看的内容 </html> 打开html页面的两种方式 1.找到文件路径 选择浏览器打开 2.pycharm快捷方式直接打开 标签的分类1: 1.双标签(<h1></h1> <a></a>) 2.单标签(自闭和标签 <img/>) head内常用标签 title用来显示网页标题 style用来控制样式的 内部支持写css代码 script内部支持写js代码 也支持导入外界的js文件 link专门用来引入外部的css文件 meta 定义网页原信息 用户不可见 了解 标签的分类2 1.块儿级标签(独占浏览器一行) div p h 1.块儿级标签可以修改长宽 2.块儿级标签内部可以嵌套任意的块级标签 但是p标签虽然是块儿级标签 但是他不能够套其他块儿级标签 包括自身 可以嵌套行内标签 总结: 只要是块儿级标签 都可以嵌套行内标签 p标签只能嵌套行内 其他块儿级可以嵌套任意的块儿级标签 2.行内标签(自身文本多大就占多大) span b s i u div和span通常都是用来构建网页布局的 body 常用标签 基本标签 h:标题标签 p:段落标签 b:加粗 i:斜体 u:下划线 s:删除 符号 空格: 人民币符号:¥ 大于:> 小于:< ® 注册 © 版权 & & 常用标签: div span div和span 通常都是用来搭建网页布局的 p 段落标签 img 图片标签 src 存放图片路径,可以是本地的,也可以是网址, 1.也可以放url(会自动请求获取相应数据) 2.也可以放图片二进制数据,会自动转换成图片 alt当图片加载不出来的时候 显示的提示信息 title当鼠标悬浮在图片上 提示的信息 height,width 当你只指定一个参数的时候 另外一个会等比例缩放 a 网址标签 href后面存放url的时候 点击跳转到该url 如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色 target 默认是_self当前页面跳转 _blank新建页面跳转 a标签的 描点功能 (大白话,回到顶部) href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签 每一个标签都应该有三个比较重要的属性 1.id值 该值就类似于人的身份证号 在用一个html文档id应该保证唯一不重复 2.class值 该值就类似于面向对象里面的继承 可以写多个 3.style(不是必备) 支持在标签内直接写css代码 属于行内样式 优先级最高 补充 任何标签都支持自定义属性!!! 列表标签 ul>li*3 TAB 有序 ol>li*3 TAB 无序 d1>(dt*3)dd*2 标题列表 内容 表格标签***** <table> <thead></thead> <tbody></tbody> </table> tr表示一行 th和td都是文本 建议在thead内用th tbody内用td colspan 表示水平方向 rowpan 表示竖直方向 表单标签***** 能够接收用户输入(输入 选择 上传) 并将其发送给后端 以注册实例位例讲解form表单 action 控制数据提交的目的地 1.不写的情况下 默认提交到当前页面所在的路径 2.写全路径(https://www.baidu.com) 3.路径后缀(/index/) input input标签就类似于是前端变形金刚 type text:普通文本 password:密文 不展示明文 date:日期 submit:触发提交动作 button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作 reset:重置表单内容 radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked" checkbox:多选 同上 可以设置默认值 file:获取用户上传的文件 hidden :隐身,保存数据,但不想让客户看,使用 disabled 禁用,一般修改密码时使用 readonly 只读 select标签 默认是单选 可以通过multiple变成多选 如果想默认选择 用selected (selected="selected") textarea标签 获取用户输入的大段文本 form表单默认是get请求 你需要通过method参数 换成post提交 form表单中 要想触发提交动作 只有两种情况可以 1.input标签type指定成submit 2.直接写button标签 获取用户输入(输入 选择 上传...)的标签 都必须有一个name属性 这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value <input type="text" id="d1" name="username" value="默认值"> name就相当于是字典的key value就是字典的值 获取都的用户输入都会被放入value属性中 form表单传文件的时候 需要指定enctype参数 emmet插件 防呆措施
alert('baby');
h1{
color: red;
}
import socket server = socket.socket() server.bind(('127.0.0.1',8080)) server.listen(5) while True: conn,addr = server.accept() # 阻塞 等待返回结果 data = conn.recv(1024) print(data) conn.send(b'HTTP/1.1 200 OK\r\n\r\n') # conn.send(b'<h1>hello baby</h1>') with open('a.txt','rb')as f: res = f.read() conn.send(res) conn.close()
<h1>hello Girl!</h1> <a href="http://www.baidu.com">click me</a> <img src="https://img1.baidu.com/it/u=2196960038,2741536287&fm=26&fmt=auto&gp=0.jpg"/> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx12%2F0F420115037%2F200F4115037-10.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629182490&t=ef0de59e5ce390cc95bbef1cc9d3a23b"/>
<!--DOCTYPE 声明下文件类型--> <!DOCTYPE html> <!-- lang 语言 en 英文--> <html lang="en"> <!-- head:头标签 - 页面编码,页面标签标题,页面样式,页面脚本--> <head> <!--页面编码--> <meta charset="UTF-8"> <!--页面标签标题--> <title>接收到卡三六九等</title> <!--<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">--> <!--<meta name 主要用于描述网页 与之对应的属性值content中内容主要便于搜索引擎查找信息和分类>--> <!--<meta name="keywords" content="meta总结,html,meta跳转,meta">--> <!--<meta name="description" content="网页产品介绍">--> <!--页面样式--> <!--style 内部:css--> <!--<style>--> <!--h1 {--> <!--color: red;--> <!--}--> <!--</style>--> <!--页面脚本--> <!--script:js alert 弹出--> <!--<script>--> <!--alert(123)--> <!--</script>--> <script src="01%20myjs.js"></script> <!--link 引入外部css 文件--> <link rel="stylesheet" href="mycss.css"> </head> <!--body:体标签 - 页面内容,页面脚本--> <!--body:用于内容显示的标签全部书写在body中--> <body> <h1>hello Girl!</h1> <a href="http://www.baidu.com">click me</a> <img src="https://img1.baidu.com/it/u=2196960038,2741536287&fm=26&fmt=auto&gp=0.jpg" alt="美女"> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--标签:h1~h6--> <!--h1:一般一个页面只出现一次,代表该页面的主内容解释--> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> 我是正常文本,啥也没有 <b>加粗</b> <strong>以加粗方式强调的标签</strong> <i>斜体</i> <em>以斜体方式强调的标签</em> <sub>下角标</sub> <sup>上角标</sup> <u>下划线</u> <s>删除</s> <!--p:段落--> <!-- 文本相关内容,一般会被p标签嵌套--> <p> 阿少喝点酒撒大大阿少喝点酒撒大大阿少喝点酒撒大大阿少喝点酒撒大大阿少喝点酒撒大大 阿少喝点酒撒大大 阿少喝点酒撒大大 阿少喝点酒撒大大 阿少喝点酒撒大大 阿少喝点酒撒大大阿少喝点酒撒大大 </p> <p>技多不压身,衣锦还乡</p> <p>技多不压身,衣锦还乡</p> <p>技多不压身,衣锦还乡</p> <p>技多不压身,衣锦还乡</p> <!--功能标签--> <!--br:换行--> <br> <br><br><br><br><br><br><br><br><br><br> <!--hr:分割线--> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 空格--> <!--¥ 人民币单位符号--> <!--& &--> <!-->: >--> <!--<: <--> <!--版权缩写--> <!--®:r戴圈符号-注册-> <!--©c戴圈符号:版权--> <p> 大梦谁先觉,平生 吾自知!¥1000000000 </p> ¥ ¥ ¥ & a > b ©(打字:版权选择图标) b < c ® © </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>div <div>div <p>p <a href="">a</a> </p> </div> </div> <span>span</span> <p> p1 </p> <img src="https://pics4.baidu.com/feed/f9dcd100baa1cd11bdaada933e891af4c2ce2d8d.png?token=81ee9490989190792964c52e490863f6" alt=""> <img src="111.png" alt="这是一 张奇丑无比的图" title="悬浮显示我" height="548" width="1349"> <!--<img src="可以直接放图片二进制" alt="111111111">--> <!--<_self 当前位置跳, _blank:新建一个页面跳>--> <div> <a href="http://www.xiaohuar.com" target="_self">click me</a> <a href="https://www.luffycity.com" target="_blank">click me</a> <a href="https://www.sogo.com">click me</a> </div> <a href="" id="d1">顶部</a> <div style="height: 1000px; background-color: red">1</div> <div>2</div> <div>3</div> <a href="" id="d2">中间</a> <div style="height: 1000px;background-color: green">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <a href="#d2">点我回到中间</a> <div style="height: 1000px;background-color: yellow">0</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <a href="#d1" username="llx" password="1232">点我回到顶部</a> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>无序列表</p> <!--none,circle,disc square--> <ul type="square"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <p>有序列表</p> <ol type="I" start="2"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol> <p>标题列表</p> <d1> <dt>标题1</dt> <dd>内容1</dd> <dd>内容2</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> <dt>标题3</dt> <dd>内容1</dd> <dd>内容2</dd> </d1> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="20" cellpadding="10" cellspacing="20"> <thead> <tr> <th>username</th> <th>password</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td colspan="2">tank</td> <!--<td rowspan="1">123</td>--> <td rowspan="2">生蚝</td> </tr> <tr> <td>engo</td> <td>123</td> <!--<td>足疗</td>--> </tr> <tr> <td>jerry</td> <td>123</td> <td>大保健</td> </tr> </tbody> <!--tfoot 表尾样式--> <tfoot> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tfoot> </table> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>注册页面</h2> <!--enctype="multipart/form-data" 可以传文件--> <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <!--label 两种用法--> <!--方法一--> <p><label for="d1">username<input type="text" id="d1" name="username" value="默认值"></label></p> <p><label for="d2">password<input type="password" id="d2" name="password" disabled></label></p> <!--方法二--> <p> <label for="d3">birthday</label> <input type="date" id="d3" name="birthday"> </p> <p>性别: <!--name:k 值:value--> <input type="radio" name="gender" checked="checked" value="male">男 <!--checked=checked 默认当前选择:简写如下--> <!--<input type="radio" name="gender" checked >男--> <input type="radio" name="gender" value="female">女 </p> <p>爱好: <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" checked value="doublecolorball">双色球 </p> <p>省市: <select name="province" id=""> <option value="sh">上海</option> <option value="bj">北京</option> <option value="sz">深圳</option> </select> </p> <p>电影: <select name="movie" id="" multiple> <option value="xj1">仙剑1</option> <option value="xj3" selected>仙剑三</option> <option value="xyj">轩辕剑</option> <option value="xlfd">小李飞刀</option> <option value="lyb">琅琊榜</option> </select> </p> <p>市区 <select name="" id=""> <optgroup label="上海"> <option value="">闵行</option> <option value="" selected>青浦</option> <option value="">黄埔</option> </optgroup> <optgroup label="北京"> <option value="">朝阳区</option> <option value="">海淀区</option> <option value="">昌平区</option> </optgroup> <optgroup label="安徽"> <option value="">芜湖市</option> <option value="">合肥市</option> <option value="">安庆市</option> </optgroup> </select> </p> <p>头像: <input type="file" name="avatar"> </p> <p>个人简介: <textarea name="info" id="" cols="30" rows="10"></textarea> </p> <p>隐身: <input type="hidden"> </p> <input type="submit" value="注册1"> <input type="button" value="注册2"> <input type="reset" value="注册3"> <button>button标签</button> </form> </body> </html>
""""""
"""
flask 框架初识
"""
from flask import Flask,request
app = Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 获取前端form表单提交过来的数据
print(request.files)
file_obj = request.files.get('avatar')
file_obj.save('xxx.pdf')
return '收到了'
app.run()
