一、前端學習歷程
#什么是前端： 任何與用戶直接打交道的操作界面都是前端
#什么是后端： 幕后操作者 不直接和用戶打交道
1.前端基礎
2.學習之路
3.簡介
二、HTTP協議
超文本傳輸協議
規定了瀏覽器與服務端之間消息傳輸的數據格式
我們直接用瀏覽器連接我們的套接字服務端，如果你直接send二進制數據比如b'hello'過去，瀏覽器會報錯，讀不懂我們發送的內容，我們必須有一套公用協議，這就是http協議
就比如很多語言都可以連接數據庫，我們就統一使用sql語句，不管誰來都要說sql
只要通過瀏覽器訪問服務端都要遵循這套協議，除非你開發自己客戶端和服務端，比如qq等，兩者都是自己的東西，愛咋滴咋滴
import socket server = socket.socket() server.bind(('127.0.0.1',8080)) server.listen(5) while True: conn,addr = server.accept() data = conn.recv(1024) print(data) conn.send(b'HTTP/1.1 200 OK\r\n\r\n') with open('a.txt','rb') as f: res = f.read() conn.send(res) conn.close()
<h1>hello Girl!</h1> <a href="http://www.xiaohuar.com">click me</a> <img src="http://img5.imgtn.bdimg.com/it/u=641490458,234938865&fm=26&gp=0.jpg"/>
xxx.txt中寫的是html語法
1.http四大特性:
1.基於請求、響應
2.基於TCP/IP之上、作用於應用層的協議
3.無狀態 (服務端無法保存用戶的狀態,一個人來一千次 我都記不住 還當你如初見)
4.無連接 (請求來一次我響應一次 之后立馬斷開連接 兩者之間就不再有任何關系了)
ps:針對無連接，有時候需要連接怎么辦呢？websocket 相當於是HTTP協議的一個大的補丁，它支持長連接，比如企業的通訊工具，聊天室等使用websocket
2.數據傳輸格式
# 請求數據格式：
請求首行 (標識HTTP協議版本,當前請求方式（get/post）)
請求頭 (一大堆k,v鍵值對)
*********************空白行，這才是重點****************
請求體 (攜帶的是一些敏感信息比如 密碼,身份證號...)
#響應數據格式：
響應首行 (標識HTTP協議版本,響應狀態碼)
響應頭 (一大堆k,v鍵值對)
*********************空白行*********************************
響應體 (返回給瀏覽器頁面的數據 通常響應體都是html頁面)
3.響應狀態碼
用一串簡單的數字來表示一些復雜的狀態或者提示信息
1XX:服務端已經成功接收了你的數據正在處理 你可以繼續提交額外的數據
2XX:服務端成功響應 你想要的數據(請求成功200)
3XX:重定向(當你在訪問一個需要登錄之后才能訪問的頁面 你會發現窗口會自動調到登錄頁面 301 302)
4XX:請求錯誤(請求資源不存在404,請求不合法不符合內部規定或權限不夠403)
5XX:服務器內部錯誤，我們不考慮(500)
4.請求方式
1.get請求
朝服務端要資源(比如瀏覽器窗口輸入www.baidu.com)
get請求也可以攜帶數據，跟在url的后面
ip:port?xxx=yyy&zzz=qqq
1.get能夠攜帶的參數大小有限制，1kb左右很小
2.數據是直接可見，直接顯示在地址欄，不安全，不能攜帶敏感隱私信息
2.post請求
朝服務端提交數據(比如用戶登錄 提交用戶名和密碼)，跟在請求體中
ps: URL:統一資源定位符(大白話 就是網址)
三、HTML
#Web服務的本質:
瀏覽器中敲入網址回車發送了幾件事?
1.瀏覽器超服務端發送請求
2.服務端接收請求
3.服務端返回相應的響應 ， 服務端把HTML文件內容發給瀏覽器
4.瀏覽器接收響應 根據特定的規則渲染頁面展示給用戶看
1.html是什么
- 超文本標記語言（Hypertext Markup Language, HTML）是一種用於創建網頁的標記語言，搭建網頁骨架，使用標簽來描述網頁，它不是一種編程語言
- 本質上是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁
- 要想讓你的頁面能夠正常被瀏覽器顯示出來 你所寫的頁面 就必須遵循html標記語法，也就意味着所有能夠被瀏覽器顯示出來的頁面 內部都是html代碼，瀏覽器只認識html css js
- 不同的瀏覽器，對同一個標簽可能會有不同的解釋，瀏覽器顯示出來樣式可能不一樣（兼容性問題）
- 網頁文件的擴展名：.html或.htm
- 注意：HTML是一種標記語言（markup language），它不是一種編程語言
- XML（老了）也可以搭建前端框架，在odoo框架中使用較多（員工內部管理軟件大多都是此框架開發）
2.注釋
注釋是代碼之母
<!--單行注釋-->
<!--
多行注釋
多行注釋
-->
一般情況下 html的注釋都會按照下面的方式書寫，注釋開始和結束中間寫某些東西，找的時候通過注釋快速找到：
<!--導航條樣式開始-->
******中間內容******
<!--導航條樣式結束-->
3.HTML文檔結構
最基本的HTML文檔：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css樣式優先級</title> </head> <body> </body> </html>
- <!DOCTYPE html>聲明為HTML5文檔。
- <html>、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。
- <head>、</head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據。
- <title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。
- <body>、</body>之間的文本是可見的網頁主體內容。
注意：對於中文網頁需要使用 <meta charset="utf-8"> 聲明編碼，否則會出現亂碼。有些瀏覽器會設置 GBK 為默認編碼，則你需要設置為 <meta charset="gbk">
4.標簽分類
第一種分類：單標簽 和 雙標簽
1.雙標簽(h1~h6 a p div span table ul ol dl)
2.單標簽(自閉和標簽 <br/>、<hr/>、<img src="1.jpg" /> <input/>)
第二種分類： 塊級標簽 和 行內標簽
1.塊兒級標簽(獨占瀏覽器一行) div p h等
#塊兒級標簽可以修改長寬，改一個另一個等比改變
#塊兒級標簽內部可以嵌套任意的塊級標簽和行內標簽，但是p雖為塊級卻只能嵌套行內標簽，連自己這個塊都不能嵌套
2.行內標簽(自身文本多大就占多大) span b s i u等
5.標簽屬性
id和class用的比較多，但都不是必備的 id值，該值就類似於人的身份證號，同一個html文件中id 應該保證唯一 class值，該值就類似於面向對象里面的繼承（多個class由空格隔開） style（不是必備），支持在標簽內直接寫css代碼，屬於行內樣式，優先級最高，但不推薦使用
補充：任何標簽都支持自定義屬性 <a href="#" username="jason" password="123">...點我...</a>
6.emmet插件
輸入input等關鍵字后tab可以一鍵補全，這是emmet插件的作用
四、head內常用標簽
| 標簽 | 意義 |
|---|---|
| <title></title> | 定義網頁標題 |
| <style></style> | 定義內部樣式表 |
| <script></script> | 定義JS代碼或引入外部JS文件 |
| <link/> | 引入外部樣式表文件或網站圖標 |
| <meta/> | 定義網頁原信息 |
#引入js
#head引入外部css樣式文件
1.Meta標簽
Meta標簽介紹：
- <meta>元素可提供有關頁面的元信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
- <meta>標簽位於文檔的頭部，不包含任何內容。
- <meta>提供的信息是用戶不可見的。
meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
#http-equiv屬性：相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
<!--指定文檔的編碼類型(需要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳轉到對應的網址，注意引號(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--告訴IE以最高級模式渲染文檔(了解)--> <meta http-equiv="x-ua-compatible" content="IE=edge">
name屬性: 主要用於描述網頁，與之對應的屬性值為content
keywords后的content是搜索關鍵字，只要你搜這些字都能找到該網頁
description后的content是你搜索出來網站后網頁上對該網站的描述
<meta name="keywords" content="淘寶,淘寶網,淘搶購,購物網"> <meta name="description" content="淘寶網是一個大型購物網站...">
二、body內常用標簽
2.1基本標簽
<b>加粗</b> <i>斜體</i> <u>下划線</u> <s>刪除</s> <p>段落標簽</p> 段落 <h1>標題1</h1> 1-6級標題 ... <h6>標題6</h6> <br> 換行
<hr> 水平線
2.2特殊字符
| 內容 | 對應代碼 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版權 | © |
| 注冊 | ® |
2.3 div標簽和span標簽
div標簽用來定義一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
span標簽用來定義內聯(行內)元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
這兩個元素是專門為定義CSS樣式而生的。
2.4 a標簽
超鏈接標簽
所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。
什么是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
各部分之間用“/”符號隔開。
<a href="http://www.xiaohuar.com" target="_blank" >點我點我</a>
href： 指定目標網頁地址，點擊后會跳轉該url，該地址可以有幾種類型：
- 絕對URL - 指向另一個站點（比如 href="http://www.jd.com）
- 相對URL - 指當前站點中確切的路徑（href="index.htm"）
- 錨URL - 指向頁面中的錨（href="#top"）錨點功能如：回到頂部
target：
- _blank表示在新標簽頁中打開目標網頁
- _self表示在當前標簽頁中打開目標網頁
錨點功能：href 還可以寫另一個a標簽的id值，點擊就會跳到id值所對應的的a標簽 <a id="top">頂部</a> <a href="#top">點擊回到頂部</a>
2.5 img圖片標簽
<img src="圖片路徑" title="鼠標懸浮在圖片上時顯示" alt="提示信息（當圖片加載不出來時會顯示）" width="" height="當只指定一個時，會自動縮放"/> src 存放的是圖片的路徑 1.該路徑可以是本地的，也可以是網上的 2.也可以放url（會自動請求該url獲取相應數據） 3.也可以直接放圖片的二進制數據，會自動轉換成圖片
2.6 列表
無序列表ul li 、有序列表 ol li、標題列表 dl dt dd
1.無序列表
<ul type="選一個"> <li>第一項</li> <li>第二項</li> </ul>
type屬性：
- disc（實心圓點，默認值）
- circle（空心圓圈）
- square（實心方塊）
- none（無樣式）
2.有序列表
<ol type="1" start="2"> <li>第一項</li> <li>第二項</li> </ol>
type屬性：
- 1 數字列表，默認值
- A 大寫字母
- a 小寫字母
- Ⅰ大寫羅馬
- ⅰ小寫羅馬
3.標題列表
<dl> <dt>標題1</dt> <dd>內容1</dd>
<dt>標題2</dt> <dd>內容1</dd> <dd>內容2</dd> </dl>
2.7 表格
table thead tr th tbody td tfoot
表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類數據。表格類數據是指最適合組織為表格格式（即按行和列組織）的數據。
表格的基本結構：
<table> <thead> <tr> <th>序號</th> <th>姓名</th> <th>愛好</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td>Yuan</td> <td>日天</td> </tr> </tbody> <tfoot>結尾</tfoot>
</table>
tr 表示一行
th 和 td 都是文本，建議在 thead內用帶加粗效果的th，在 tbody內用td
rowspan="2" 合並兩行成一行 colspan="2" 合並兩列成一列 使用合並時要把被合並的那行刪掉，不然會擠出來
border="1" 表格邊框
cellpadding="10" 單元格內間距（td內容和邊框之間的距離）
cellspacing="10" 單元格外邊距（不同td之間的距離）
屬性:
- border: 表格邊框.
- cellpadding: 內邊距
- cellspacing: 外邊距.
- width: 像素 百分比.（最好通過css來設置長寬）
- rowspan: 單元格豎跨多少行
- colspan: 單元格橫跨多少列（即合並單元格）
五、form表單
功能：
表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標簽。
5.1 表單屬性
| 屬性 | 描述 |
|---|---|
| accept-charset | 規定在被提交表單中使用的字符集（默認：頁面字符集）。 |
| action ****** | 規定向何處提交表單的地址（URL）（提交頁面）。 |
| autocomplete | 規定瀏覽器應該自動完成表單（默認：開啟）。 |
| enctype ****** | 規定被提交數據的編碼（默認：url-encoded）提交文件要改成formdata |
| method ****** | 規定在提交表單時所用的 HTTP 方法（默認：get) |
| name | 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。 |
| novalidate | 規定瀏覽器不驗證表單。 |
| target | 規定 action 屬性中地址的目標（默認：_self）。 |
注冊實例為例： <form action="這里填數據提交的目的地"> <label for="username">username<input type="text" id="username"/></label> <label for="password">password</label> <input type="password" id="password"/> </form> 1.action 控制數據提交的目的地 不寫的情況下，默認提交到當前頁面所在的路徑 *** 寫全路徑（https://www.baidu.com）,將數據提交給對應路徑 路徑后綴（/index/會自動補全你本網站的ip和port *****
5.2 label標簽
正常情況下必須點擊小圓圈才能選擇，
為“男”和“女”文字都添加上“label”標簽，標簽屬性“for”的屬性值分別為對應id即“male”和“female”，這時用戶點擊“男”和“女”文字時也會選中對應的選 項，提高了用戶體驗。
除了單選框之外，多選框、文本框等標簽也同樣可以用label標簽選中：
#兩種使用方式
5.3 input標簽
<input> 元素會根據不同的 type 屬性，變化為多種形態。
| type屬性值 | 表現形式 | 對應代碼 |
|---|---|---|
| text | 單行輸入文本 | <input type=text" /> |
| password | 密碼輸入框 | <input type="password" /> |
| date | 日期輸入框 | <input type="date" /> |
| checkbox | 復選框 | <input type="checkbox" checked="checked" /> |
| radio | 單選框 | <input type="radio" /> |
| submit | 提交按鈕 | <input type="submit" value="提交" /> |
| reset | 重置按鈕 | <input type="reset" value="重置" /> |
| button | 普通按鈕 | <input type="button" value="普通按鈕" /> |
| hidden | 隱藏輸入框 | <input type="hidden" /> |
| file | 文本選擇框 | <input type="file" /> |
input標簽 就類似於是前端變形金剛
type：
text:普通文本
password:密文 不展示明文
date:日期
submit:觸發提交動作
button:普通按鈕 沒有實際意義 但是可以通過js綁定事件實現自定義動作
reset:清空重置用戶填寫的表單信息
radio:單選 可以通過checked控制默認選擇(當屬性值和屬性名相同的情況下 可以簡寫 checked 或 checked="checked"）
checkbox:多選 同上 可以設置默認值
file:獲取用戶上傳的文件
form表單上傳文件需要修改兩個參數的值：
1.將method由默認的get改為post
2.將enctype編碼格式由默認的urlencoded改為formdata
- readonly：text和password設置只讀
- disabled：所有input均適用,記住這個就行了
5.3 select標簽 下拉框
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
</form>
屬性說明：
- multiple：布爾屬性，默認單選，聲明后為多選
- disabled：禁用
- selected：默認選中該項
- value：定義提交時的選項值
#多選和分組選擇
5.4 textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 個人簡介： </textarea>
屬性說明：
- name：名稱
- rows：行數
- cols：列數
- disabled：禁用
5.5 提交 防呆
1.提交
form表單中 要想觸發提交動作
只有兩種情況可以
1.input標簽type指定成submit
2.直接寫button標簽 <button>提交</button>
2.防呆措施
disable 禁用，只能看（如：修改密碼時用展示用戶名，但是不能修改，只能看）
readonly 只讀（記disable就好了）