前端 HTTP協議 HTML

時間 2019-11-17

標籤前端 http 協議 html 欄目 HTTP/TCP 简体版

原文原文鏈接

1、前端學習歷程

#什麼是前端：任何與用戶直接打交道的操做界面都是前端css

#什麼是後端：幕後操做者不直接和用戶打交道html

1.前端基礎

2.學習之路

3.簡介

2、HTTP協議

超文本傳輸協議
規定了瀏覽器與服務端之間消息傳輸的數據格式前端

咱們直接用瀏覽器鏈接咱們的套接字服務端，若是你直接send二進制數據好比b'hello'過去，瀏覽器會報錯，讀不懂咱們發送的內容，咱們必須有一套公用協議，這就是http協議web

就好比不少語言均可以鏈接數據庫，咱們就統一使用sql語句，無論誰來都要說sqlsql

只要經過瀏覽器訪問服務端都要遵循這套協議，除非你開發本身客戶端和服務端，好比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

xxx.txt中寫的是html語法編程

1.http四大特性:

　　　　　　　　1.基於請求、響應
　　　　　　　　2.基於TCP/IP之上、做用於應用層的協議
　　　　　　　　3.無狀態　　(服務端沒法保存用戶的狀態,一我的來一千次我都記不住還當你如初見)
　　　　　　　　4.無鏈接　　(請求來一次我響應一次以後立馬斷開鏈接二者之間就再也不有任何關係了)
　　　　　　　　　ps:針對無鏈接，有時候須要鏈接怎麼辦呢？websocket 至關因而HTTP協議的一個大的補丁，它支持長鏈接，好比企業的通信工具，聊天室等使用websocket
flask

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:統一資源定位符(大白話就是網址)

3、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>

4、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="淘寶網是一個大型購物網站...">

2、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
各部分之間用「/」符號隔開。

url

<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: 單元格橫跨多少列（即合併單元格）

5、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就行了）

3.emmet插件

輸入input等關鍵字後tab能夠一鍵補全，這是emmet插件的做用

6、flask初探

Flask 插件安裝

pip3 install Flask

from flask import Flask, request

app = Flask(__name__)
@app.route('/index/', methods=['GET', 'POST'])  # 裝飾的函數就可以接收這兩種請求
def index():
    print(request.form)  # 獲取前端form表單提交過來的數據
    return '收到了'

app.run()  # Flask默認端口 5000