web框架本質(zhì)
對(duì)于所有的Web應(yīng)用, 本質(zhì)上其實(shí)就是一個(gè)socket服務(wù)端,用戶的瀏覽器其實(shí)是一個(gè)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()
上述通過(guò)socket來(lái)實(shí)現(xiàn)了其本質(zhì)，而對(duì)于真實(shí)開發(fā)中的python web程序來(lái)說(shuō)遮糖，一般會(huì)分為兩部分：服務(wù)器程序和應(yīng)用程序潜支。服務(wù)器程序負(fù)責(zé)對(duì)socket服務(wù)器進(jìn)行封裝棚赔，并在請(qǐng)求到來(lái)時(shí)患民，對(duì)請(qǐng)求的各種數(shù)據(jù)進(jìn)行整理寸认。應(yīng)用程序則負(fù)責(zé)具體的邏輯處理洁奈。為了方便應(yīng)用程序的開發(fā)，就出現(xiàn)了眾多的Web框架栋盹，例如：Django施逾、Flask、web.py等例获。
不同的框架有不同的開發(fā)方式汉额，但是無(wú)論如何，開發(fā)出的應(yīng)用程序都要和服務(wù)器程序配合榨汤，才能為用戶提供服務(wù)蠕搜。這樣，服務(wù)器程序就需要為不同的框架提供不同的支持收壕。這樣混亂的局面無(wú)論對(duì)于服務(wù)器還是框架讥脐，都是不好的。對(duì)服務(wù)器來(lái)說(shuō)啼器，需要支持各種不同框架旬渠，對(duì)框架來(lái)說(shuō)，只有支持它的服務(wù)器才能被開發(fā)出的應(yīng)用使用端壳。這時(shí)候告丢，標(biāo)準(zhǔn)化就變得尤為重要。我們可以設(shè)立一個(gè)標(biāo)準(zhǔn)损谦，只要服務(wù)器程序支持這個(gè)標(biāo)準(zhǔn)岖免，框架也支持這個(gè)標(biāo)準(zhǔn)，那么他們就可以配合使用照捡。一旦標(biāo)準(zhǔn)確定颅湘，雙方各自實(shí)現(xiàn)。這樣栗精，服務(wù)器可以支持更多支持標(biāo)準(zhǔn)的框架闯参，框架也可以使用更多支持標(biāo)準(zhǔn)的服務(wù)器。
WSGI（Web Server Gateway Interface）是一種規(guī)范悲立，它定義了使用python編寫的web app與web server之間接口格式鹿寨，實(shí)現(xiàn)web app與web server間的解耦。
python標(biāo)準(zhǔn)庫(kù)提供的獨(dú)立WSGI服務(wù)器稱為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
概念
一套規(guī)則, 瀏覽器認(rèn)識(shí)的規(guī)則.
開發(fā)者如何學(xué)習(xí)HTML
- 學(xué)習(xí)HTML規(guī)則
- 開發(fā)后臺(tái)程序:
- 寫HTML文件(充當(dāng)模板)
- 數(shù)據(jù)庫(kù)獲取數(shù)據(jù),然后替換到html文件的指定位置(Web框架)
本地測(cè)試
- 找到文件路徑, 直接瀏覽器打開
- pycharm打開測(cè)試
編寫HTML文件
- doctype對(duì)應(yīng)關(guān)系
- html標(biāo)簽, 標(biāo)簽內(nèi)部可以寫屬性 ====> 只能有一個(gè)
- 注釋:
標(biāo)簽分類
- 自閉合標(biāo)簽:
<meta charset="UTF-8"> - 主動(dòng)閉合標(biāo)簽:
<title>fbo</title>
head標(biāo)簽
在head標(biāo)簽中:
- meta -> 編碼, 跳轉(zhuǎn), 刷新, 關(guān)鍵字, 描述,IE兼容性
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title標(biāo)簽
- <link />
- <style />
- <script>
body標(biāo)簽
- 圖標(biāo), ? > <
- p標(biāo)簽, 段落
- br標(biāo)簽, 換行
小結(jié)
所有標(biāo)簽分為:
- 塊級(jí)標(biāo)簽: div(白板), H系列(加大加粗), p標(biāo)簽(段落和段落之間有間距)
- 行內(nèi)標(biāo)簽: span(白板)
- 標(biāo)簽之間可以嵌套
- 標(biāo)簽存在的意義, css操作, js操作
- ps:chorme審查元素使用
- 定位
- 查看樣式
- h系列
- div
- span
- input系列 + form標(biāo)簽
- 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' - 復(fù)選框 value, checked='checked',name屬性(批量獲取數(shù)據(jù))
- input type='file' - 依賴form表單的一個(gè)屬性 enctype="multipart/form-data"
- input type='rest' - 重置
- <textarea>abc</textarea> - name屬性
- select標(biāo)簽 - name 內(nèi)部opention value, 提交到后臺(tái), size multiple
- a標(biāo)簽
- 跳轉(zhuǎn)
- 錨 - href='#某個(gè)標(biāo)簽ID' 標(biāo)簽ID不允許重復(fù)
- img - src, alt, title
- 列表
- ul - li
- ol - li
- dl - dt,dd
- 表格 - table
- thead tr,th
- tbody tr,td
- colspan='' 合并單元格, 列
- rowspan='' 合并單元格, 行
- label 用于點(diǎn)擊文件,使得關(guān)聯(lián)的標(biāo)簽獲取光標(biāo)
<label for='username'>用戶名:</label>
<input id='username' type="text" name="user" />
- fieldset - legend
CSS
在標(biāo)簽上設(shè)置style屬性:
background-color: #2459a2;
height:48px
編寫css樣式:
- 標(biāo)簽的style屬性
- 寫在head里面 style標(biāo)簽中寫樣式
- id選擇區(qū):
#i1 {
background-color: #2459a2;
height: 48px;
}
- class 選擇器
.名稱 {
background-color: #2459a2;
height: 48px;
}
<標(biāo)簽 class='名稱'></標(biāo)簽>
- 層級(jí)選擇器 (空格)
.c1 .c2 div{
}
- 組合選擇器 (逗號(hào))
#c1,c2,div{
}
- 屬性選擇器 對(duì)選擇的標(biāo)簽再通過(guò)屬性進(jìn)行一次篩選
.c1 [n='alex'] {width:100px; height: 200px;}
優(yōu)先級(jí), 標(biāo)簽上style優(yōu)先,編寫順序,就近原則
css樣式也可以寫在單獨(dú)文件中
<link rel="stylesheet" href="commons.css" />
css注釋:
/* */
邊框:
- 寬度, 樣式, 顏色 (border: 4px dotted red;)
- border-left
height, 高度 百分比
width, 寬度 像素, 百分比
text-align:ceter 水平方向居中
line-height, 垂直方向根據(jù)標(biāo)簽高度
color, 字體顏色
font-size, 字體大小
font-weight, 字體加粗
float:
讓標(biāo)簽浪起來(lái), 塊級(jí)標(biāo)簽可以堆疊
老子管不住:<div style="clear: both;"></div>
display:
- display: none; --讓標(biāo)簽消失
- display: inline;
- display: block;
- display: inline-block; 具有inline,默認(rèn)自己有多少占多少;具有block, 可以設(shè)置高度, 寬度, padding, margin
行內(nèi)標(biāo)簽: 無(wú)法設(shè)置高度,寬度,padding, margin
塊級(jí)標(biāo)簽: 可以設(shè)置高度,寬度, padding, margin
padding 內(nèi)間距
margin(0, auto) 外間距
