web框架本质
对于所有的Web应用, 本质上其实就是一个socket服务端,用户的浏览器其实是一个socket客户端.
#! /usr/bin/env python
# coding: utf-8
import socket
def handle_request(client):
buf = client.recv(1024)
client.send("HTTP/1.1 200 ok\r\n\r\n")
client.send("Hello, Seven")
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost',8000))
sock.listen(5)
while True:
connection,address = sock.accept()
handle_request(connection)
connection.close()
if __name__ == '__main__':
main()
上述通过socket来实现了其本质，而对于真实开发中的python web程序来说，一般会分为两部分：服务器程序和应用程序。服务器程序负责对socket服务器进行封装，并在请求到来时，对请求的各种数据进行整理。应用程序则负责具体的逻辑处理。为了方便应用程序的开发，就出现了众多的Web框架，例如：Django、Flask、web.py等。
不同的框架有不同的开发方式，但是无论如何，开发出的应用程序都要和服务器程序配合，才能为用户提供服务。这样，服务器程序就需要为不同的框架提供不同的支持。这样混乱的局面无论对于服务器还是框架，都是不好的。对服务器来说，需要支持各种不同框架，对框架来说，只有支持它的服务器才能被开发出的应用使用。这时候，标准化就变得尤为重要。我们可以设立一个标准，只要服务器程序支持这个标准，框架也支持这个标准，那么他们就可以配合使用。一旦标准确定，双方各自实现。这样，服务器可以支持更多支持标准的框架，框架也可以使用更多支持标准的服务器。
WSGI（Web Server Gateway Interface）是一种规范，它定义了使用python编写的web app与web server之间接口格式，实现web app与web server间的解耦。
python标准库提供的独立WSGI服务器称为wsgiref。
from wsgiref.simple_server import make_server
def RunServer(environ, start_response):
start_response('200 OK', [('Content-Type', 'text/html')])
return [bytes('<h1>Hello, web!</h1>', encoding='utf-8'), ]
if __name__ == '__main__':
httpd = make_server('', 8000, RunServer)
print("Serving HTTP on port 8000...")
httpd.serve_forever()
HTML
概念
一套规则, 浏览器认识的规则.
开发者如何学习HTML
- 学习HTML规则
- 开发后台程序:
- 写HTML文件(充当模板)
- 数据库获取数据,然后替换到html文件的指定位置(Web框架)
本地测试
- 找到文件路径, 直接浏览器打开
- pycharm打开测试
编写HTML文件
- doctype对应关系
- html标签, 标签内部可以写属性 ====> 只能有一个
- 注释:
标签分类
- 自闭合标签:
<meta charset="UTF-8"> - 主动闭合标签:
<title>fbo</title>
head标签
在head标签中:
- meta -> 编码, 跳转, 刷新, 关键字, 描述,IE兼容性
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title标签
- <link />
- <style />
- <script>
body标签
- 图标, > <
- p标签, 段落
- br标签, 换行
小结
所有标签分为:
- 块级标签: div(白板), H系列(加大加粗), p标签(段落和段落之间有间距)
- 行内标签: span(白板)
- 标签之间可以嵌套
- 标签存在的意义, css操作, js操作
- ps:chorme审查元素使用
- 定位
- 查看样式
- h系列
- div
- span
- input系列 + form标签
- input type='text' - name属性, value='fbo'
- input type='password' - name属性, value='fbo'
- input type='submit' - value='提交', 提交按钮, 表单
- input type='button' - value='登录', 按钮
- input type='radio' - 单选框 value, checked='checked', name属性(name相同则互斥)
- input type='checkbox' - 复选框 value, checked='checked',name属性(批量获取数据)
- input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data"
- input type='rest' - 重置
- <textarea>abc</textarea> - name属性
- select标签 - name 内部opention value, 提交到后台, size multiple
- a标签
- 跳转
- 锚 - href='#某个标签ID' 标签ID不允许重复
- img - src, alt, title
- 列表
- ul - li
- ol - li
- dl - dt,dd
- 表格 - table
- thead tr,th
- tbody tr,td
- colspan='' 合并单元格, 列
- rowspan='' 合并单元格, 行
- label 用于点击文件,使得关联的标签获取光标
<label for='username'>用户名:</label>
<input id='username' type="text" name="user" />
- fieldset - legend
CSS
在标签上设置style属性:
background-color: #2459a2;
height:48px
编写css样式:
- 标签的style属性
- 写在head里面 style标签中写样式
- id选择区:
#i1 {
background-color: #2459a2;
height: 48px;
}
- class 选择器
.名称 {
background-color: #2459a2;
height: 48px;
}
<标签 class='名称'></标签>
- 层级选择器 (空格)
.c1 .c2 div{
}
- 组合选择器 (逗号)
#c1,c2,div{
}
- 属性选择器 对选择的标签再通过属性进行一次筛选
.c1 [n='alex'] {width:100px; height: 200px;}
优先级, 标签上style优先,编写顺序,就近原则
css样式也可以写在单独文件中
<link rel="stylesheet" href="commons.css" />
css注释:
/* */
边框:
- 宽度, 样式, 颜色 (border: 4px dotted red;)
- border-left
height, 高度 百分比
width, 宽度 像素, 百分比
text-align:ceter 水平方向居中
line-height, 垂直方向根据标签高度
color, 字体颜色
font-size, 字体大小
font-weight, 字体加粗
float:
让标签浪起来, 块级标签可以堆叠
老子管不住:<div style="clear: both;"></div>
display:
- display: none; --让标签消失
- display: inline;
- display: block;
- display: inline-block; 具有inline,默认自己有多少占多少;具有block, 可以设置高度, 宽度, padding, margin
行内标签: 无法设置高度,宽度,padding, margin
块级标签: 可以设置高度,宽度, padding, margin
padding 内间距
margin(0, auto) 外间距
