Python自動化開發學習14
網頁設計思路是把網頁分成三個層次，即：結構層(HTML)、表示層(CSS)、行為層(Javascript)。
形象的比喻，先是HTML捏了一個人，然後CSS則是給人穿上衣服，最後通過JS讓人動起來。
Web服務的本質
對於所有的Web應用，本質上其實就是一個socket服務端，用戶的瀏覽器其實就是一個socket客戶端。用戶向服務器發送一個請求。然後服務器響應，將數據和格式發回給客戶端，然後斷開這個連接。客戶端收到返回的數據後，通過瀏覽器將數據按照一定的格式呈現出來。整個過程就是一個socket的短連接。
下面是一個服務端的python代碼，實現一個簡單的Hello World：
import socket def handle_request(conn): data = conn.recv(1024) # 接收數據，隨便收到啥我們都回復Hello World conn.send(‘HTTP/1.1 200 OK\r\n\r\n‘.encode(‘utf-8‘)) # 這是什麽暫時不需要知道，客戶端瀏覽器會處理 conn.send(‘Hello World‘.encode(‘utf-8‘)) # 回復的內容，就是網頁的內容 def main(): # 先起一個socket服務端 server = socket.socket() server.bind((‘localhost‘, 8000)) server.listen(5) # 然後持續監聽 while True: conn, addr = server.accept() # 開啟監聽 handle_request(conn) # 將連接傳遞給handle_request函數處理 conn.close() # 關閉連接 if __name__ == ‘__main__‘: main()
在本機啟動上面的socket之後，直接使用瀏覽器作為客戶端連接。在地址欄輸入 http://127.0.0.1:8000/ 或 http://localhost:8000/ 之後，瀏覽器上就會顯示服務端返回的內容了。
這裏顯示的內容比較low，實際應用中，要返回給客戶端的網頁內容比較大。而且除了數據，還會包括格式（html標簽）。實際應用中會將所有的內容寫成一個html文件，然後再返回數據的時候調用這個文件。
先寫一個簡單的帶一點標簽的html文件，index.html:
<h1 style="background-color: red">Hello World</h1> <a href="http://www.51cto.com">51CTO</a> <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table>
然後我們的socket不在發送簡單的數據，而是讀取文件，將文件中的數據發送給客戶端。
在上面代碼的基礎上修改一下handle_request函數的內容：
def handle_request(conn):
data = conn.recv(1024) # 接收數據，隨便收到啥我們都回復Hello World
conn.send(‘HTTP/1.1 200 OK\r\n\r\n‘.encode(‘utf-8‘)) # 這是什麽暫時不需要知道，客戶端瀏覽器會處理
# conn.send(‘Hello World‘.encode(‘utf-8‘)) # 回復的內容
# 讀取html文件，將文件內容返回給客戶端
with open(‘index.html‘ , encoding=‘utf-8‘) as file:
html = file.read()
conn.send(html.encode(‘utf-8‘))現在已經將html和我們的socket服務分離了，需要返回給客戶端什麽樣的頁面，我們只需要編輯修改我們的html文件即可。而我們的socket服務器代碼則負責和客戶端的數據交換。
之後學習Web暫時只需要關註html的部分就好了，直接使用瀏覽器打開本地的html文件就可以查看實現的效果。
html標簽
使用pycharm直接創建一個html文件，內容如下（HTML5的模板）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html><!DOCTYPE html> ：這是一個聲明，聲明下面html的版本。這裏是一個html5的聲明。這個不是html標簽，下面的都是。<html lang="en"> ：這是一個html標簽，裏面的 lang="en" 是標簽內部的屬性。一般html標簽這麽寫就行了。這個屬性也用不著。<head> ：head標簽，html的頭，後面詳講<body> ：body標簽，html的主體，後面詳講
最後補充一個
註釋 ：<!-- 註釋的內容 -->
標簽的分類
主動閉合標簽：大多數的標簽都是這種形式。標簽有兩部分，比如上面的<html>、<head>、<body>，後面都有一個對應的</html>、</head>、</body>來主動閉合這個標簽。
自閉合標簽：像上面 head 中的 meta 標簽，就是一個自閉合標簽。這類標簽比較少。另外也可以這樣寫<meta />，加上一個/符號，不影響瀏覽器的識別，但是可以直觀的讓人看明白各個標簽已經閉合了。推薦加上表示閉合的/。
head內標簽
<meta charset="UTF-8"> ：指定頁面的字符編碼，否則中文可能會變成亂碼。<title> ：定義頁面標題。一般會顯示在瀏覽器的標題欄或標簽頁上。
還可以加一些其他標簽，舉例一些比較常用的，基本上都用處不大<meta http-equiv="Refresh" Content="30"> ：頁面30秒自動刷新<meta http-equiv="Refresh" Content="5;url=http://www.51cto.com" > ：頁面5秒後自動跳轉，這種跳轉用的少，因為不是動態的無法顯示倒計時或進度條，學了JS可以用JS來實現跳轉並且能顯示倒計時。<meta name=‘keywords‘ content=‘NGA,National Geographic Azeroth,遊戲社區,魔獸世界,魔獸世界中文數據庫,wow,World of Warcraft‘> ：加關聯字，給搜索引擎搜索用的。告訴搜索引擎搜索什麽關鍵字可以搜索到你的網站。對我們用處不大。<meta name=‘description‘ content=‘NGA 最專業的魔獸世界討論 及綜合遊戲社區‘> ：加網站描述，同樣用處不大<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> ：網站兼容模式的設置，就是告訴瀏覽器選擇什麽模式來打開網頁，通過content的屬性識別。以上代碼IE = edge告訴IE使用最新的引擎渲染網頁，chrome = 1則是告訴chrome可以激活Chrome Frame。<link rel="shortcut icon" href="image/favicon.ico"/> ：指定網站的圖標
還有更多的 <link> 標簽，以及 <style> 標簽和 <script> 標簽後面的章節用到的時候會再講。
特殊符號
有些特殊符號瀏覽器可能無法直接識別，需要轉義。下面列舉幾個常用的，更多的只能到時候再去查了：
| HTML源代碼 | 顯示符號 | 描述 |
|---|---|---|
|
空格 | |
< |
< | 小於號或顯示標記 |
> |
> | 大於號或顯示標記 |
& |
& | 可用於顯示其它特殊字符 |
" |
“ | 雙引號 |
? |
? | 已註冊 |
? |
? | 版權 |
? |
? | 商標 |
body內標簽-入門
先了解一下下面幾個簡單的標簽<p> ：段落標簽，段落和段落直接會有行間距<br> ：換行標簽，自閉合，也可以這麽寫<br /><h1> - <h6> ：標題標簽，只有6個級別
塊級標簽 和 行內標簽
<br> 這種是自閉和的，標簽之間沒有內容，所以都不屬於
塊級標簽：標簽之間的內容會占一整行，上面的幾個都是塊級標簽
行內標簽：也叫內聯標簽，標簽之間的內容接著前面的內容顯示，不會換行<span> ：這就是一個行內標簽。這個標簽本身沒有任何格式就是一個白板，但是可以通過定義標簽的屬性，來定義標簽之間內容的格式。<div> ：也是一個白板，但是是一個塊級標簽。這個標簽很重要，做前端最重要的就是要掌握div+css，做頁面布局的。<form> ：表單標簽，在下面的input裏面講。
body內標簽-提交數據
下面的這些標簽都是用於客戶端向服務器提交數據的
input標簽
通過登錄表單來講一下input標簽，還有一個form標簽會用到，順便也講了<input> ：根據不同的type屬性，會有多種形式。
下面的body中有4種input，可以在瀏覽器中打開。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action=" ">
<input type="text" />
<input type="password" />
<input type="button" value="登錄1" />
<input type="submit" value="登錄2" />
</form>
</body>
</html>type="text" ：可以輸入文本，
type="password" ：可以輸入密碼，
type="button" ：是一個按鈕，現在點下去沒效果，還需要其他東西。
type="submit" ：提交表單，是另外一種按鈕。同樣沒效果，直接將form表單的內容提交到form的action屬性指定的url。
不過上面的input內容還無法識別，需要加上name屬性：
<input type="text" name="username" />
<input type="password" name="pwd" />這樣就會把數據組織成一個字典的形式提交出去，name就是字典的key，你在前端文本框輸入的數據就是字典的value。這樣提交之後，就可以通過name屬性的值也就是字典的key獲取到前端文本的內容。這部分還得後面再講了，暫時只要會以這樣的形式提交，之後再學怎麽獲取到值以及處理。<form> 標簽還有一個methon屬性，指定提交的形式，默認是GET。一共就2個可選值GET和POST。指定的話就是這麽寫：<form action=" " method="get"> 或 <form action=" " method="post"> 。
以GET形式提交，會把表單的內容拼接到url後面，然後發送出去。放在http的請求頭中。
以POST形式提交，會把表單的內容放在內容中發送出去。放在http的請求體中。
HTTP請求報文：HTTP請求報文由3部分組成（請求行+請求頭+請求體）。具體這裏就不研究了。
現在還不會寫web服務，不過有現成的服務器可以測試提交表單。打開瀏覽器，在瀏覽器中輸入這樣的url：“https://www.baidu.com/s?wd=你要搜索的內容“ ，就可以直接打開搜索結果的頁面。於是自己編輯一個網頁，內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd" />
<input type="submit" value="搜索" />
</form>
</body>
</html>現在用瀏覽器打開我們自己的網頁，在文本框輸入你要搜索的內容，然後點擊搜索按鈕查看效果。<input type="text" name="wd" value="默認值" /> ：這裏也可以加上value屬性，這樣打開的頁面中文本框中不再是空白，而是會有一個默認值。
type="radio" ：單選框，相同的name屬性表示是一個選擇項的，定義不同的value值可以獲取到你的選擇
type="checkbox" ：復選框，相同的name屬性表示是一個選擇項的，每個選項給不用的value值，可以判斷你選中了哪些，沒選中哪些。
<body>
<p>請選擇性別：<br /></p>
男：<input type="radio" name="sex" value="M" />
女：<input type="radio" name="sex" value="F" />
<p>愛好：</p>
足球：<input type="checkbox" name="favor" value="football" />
藍球：<input type="checkbox" name="favor" value="basketball" />
排球：<input type="checkbox" name="favor" value="volleyball" />
棒球：<input type="checkbox" name="favor" value="baseball" />
</body>通過屬性 checked="checked" 可以設置選項默認被選中。<input type="file" name="filename" /> ：可以用於上傳文件。要上傳文件，需要將這個放到form標簽中，並且在form標簽中要定義 enctype="multipart/form-data" 。因為還需要服務器端處理，在講到web框架的時候再細講了。<input type="reset" value="重置" /> ：可以重置form中的所有內容，還原到打開時候的默認值。
多行文本-textarea標簽
<textarea> ：用於實現輸入多行文本，主動閉合標簽，在標簽之間的部分可以寫上默認值。一般會加上name屬性，用於取數據。
<textarea name="text">這裏寫上默認值</textarea>下拉列表-select標簽
簡單的下拉列表代碼如下：
<select name="city1">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GJ">廣州</option>
<option value="SZ">深圳</option>
</select>在select標簽裏設置name屬性，用於取數據
每個option標簽裏設置value屬性，用於確認該選項是否被選中
size屬性 ：可以設置size屬性，將列表自動展開一定的項目
selected屬性 ：設置 selected="selected" ，將該選項設為默認
multiple屬性 ：設置 multiple="multiple" ，將列表定義為多選。可以通過Ctrl選中多個，也可以通過Shift或者拖拽來連續選中多個
<select name="city2" size="3">
<option value="BJ">北京</option>
<option value="SH" selected="selected">上海</option>
<option value="GJ">廣州</option>
<option value="SZ">深圳</option>
</select>
<select name="city3" size=6 multiple="multiple">
<option value="BJ">北京</option>
<option value="SH" selected="selected">上海</option>
<option value="GJ">廣州</option>
<option value="SZ">深圳</option>
</select>另外還有一個分組的下拉列表，代碼如下：
<select name="city1">
<optgroup label="直轄市">
<option value="BJ">北京</option>
<option value="SH">上海</option>
</optgroup>
<optgroup label="江蘇省">
<option value="NJ">南京</option>
<option value="SZ">蘇州</option>
<option value="WX">無錫</option>
</optgroup>
</select>小結
以上，能夠把數據提交給服務器的標簽就講完了。
之後的標簽就是用來點綴，用來頁面布局等等這類功能了。
body內標簽-布局
下面是一些常用的功能性的或者是頁面布局的標簽
超鏈接-a標簽
通過a標簽可以定義超鏈接，通過超鏈接我們可以實現頁面的跳轉：
<body>
<a href="http://www.baidu.com">百 度</a>
<a href="http://www.163.com/" target="_blank">網易</a>
</body>