Web框架本质
众所周知，对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。
s1
import socket
def handle_request(client):
buf = client.recv(1024)
client.send(bytes("HTTP/1.1 200 OK\r\n\r\n",encoding="utf-8"))
# client.send(bytes("<h1 style='background-color:red;'>Hello,Seven<h1>",encoding="utf-8"))
f=open('index.html','rb')
data=f.read()
f.close()
client.send(data)
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()
s1
上述通过socket来实现了其本质，而对于真实开发中的python web程序来说，一般会分为两部分：服务器程序和应用程序。服务器程序负责对socket服务器进行封装，并在请求到来时，对请求的各种数据进行整理。应用程序则负责具体的逻辑处理。为了方便应用程序的开发，就出现了众多的Web框架，例如：Django、Flask、web.py 等。不同的框架有不同的开发方式，但是无论如何，开发出的应用程序都要和服务器程序配合，才能为用户提供服务。这样，服务器程序就需要为不同的框架提供不同的支持。这样混乱的局面无论对于服务器还是框架，都是不好的。对服务器来说，需要支持各种不同框架，对框架来说，只有支持它的服务器才能被开发出的应用使用。这时候，标准化就变得尤为重要。我们可以设立一个标准，只要服务器程序支持这个标准，框架也支持这个标准，那么他们就可以配合使用。一旦标准确定，双方各自实现。这样，服务器可以支持更多支持标准的框架，框架也可以使用更多支持标准的服务器。
index.html
<h1 style='background-color:red;'>Hello,Seven<h1>
<a href='http://www.baidu.com'>走你</a>
<table border='1'>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<table>
前端：html（人） css（衣服）js（动起来），html和css是静态基础
HTML
1.一套规则，浏览器认识的规则。
2.开发者：
①.学习Html规则
②.开发后台程序：
---写html文件（充当模板的作用）
---数据库获取数据，然后替换到html文件的指定位置（Web框架）
3.本地测试
---找到文件路径，直接浏览器打开
---pycharm打开测试
4.编写Html文件
---doctype对应关系
---html标签，标签内部可以写属性 ===>只能有一个
---注释： <!-- 注释的内容 -->
5.标签分类
---自闭合标签 <meta charset="UTF-8">
---主动闭合标签 <title>博客</title>
6.head标签中
---<meta ->编码，跳转，刷新，关键字，描述，IE兼容<meta http-equiv = "X-UA-Compatible" cotent = "IE=IE9;IE=IE8;"/>
---Title标签
---<link/> 搞图标
---<style/>
---<script/>
7.body标签
---图标 ><
---p标签，段落
---br标签，换行
===小总结===
所有的标签分为：1.块级标签---div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
2.行内标签（内联标签）---span标签（白板）
标签之间可以嵌套
标签存在的意义：css操作，js操作
ps:Chrome审查元素的使用 1.-定位 2.-查看样式
-h系列
-div
-span
- input系列 + form标签
input type='text' - name属性，value="赵凡"
input type='password' - name属性，value=""
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='reset' - 重置
<textarea >默认值</textarea> - name属性
select标签 - name,内部option value, 提交到后台，size，multiple ---optgroup label="四川省"，选不了
- 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
- 20个标签
CSS
---位置
---颜色
---......
在标签上设置style属性：
background-color: #2459a2;
height: 48px;
...
编写css样式：
1. 标签的style属性
2. 写在head里面 style标签中写样式
- id选择器
#i1{
background-color: #2459a2;
height: 48px;
}
- class选择器 ******(常用)
.名称{
...
}
<标签 class='名称'> </标签>
- 标签选择器
div{
...
}
所有div设置上此样式
- 层级（关联）选择器（空格） ******
.c1 .c2 div{
}
- 组合选择器（逗号） ******
#c1,.c2,div{
}
- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n='alex']{ width:100px; height:200px; }
PS:
- 优先级，标签上style优先，编写顺序，就近原则
2.5 css样式也可以写在单独文件中
<link rel="stylesheet" href="commons.css" />
3、注释
/* */
4、边框
- 宽度，样式，颜色 (border: 4px dotted red;)
- border-left
5、
height， 高度 百分比
width， 宽度 像素，百分比
text-align:ceter, 水平方向居中
line-height，垂直方向根据标签高度
color、 字体颜色
font-size、 字体大小
font-weight 字体加粗
6、float
让标签浪起来，块级标签也可以堆叠
老子管不住：
<div style="clear: both;"></div>
7、display
display: none; -- 让标签消失
display: inline;
display: block;
display: inline-block;
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
8、padding margin(0,auto)
边距
padding：内边距，
margin：外边距
s1
<!DOCTYPE html>
<!-- 类似html这种格式，标签，html标签 <html>content...</html><html>
lang 标签内部的属性 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blog</title>
</head>
<body>
<a href="http://www.cnblogs.com/jyh-py-blog">博客</a>
</body>
</html>
s2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<p>123dasddsadd<br />sadasdad</p>
<p>123</p>
<p>123</p>
<h1>Alex</h1>
<h2>Alex</h2>
<h3>Alex</h3>
<h4>Alex</h4>
<h5>Alex</h5>
<h6>JYH</h6>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<!--<a href="http://www.cnblogs.com/jyh-py-blog/">空 格</a>-->
</body>
</html>
s3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div></div>
<span></span>
<p></p>
</div>
</body>
</html>
s4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://localhost:8888/index" method="POST">
<input type="text" name="user" />
<input type="text" name="email"/>
<input type="password" name="pwd"/>
<!--{'user': '用户输入的用户','email': 'xx', 'pwd': 'xx' }-->
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
</form>
<br/>
<form>
<input type="text" />
<input type="password" />
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
</form>
</body>
</html>
s5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.sogou.com/web">
<input type="text" name="query" value="赵凡" />
<input type="submit" value="搜索" />
</form>
</body>
</html>
s6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">
<div>
<textarea name="meno" >asdfasdf</textarea>
<select name="city" size="10" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">南京</option>
<option value="4">成都</option>
</select>
<input type="text" name="user" />
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1" />
女：<input type="radio" name="gender" value="2" checked="checked"/>
Alex：<input type="radio" name="gender" value="3"/>
<p>爱好</p>
篮球：<input type="checkbox" name="favor" value="1" />
足球：<input type="checkbox" name="favor" value="2" checked="checked" />
皮球：<input type="checkbox" name="favor" value="3" />
台球：<input type="checkbox" name="favor" value="4" checked="checked"/>
网球：<input type="checkbox" name="favor" value="5" />
<p>技能</p>
撩妹：<input type="checkbox" name="skill" checked="checked" />
写代码：<input type="checkbox" name="skill"/>
<p>上传文件</p>
<input type="file" name="fname"/>
</div>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
</html>
s7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<div id="i1" style="height:600px;">第一章的内容</div>
<div id="i2" style="height:600px;">第二章的内容</div>
<div id="i3" style="height:600px;">第三章的内容</div>
<div id="i4" style="height:600px;">第四章的内容</div>
</body>
</html>
s8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.oldboyedu.com">
<img src="1.jpg" title="大帅哥" style="height: 200px;width: 200px;" alt="帅哥女">
</a>
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<ol>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ol>
<dl>
<dt>ttt</dt>
<dd>ddd</dd>
<dd>ddd</dd>
<dd>ddd</dd>
<dt>ttt</dt>
<dd>ddd</dd>
<dd>ddd</dd>
<dd>ddd</dd>
</dl>
</body>
</html>
s9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<tr>
<td>主机名</td>
<td>端口</td>
<td>操作</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>
<a href="s2.html">查看详细</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>第二行，第3列</td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
s10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<fieldset>
<legend>登录</legend>
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
<br />
<label for="pwd">密码：</label>
<input id="pwd" type="text" name="user" />
</fieldset>
</body>
</html>
s11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
#i1{
background-color: #2459a2;
height: 48px;
}
#i2{
background-color: #2459a2;
height: 48px;
}
#i3{
background-color: #2459a2;
height: 48px;
}
.c1{
background-color: #2459a2;
height: 10px;
}
*/
/*#c2{*/
/*background-color: black;*/
/*color: white;*/
/*}*/ /*.c1 div{*/
/*background-color: black;*/
/*color: white;*/
/*}*/
.i1,.i2,.i3{
background-color: black;
color: white;
}
.c1[n='alex']{ width:100px; height:200px; }
</style>
</head>
<body>
<div class="i1">ff</div>
<div class="i2">ff</div>
<div class="i3">2</div>
<input class="c1" type="text" n="alex">
<input class="c1" type="password">
</body>
</html>
s12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/commons.css" />
</head>
<body>
<div class="c1 c2" style="color: pink">asdf</div>
<div class="c1 c2" style="color: pink">asdf</div>
<div class="c1 c2" style="color: pink">asdf</div>
<div class="c1 c2" style="color: pink">asdf</div>
<div class="c1 c2" style="color: pink">asdf</div>
<div class="c1 c2" style="color: pink">asdf</div>
<div class="c1 c2" style="color: pink">asdf</div>
<div class="c1 c2" style="color: pink">asdf</div>
</body>
</html>
s13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/commons.css" />
</head>
<body>
<div class="c1 c2" style="color: pink">asdf</div>
</body>
</html>
s14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 1px solid red;">
asdfasdf
</div>
<div style="height: 48px;
width:80%;
border: 1px solid red;
font-size: 16px;
text-align: center;
line-height: 48px;
font-weight: bold;
">asdf</div>
</body>
</html>
s15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 20%;background-color: red;float: left">1</div>
<div style="width: 20%;background-color: black;float: left">2</div>
</body>
</html>
s16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0">
<div class="pg-header">
<div style="width: 980px;margin: 0 auto;">
<div style="float: left;">收藏本站</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div>
<div style="width: 980px;margin: 0 auto;">
<div style="float: left">
Logo
</div>
<div style="float: right">
<div style="height: 50px;width: 100px;background-color: #dddddd"></div>
</div>
<div style="clear: both"></div>
</div>
</div>
<div style="background-color: red;">
<div style="width: 980px;margin: 0 auto;">
asdfsdf
</div>
</div>
<div style="width: 300px;border: 1px solid red;">
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
s17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<div style="background-color: red;display: inline;">asdf</div>-->
<!--<span style="background-color: red;display: block;">asdf</span>-->
<span style="display:inline-block;background-color: red;height: 50px;width: 70px;">Alex</span>
<a style="background-color: red;">Eric</a>
</body>
</html>
commons.css
.c2{
font-size: 58px;
color: black;
}
.c1{
background-color: red;
color: white;
}
app.py
class MainHandler(tornado.web.RequestHandler):
def get(self):
print(111)
u = self.get_argument('user')
e = self.get_argument('email')
p = self.get_argument('pwd')
if u == 'alex' and p == '' and e == 'alex@126.com':
self.write("OK")
else:
self.write("滚")
def post(self, *args, **kwargs):
u = self.get_argument('user', None)
e = self.get_argument('email', None)
p = self.get_argument('pwd', None)
print(u, e, p)
self.write('POST')
application = tornado.web.Application([
(r"/index", MainHandler),
])
if __name__ == "__main__":
application.listen(8888)
tornado.ioloop.IOLoop.instance().start()