前端概述
import socket
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost',8089))
sock.listen(5)
while True:
connection, address = sock.accept()
buf = connection.recv(1024)
connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))
connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))
connection.close()
if __name__ == '__main__':
main()
html css 以及js的關系
HTML的學習
HTML 是什么？
htyper text markup language 即超文本標記語言
超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
標記語言: 標記（標簽）構成的語言.
網頁==HTML文檔，由瀏覽器解析，用來展示的
靜態網頁：靜態的資源，如xxx.html
動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的
html文檔樹形結構圖：
什么是標簽
- 是由一對尖括號包裹的單詞構成 例如: <html> *所有標簽中的單詞不可能以數字開頭.
- 標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
- 標簽分為兩部分: 開始標簽<a> 和 結束標簽</a>. 兩個標簽之間的部分 我們叫做標簽體.
- 有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/> <hr/> <input /> <img />
- 標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>
標簽的屬性
- 通常是以鍵值對形式出現的. 例如 name="alex"
- 屬性只能出現在開始標簽 或 自閉和標簽中.
- 屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex"
- 如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
HTML常用的標簽：(重要，必須掌握)
<h1></h1> h1~h6 標題標簽，用於展示效果中划分標題 其中<h1>最大，<h6>最小 <p> 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白. <strong> 加粗標簽元素告訴瀏覽器把其加strong標簽的文本以加粗方式顯示給瀏覽者。 <em> 標簽（html em強調標簽）告訴瀏覽器把其中的文本表示為強調的內容，斜體強調。 <hr> 水平線特點是100%寬度水平分割線，並且獨占一行，hr水平線將與上下內容一定距離。 <ul></ul> 無序列表標簽，用於在效果中定義一個無序列表。需要內鑲<li>標簽一起使用。 <ol></ol> 有序列表標簽，用於在效果中定義一個有序列表。需要內鑲<li>標簽一起使用。 <dl> 標簽定義了定義列表（definition list）。標簽用於結合 <dt> （定義列表中的項目）和 <dd> （描述列表中的項目）。例如小米商城首頁最下面的“幫助中心”“賬戶管理”“購物指南”“訂單操作”等。 <li> 標簽定義列表項目。標簽可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。 <div> 可定義文檔中的分區或節（division/section）。標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。如果用 id 或 class 來標記 <div>，那么該標簽的作用會變得更加有效。 <span> 請使用 span 元素對行內元素進行分組，以便通過樣式對它們進行格式化。 <table> 標簽定義 HTML 表格。簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。 <a> 標簽定義超鏈接，用於從一張頁面鏈接到另一張頁面。元素最重要的屬性是 href 屬性，它指示鏈接的目標。 <img> 元素向網頁中嵌入一幅圖像。請注意，從技術上講，<img> 標簽並不會在網頁中插入圖像，而是從網頁上鏈接圖像。<img> 標簽創建的是被引用圖像的占位空間。<img> 標簽有兩個必需的屬性：src 屬性 和 alt 屬性。 <form> 標簽用於為用戶輸入創建 HTML 表單。表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。表單用於向服務器傳輸數據。 <input> 標簽用於搜集用戶信息。根據不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。 <textarea> 標簽定義多行的文本輸入控件。文本區中可容納無限數量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）。可以通過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。 注釋：在文本輸入區內的文本行間，用 "%OD%OA" （回車/換行）進行分隔。 提示：可以通過 <textarea> 標簽的 wrap 屬性設置文本輸入區內的換行模式。 <select> 元素可創建單選或多選菜單。<select&> 元素中的 <option> 標簽用於定義列表中的可用選項。
<!DOCTYPE html>標簽
由於歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在
W3C標准出台以前，瀏覽器在對頁面的渲染上沒有統一規范，產生了差異(Quirks mode或者稱為Compatibility
Mode)；由於W3C標准的推出，瀏覽器渲染頁面有了統一的標准(CSScompat或稱為Strict mode也有叫做Standars
mode)，這就是二者最簡單的區別。
W3C標准推出以后，瀏覽器都開始采納新標准，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標准出來以前，
很多頁面都是根據舊的渲染方法編寫的，如果用的標准來渲染，將導致頁面顯示異常。為保持瀏覽器渲染的兼容性，使以
前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode
和Standars mode，兩種渲染方法共存在一個瀏覽器上。
window.top.document.compatMode： //BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。 //CSS1Compat：標准模式，瀏覽器使用W3C的標准解析渲染頁面。
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,
這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那么，在不同的瀏覽器就會顯示不同的樣式。
如果你的頁面添加了<!DOCTYPE html>那么，那么就等同於開啟了標准模式，那么瀏覽器就得老老實實的按照W3C的
標准解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
這就是<!DOCTYPE html>的作用。
head標簽
<meta>
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.baidu.com"> //(注意后面的引號，分別在秒數的前面和網址的后面)
<meta http-equiv="content-Type" charset=UTF8">
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
注意：X-UA-Compatible
每個主要版本IE新增的功能都是為了讓瀏覽器更容易使用、增加安全性及更支持業界標准。以這些作為IE的特色，其中 一個風險就是舊版本網站無法正確的顯示。 為了將這個風險降到最低，IE6允許網頁開發人員選擇IE編譯和顯示他們網頁的方式。"Quirks mode"為預設，這會 使頁面以舊版本瀏覽器的視點顯示，"Standards mode"(也稱為"strict mode")特點是支持業界標准最為完善。 然而要利用這個增強的支持功能，網頁必須包含恰當的<!DOCTYPE>指令。 若一個網頁沒有包含<!DOCTYPE>指令，IE6會將它以quirks mode顯示。若網頁包含有效的<!DOCTYPE>指令但瀏 覽器無法辨識，IE6會將它以IE6 standards mode顯示。因為少數網站已經包含<!DOCTYPE>指令，兼容性模式的 切換相當成功。這使網頁開發人員能選擇將他們的網頁轉移為standards mode的最佳時機。 隨著時間經過，更多網站開始使用standards mode。它們也開始使用IE6的特性和功能來檢測IE。舉例來說，IE6 不支持universal selector(即css之全局選擇器 * {})，一些網站便使用它來針對IE做特定的對應。 當 IE7增加了對全域選擇器的支持，那些依賴IE6特點的網站便無法偵測出這個新版本的瀏覽器。因此那些針對IE的 特定對應無法應用於IE7，造成這些網站便無法如他們預期的顯示。由於<!DOCTYPE>只支持兩種兼容性模式，受到影 響的網站擁有者被迫更新他們的網站使其能支持IE7。 IE8 比之前的任何版本瀏覽器都更支持業界標准，因此針對舊版本瀏覽器設計的網頁可能無法如預期般呈現。為了幫 助減輕所有問題，IE8引入文件兼容性的概念，使你能選擇你的網頁設計要對應的特定IE版本。文件兼容性在IE8增加 了一些新的模式，這些模式能告訴瀏覽器如何解析和編譯一個網頁。若你的網頁無法在 ie8正確的顯示，你可以更新 你的網站使它支持最新的網頁標准(優先選項)或在你的頁面上新增一個meta元素用於告訴IE8如何依照舊版本瀏覽器 編譯你的頁面。 這能讓你選擇將你的網站更新支持IE8新特點的時機。 當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用 <!DOCTYPE> 指令來確 定如何顯示該網頁。 如果該指令丟失或未指定基於標准的文檔類型，則 Internet Explorer 8 將以 IE5 模式 （Quirks 模式）顯示該網頁。
非meta標簽
標題前面的小圖標
<title>oldboy</title>
<link rel="icon" href="http://www.jd.com/favicon.ico"> #標題里面前面的小圖標
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
body標簽
一 基本標簽（塊級標簽和內聯標簽）
<hn>: n的取值范圍是1~6; 從大到小. 用來表示標題. <p>: 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白. <b> <strong>: 加粗標簽. <strike>: 為文字加上一條中線. <em>: 文字變成斜體. <sup>和<sub>: 上角標 和 下角表. <br>:換行. © ：版權符號. <hr>:水平線 <div><span>
<h1> # 代表<h1> < # 代表< > # 代表>
塊級標簽（block）：<p><h1><table><ol><ul><form><div> # 其屬性占一整行，不管內容多少。
內聯標簽（in-line）：<a><input><img><sub><sup><textarea><span> # 其屬性只占內容的部分。
block（塊）元素的特點
總是在新行上開始；
寬度缺省是它的容器的100%，除非設定一個寬度。
它可以容納內聯元素和其他塊元素
inline元素的特點
和其他元素都在一行上；
寬度就是它的文字或圖片的寬度，不可改變
內聯元素只能容納文本或者其他內聯元素
特殊字符
< >；"；©®
二 圖形標簽: <img>
src: 要顯示圖片的路徑. alt: 圖片沒有加載成功時的提示. title: 鼠標懸浮時的提示信息. width: 圖片的寬 height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
三 超鏈接標簽(錨標簽)<a>
href:要連接的資源路徑 格式如下: href="http://www.baidu.com" 格式如下：<a href="http://www.baidu.com">百度</a> target: _blank : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內容. #重要，必須掌握 name: 定義一個頁面的書簽. 用於跳轉 href : #id.（錨）
四 列表標簽：
<ul>: 無序列表
<ol>: 有序列表
<li>:列表中的每一項.
<dl> 定義列表
<dt> 列表標題
<dd> 列表項
五 表格標簽: <table>
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過css來設置長寬）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合並單元格）
<th>: table header <tbody>(不常用): 為表格進行分區.
六 表單標簽<form> 重要，必須掌握
表單用於向服務器傳輸數據。
表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label 元素。
1.表單屬性
HTML 表單用於接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標簽, 要提交的所有內容都應該在該標簽中.
action: 表單提交到哪. 一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get 默認取值 就是 get（信封）
get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
get/post是常見的兩種請求方式.
2.表單元素
<input> 標簽的屬性和對應值
type: text 文本輸入框 password 密碼輸入框 radio 單選框 （只能選擇一個，例如：男，女） checkbox 多選框 （可以選擇多個，例如：愛好，藍球，乒乓球） submit 提交按鈕 （如果要改顯示的文字，后面跟value=“需要顯示的文字”） button 按鈕(需要配合js使用.) button和submit的區別？ file 提交文件：form表單需要加上屬性enctype="multipart/form-data"
reset 重置按鈕 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都好使.
上傳文件注意兩點：
1 請求方式必須是post
2 enctype="multipart/form-data"
def index(request): print request.POST print request.GET print request.FILES for item in request.FILES: fileObj = request.FILES.get(item) f = open(fileObj.name, 'wb') iter_file = fileObj.chunks() for line in iter_file: f.write(line) f.close() return HttpResponse('ok')
<select> 下拉選標簽屬性
name:表單提交項的鍵.
size：選項個數
multiple：multiple
<option> 下拉選中的每一項 屬性：
value:表單提交項的值. selected: selected下拉選默認被選中
<optgroup>為每一項加上分組
<textarea> 文本域
name: 表單提交項的鍵. cols: 文本域默認有多少列 rows: 文本域默認有多少行
<label>
<label for="www">姓名</label> <input id="www" type="text">
<fieldset>
<fieldset>
<legend>登錄吧</legend>
<input type="text">
</fieldset>