首先了解web本質 >>>> socket
import socketdef main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost',8081))
sock.listen(5) while True: print("開始工作辣.....")
conn, address = sock.accept()
request = conn.recv(1024)
conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\nHello good boy","utf8"))
conn.close()if __name__ == '__main__':
main() html是什麼？
- 超文本标記語言（Hypertext Markup Language，HTML）通過标簽語言來标記要顯示的網頁中的各個部分。一套規則，浏覽器認識的規則
- 浏覽器按順序渲染網頁檔案，然後根據标記符解釋和顯示内容。但需要注意的是，對于不同的浏覽器，對同一标簽可能會有不完全相同的解釋（相容性）
- 靜态網頁檔案擴充名：.html 或 .htm
html不是什麼？
HTML 不是一種程式設計語言，而是一種标記語言 (markup language)
HTML 使用标記标簽來描述網頁
html結構
是文檔的開始标記和結束标記。此元素告訴浏覽器自身是一個html文檔，在他們之間是文檔的頭部
元素出現在文檔的開頭部分。之間的内容不會在浏覽器的文檔視窗顯示，
但是其間的元素有特殊重要的意義
定義網頁标題，在浏覽器标題欄顯示。
之間的文本是可見的網頁主體内容
html标簽格式
标簽的文法：
常用标簽
作用：聲明文檔的解析類型(document.compatMode)，避免浏覽器的怪異模式。
document.compatMode：
- BackCompat：怪異模式，浏覽器使用自己的怪異模式解析渲染頁面。
- CSS1Compat：标準模式，浏覽器使用W3C的标準解析渲染頁面。
這個屬性會被浏覽器識别并使用，但是如果你的頁面沒有DOCTYPE的聲明，那麼compatMode預設就是BackCompat
标簽
meta介紹
元素可提供有關頁面的元資訊（meta-information），針對搜尋引擎和更新頻度的描述和關鍵詞。
标簽位于文檔的頭部，不包含任何内容。
提供的資訊是使用者不可見的
meta标簽的組成：meta标簽共有兩個屬性，它們分别是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實作了不同的網頁功能。
(1)name屬性: 主要用于描述網頁，與之對應的屬性值為content，content中的内容主要是便于搜尋引擎機器人查找資訊和分類資訊用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"><meta name="description" content="老男孩教育訓練機構是由一個很老的男孩建立的"> (2)http-equiv屬性：相當于http的檔案頭作用，它可以向浏覽器傳回一些有用的資訊，以幫助正确地顯示網頁内容，與之對應的屬性值為content，content中的内容其實就是各個參數的變量值。
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意後面的引号，分别在秒數的前面和網址的後面)<meta http-equiv="content-Type" charset=UTF8"><meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 非meta标簽
oldboy<link rel="icon" href="http://www.jd.com/favicon.ico"><link rel="stylesheet" href="css.css"><script src="hello.js"> 基本标簽（塊級标簽和内聯标簽）
'''''' 和
：
隻是一個塊級元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現.
： 表示了内聯行(行内元素),并無實際的意義,主要通過CSS樣式為其賦予不同的表現.
塊級元素與行内元素的差別
所謂塊元素，是以另起一行開始渲染的元素，行内元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面産生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
圖形标簽:
'''src: 要顯示圖檔的路徑.
alt: 圖檔沒有加載成功時的提示.
title: 滑鼠懸浮時的提示資訊.
width: 圖檔的寬
height:圖檔的高 (寬高兩個屬性隻用一個會自動等比縮放.)''' 超連結标簽(錨标簽):
什麼是超級連結？
所謂的超連結是指從一個網頁指向一個目标的連接配接關系，這個目标可以是另一個網頁，也可以是相同網頁上
的不同位置，還可以是一個圖檔，一個電子郵件位址，一個檔案，甚至是一個應用程式 什麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁位址，是網際網路上标準的資源的位址。
URL舉例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL位址由4部分組成
第1部分：為協定：http://、ftp://等
第2部分：為站點位址：可以是域名或IP位址
第3部分：為頁面在站點中的目錄：stu
第4部分：為頁面名稱，例如 index.html
各部分之間用“/”符号隔開。 '''clickhref屬性指定目标網頁位址。該位址可以有幾種類型：
絕對 URL - 指向另一個站點（比如 href="http://www.jd.com）
相對 URL - 指目前站點中确切的路徑（href="index.htm"）
錨 URL - 指向頁面中的錨（href="#top"）''' 清單标簽
''': 無序清單 [type屬性：disc(實心圓點)(預設)、circle(空心圓圈)、square(實心方塊)]: 有序清單:清單中的每一項.定義清單清單标題清單項''' 表格标簽:
表格概念
表格是一個二維資料空間，一個表格由若幹行組成，一個行又有若幹單元格組成，單元格裡可以包含文字、清單、圖案、表單、數字元号、預置文本和其它的表格等内容。
表格最重要的目的是顯示表格類資料。表格類資料是指最适合組織為表格格式（即按行和列組織）的資料。
表格的基本結構：
标題标題内容内容 屬性：
''': table row: table head cell: table data cell
屬性:
border: 表格邊框.
cellpadding: 内邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過css來設定長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合并單元格）''' 練習：
表單标簽:
功能：表單用于向伺服器傳輸資料，進而實作使用者與Web伺服器的互動
表單能夠包含input系列标簽，比如文本字段、複選框、單選框、送出按鈕等等。
表單還可以包含textarea、select、fieldset和 label标簽。
表單屬性
action: 表單送出到哪.一般指向伺服器端一個程式,程式接收到表單送出過來的資料（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的送出方式 post/get預設取值就是get
表單元素
基本概念：
HTML表單是HTML元素中較為複雜的部分，表單往往和腳本、動态頁面、資料處理等功能相結合，是以它是制作動态網站很重要的内容。
表單一般用來收集使用者的輸入資訊
表單工作原理：
通路者在浏覽有表單的網頁時，可填寫必需的資訊，然後按某個按鈕送出。這些資訊通過Internet傳送到伺服器上。
伺服器上專門的程式對這些資料進行處理，如果有錯誤會傳回錯誤資訊，并要求糾正錯誤。當資料完整無誤後，伺服器回報一個輸入完成的資訊
系列标簽
'''表單類型
type: text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 送出按鈕
button 按鈕(需要配合js使用.) button和submit的差別？
file 送出檔案：form表單需要加上屬性enctype="multipart/form-data"
上傳檔案注意兩點：
1 請求方式必須是post
2 enctype="multipart/form-data"表單屬性
name: 表單送出項的鍵.
注意和id屬性的差別：name屬性是和伺服器通信時使用的名稱；
而id屬性是浏覽器端使用的名稱，該屬性主要是為了友善用戶端程式設計，而在css和javascript中使用的
value: 表單送出項的值.對于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值
checked: radio 和 checkbox 預設被選中
readonly: 隻讀. text 和 password
disabled: 對所用input都好使.''' <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Titletitle>head><body>單選框輸入-->-->
Male-->
-->
Female-->-->送出按鈕-->-->
First name:-->
-->
-->
Last name:-->
-->
-->
-->-->fieldset 組合表單資料--><form action="">
<field>
<legend>Personal information:legend>
First name: <br>
<input type="text" name="firstname" value="Yu">
<br>
Last name: <br>
<input type="text" name="lastname" value="Chao">
<br><br>
<input type="submit" value="送出">
field>form>body>html> input
單選按鈕輸入 <input type="radio"> 定義單選按鈕。 單選按鈕允許使用者在有限數量的選項中選擇其中之一：
---------------------------------------------
送出按鈕<input type="submit"> 定義用于向表單處理程式（form-handler）送出表單的按鈕。
表單處理程式通常是包含用來處理輸入資料的腳本的伺服器頁面。
表單處理程式在表單的 action 屬性中指定：
---------------------------------------------
Action 屬性
action 屬性定義在送出表單時執行的動作。
向伺服器送出表單的通常做法是使用送出按鈕。
通常，表單會被送出到 web 伺服器上的網頁。
在上面的例子中，指定了某個伺服器腳本來處理被送出表單：<form action="action_page.php">如果省略 action 屬性，則 action 會被設定為目前頁面。
---------------------------------------------------
Method 屬性
method 屬性規定在送出表單時所用的 HTTP 方法（GET 或 POST）：
-----------------------------------------------------
何時使用 GET？
您能夠使用 GET（預設方法）：
如果表單送出是被動的（比如搜尋引擎查詢），并且沒有敏感資訊。
當您使用 GET 時，表單資料在頁面位址欄中是可見的：
action_page.php?firstname=Mickey&lastname=Mouse
注釋：GET 最适合少量資料的送出。浏覽器會設定容量限制。
--------------------------------------------------
何時使用 POST？
您應該使用 POST：
如果表單正在更新資料，或者包含敏感資訊（例如密碼）。
POST 的安全性更加，因為在頁面位址欄中被送出的資料是不可見的。
----------------------------------------------------
Name 屬性
如果要正确地被送出，每個輸入字段必須設定一個 name 屬性。
本例隻會送出 "Last name" 輸入字段：
-------------------------------------------------
下面是 <form> 屬性的清單：
屬性
描述
accept-charset
規定在被送出表單中使用的字元集（預設：頁面字元集）。
action
規定向何處送出表單的位址（URL）（送出頁面）。
autocomplete
規定浏覽器應該自動完成表單（預設：開啟）。
enctype
規定被送出資料的編碼（預設：url-encoded）。
method
規定在送出表單時所用的 HTTP 方法（預設：GET）。
name
規定識别表單的名稱（對于 DOM 使用：document.forms.name）。
novalidate
規定浏覽器不驗證表單。
target
規定 action 屬性中位址的目标（預設：_self）。 補充
select标簽
'''
下拉選标簽屬性
name:表單送出項的鍵.
size：選項個數
multiple：multiple為每一項加上分組下拉選中的每一項 屬性：
value:表單送出項的值.
selected: selected下拉選預設被選中''' '''預設内容 定義：
'''使用者名''' '''登入吧'''