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

1. 学习HTML规则
2. 开发后台程序:
   • 写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标签

• 图标,   > &lt
• 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样式:

1. 标签的style属性
2. 写在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) 外间距