前端-HTML-web服務本質-HTTP協議-請求-標籤-01(待完善)

  • 2019 年 10 月 7 日
  • 筆記

目錄

day40-43 在講優酷項目

僅是對前端知識的小總結（比較片面，不具備多少參考性） 小白可以從這個鏈接開始：開始學習 HTML（這是…，點下一頁看完敲敲案例即可）

前端

什麼是前端

任何與用戶直接打交道的操作界面都可以稱之為前端

比如：電腦界面、手機界面、平板界面

什麼是後端

暫時理解成幕後操作者，不直接和用戶打交道

學習流程

前端三劍客：HTML、CSS、JavaScript

前端框架：Bootstrap、VUE、React…

前端三劍客的形容

每部分的基本內容

web服務的本質

我們的瀏覽器端（B/S架構）本質上也是一個客戶端，通過socket與服務端通信，發送請求，獲得返回數據，再有瀏覽器將服務器返回的數據渲染成頁面上看到的一個一個標籤元素樣式。

測試–瀏覽器作為客戶端向服務器發起請求

手寫一個簡易的服務端做測試

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(data.upper())        conn.close()

瀏覽器直接請求服務端的地址（在地址欄輸入 ip+端口）

服務端收到響應（不需要寫客戶端，瀏覽器就相當於客戶端（B/S本質就是C/S架構））

瀏覽器輸入網址回車發生了幾件事 *****

  • 瀏覽器（客戶端）朝服務端發送請求
  • 服務端接收請求
  • 服務端返回相應的響應
  • 瀏覽器接收響應，根據特定的規則渲染頁面展示給用戶看

HTTP協議（超文本傳輸協議）

參考博客：HTTP請求方式中8種請求方法（簡單介紹）、前端知識之HTML內容

規定了瀏覽器端與服務端之間消息傳輸的數據格式（兩個數據格式不同就無法溝通，可能造成溝通紊亂等）

HTTP協議的四大特性

  • 基於請求響應 客戶端（通常是瀏覽器）發送請求，服務端接收到做處理並返迴響應
  • 基於TCP/IP之上的，作用於應用層的協議 基於socket通信
  • 無狀態（服務端無法保存用戶的狀態，一個人來一千次都記不住，都當做第一次）
  • 無連接（請求來一次，響應一次，之後立馬斷開鏈接，兩者之間就不再有任何關係了） 無狀態無連接：服務端一收（recv）一發（send）然後斷開連接（conn.close）

websocket：相當於一個HTTP協議的大補丁，支持長連接（後期再詳細了解）

請求數據格式要求

  • 請求首行（標識HTTP協議版本，當前請求方式）
  • 請求頭（一大堆k, v 鍵值對）
  • 空行 r n
  • 請求體（攜帶的是一些敏感信息，比如：密碼，身份證號）

請求方式

序號

方法

描述

1

GET*****

請求指定的頁面信息，並返回實體主體

2

HEAD

類似於 GET 請求，只不過返回的響應中沒有具體的內容，用於獲取報頭

3

POST*****

向指定資源提交數據進行處理請求（例如提交表單或者上傳文件）。數據被包含在請求體中。POST請求可能會導致新的資源的建立和/或已有資源的修改

4

PUT

從客戶端向服務器傳送的數據取代指定的文檔的內容

5

DELETE

請求服務器刪除指定的頁面

6

CONNECT

HTTP/1.1協議中預留給能夠將連接改為管道方式的代理服務器

7

OPTIONS

允許客戶端查看服務器的性能

8

TRACE

回顯服務器收到的請求，主要用於測試或診斷

get請求

朝服務端要資源（比如瀏覽器窗口輸入 www.baidu.com）

post請求

朝服務端提交數據（比如用戶登錄，提交用戶名和密碼）

響應數據格式

  • 響應首行（標識HTTP協議版本，響應狀態碼（200 OK））
  • 響應頭（一大堆k, v 鍵值對）
  • 空行 r n
  • 響應體（返回給瀏覽器頁面的數據，通常響應體都是html頁面，瀏覽器接收到直接渲染）

響應狀態碼

用一串簡單數字來表示一些複雜的狀態或者提示信息

  • 1XX：服務端已經成功接收了你的數據，正在處理，你可以繼續提交額外的數據
  • 2XX：服務端成功響應你想要的數據（請求成功 200）
  • 3XX：重定向（例如當你在訪問一個需要登錄之後才能訪問的頁面，你會發現窗口會自動跳到登錄頁面 301、302）
  • 4XX：請求錯誤（請求資源不存在 404， 請求不符合內部規定（可能數據少了）或權限不夠 403）
  • 5XX：服務器內部錯誤（500）

URL 統一資源定位符

大白話就是網址

測試–服務端遵循HTTP協議返回

測試–遵循HTTP協議 返迴文件

服務端代碼 server.py

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 rnrn')      with open(r'E:PyCharm 2019.1.3ProjectFileday010day0442 HTTP服務端a.txt', 'rb') as f:          for line in f:              conn.send(line)        conn.close()

被讀取文件 a.txt

<h1>hello girl</h1>    <a href="www.baidu.com"> clike me </a>    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567488429227&di=05400fbc33579211c72c6fb6bf7f50a2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201504%2F23%2F20150423H0938_fZY5H.jpeg"/>

瀏覽器請求

瀏覽器根據特定的規則渲染頁面展示給用戶看

這個規則就是 HTML（超文本標記語言）

HTML 超文本標記語言

構建網頁的基本骨架

XML也可以搭建前端頁面，在odoo框架（專門做公司內部管理系統）中使用較多

要想讓你的頁面能夠被瀏覽器正常顯示出來，你所寫的頁面就必須遵循html標記語法，也就意味着，所有能夠被瀏覽器顯示出來的頁面，內部都是html代碼

瀏覽器只認識 html、css、js

HTML 注釋

注釋是代碼之母，寫好注釋便於代碼的閱讀與項目的維護 

<!-- 單行注釋 -->    <!--  多行注釋1  多行注釋2  -->

通常況下，html的注釋都會按照下面的方式書寫

寫網頁的一套標準

<!-- 導航條樣式開始 -->      ...導航條樣式代碼...  <!-- 導航條樣式結束 -->

web本質

  • 瀏覽器（谷歌瀏覽器、IE瀏覽器、360瀏覽器…）
  • 服務器
  • 文件（ .html/.htm 結尾的文件）

​ 也就意味着只要看到 .html 結尾的文件就是一個html頁面。。

​ 文件的後綴名僅僅是給人看，對計算而言都是二進制數據，無任何區別

html 文檔結構

新建html文件

簡單的html結構

<!DOCTYPE html>  <!-- 文檔聲明 -->  <html>      <head>          這裡的內容不是展示給用戶看的，而是定義一些配置，主要是給瀏覽器看的      </head>      <body>          就是展示給用戶看的內容      </body>  </html>

html的打開方式

直接文件打開

pycharm打開（亦或者是其他編輯器打開）

IE 是第一個瀏覽器，本可以一家獨大的，就隨意定規則，比較難用…，後續比較貼合用戶的瀏覽器起來了，他的市場也就更少了，追趕不上了，就放棄了，一家獨大到快要被淘汰

標籤

pycharm中標籤支持 tab 補全閉合部分，主要是因為 emmet 插件

標籤分類1（單雙標籤）

  • 雙標籤（<h1> </h1> <a> </a>）
  • 單標籤/自閉和標籤（<img />）

head 中的標籤

title style link script meta

<!DOCTYPE html>  <html lang="en">  <head>      放在這一塊的標籤  </head>  <body>    </body>  </html>

title 標題標籤

網頁標題

style 樣式標籤

可以在裏面寫css樣式，美化html渲染效果

link 外部樣式引用標籤

專門用來引入外部css文件

script js腳本標籤

內部支持寫js代碼，也支持導入外部的js文件

meta 這一塊兒的標籤不展示給用戶看

keyword（給搜索引擎用的）

descript（搜出來之後的描述）

body 中的標籤

分類來展開

基本標籤

h1-h6 p br hr u i s b

h 系列標題標籤      <h1>h1</h1> 一級標題      <h2>h2</h2> 二級標題      <h3>h3</h3> 三級標題      <h4>h4</h4> 四級標題      <h5>h5</h5> 五級標題      <h6>h6</h6> 六級標題      <p></p> 段落標籤  <br/> 換行  <hr/> 水平線  <u></u> 下劃線  <i></i> 斜體標籤  <s></s> 刪除線  <b></b> 加粗  ...

特殊符號

代碼

對應HTML渲染內容

&nbsp;

（空格）

&amp;

&

&yen;

¥

&reg;

®（註冊）

&copy;

©（版權）

&gt;

>

&lt;

< (與 > 成對出現時會出現問題)

常用標籤

div（塊級標籤）與span（行內標籤）

<div> </div>  div標籤用來定義一個塊級元素，並無實際的意義。  <span> </span>  span標籤用來定義內聯(行內)元素，並無實際的意義。

div 和 span 通常都是用來搭建網頁布局的，主要通過CSS樣式為其賦予不同的表現。

img 圖片

<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">

<img src="圖片路徑" title="鼠標懸浮在圖片上時顯示" alt="提示信息（當圖片加載不出來時會顯示）" width="" height="當只指定一個時，會自動縮放"/>      src 存放的是圖片的路徑          1.該路徑可以是本地的，也可以是網上的          2.也可以放url（會自動請求該url獲取相應數據）          3.也可以直接放圖片的二進制數據，會自動轉換成圖片

a 超鏈接、錨點

<a href="地址" target="_blank"></a>      href 後存放url時，點擊會跳轉      如果該鏈接沒有被點過，那麼默認是藍色的，點過就是紫色的（a標籤四狀態）        target 默認值是 _self 當前窗口跳轉，_blank 新開窗口跳轉        錨點功能：href 還可以寫另一個a標籤的id值，點擊就會跳到id值所對應的的a標籤          <a id="top">頂部</a>          <a href="#top">點擊回到頂部</a>

標籤屬性（比較重要的三個）

id和class用的比較多，但都不是必備的

  • id值，該值就類似於人的身份證號，同一個html文件中id 應該保證唯一
  • class值，該值就類似於面向對象裏面的繼承（多個class由空格隔開）
  • style（不是必備），支持在標籤內直接寫css代碼，屬於行內樣式，優先級最高

補充：任何標籤都支持自定義屬性 <a href="#" username="jason" password="123">...點我...</a>

列表標籤

無序列表ul li 、有序列表 ol li、標題列表 dl dt dd

<!--  ******無序列表  -->  ul>li*3  --> emmet 插件提供的快捷寫法，軟件不支持可以下一個這個插件(網上搜來了解)  <ul type="none">      <li></li>      <li></li>      <li></li>  </ul>      type 放的是列表前面的符號樣式，disc實心圓點、circle空心圓圈、square方塊、none 無樣式        <!--  ******有序列表  -->  <ol type="1" start="1">      <li></li>      <li></li>      <li></li>  </ol>      type 放的是編號類型          1 數字列表，默認值 1          A 大寫字母          a 小寫字母          Ⅰ大寫羅馬數字          ⅰ小寫羅馬數字          可指定 start起始值    <!--  ******標題列表  -->  <dl>      <dt>標題</dt>      <dd>內容</dd>      <dt>標題2</dt>      <dd>內容2</dd>      <dd>內容2</dd>  </dl>      沒有仔細研究

表格標籤

table thead tr th tbody td tfoot

<table border="1">      <thead>表頭          <tr>              <th>usernmae</th>              <th>password</th>              <th>hobby</th>          </tr>      </thead>      <tbody>表體          <tr>一行              <td>一個單元格</td>          </tr>          <tr>              <td></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之間的距離）

表單標籤

能夠接收用戶輸入（輸入、選擇、上傳），並將其發送給後端服務器處理 請記得加上name屬性（不然響應輸入框的內容提交不上去）

form label input select textarea

註冊實例為例：  <form action="這裡填數據提交的目的地">      <label for="username">username<input type="text" id="username"/></label>      <label for="password">password</label>      <input type="password" id="password"/>  </form>    action 控制數據提交的目的地      不寫的情況下，默認提交到當前頁面所在的路徑 ***      寫全路徑（https://www.baidu.com）,將數據提交給對應路徑      路徑後綴（/index/）前面的會自動補全 *****    label標籤 可以給 input加一些提示信息，點提示信息可以讓 for="input的id" 的那個input獲取焦點    input 類似於變形金剛， 會隨 type的改變發生改變      type 屬性可以指定輸入框的類型          text 普通文本          password 密文格式          date 日期選擇框          submit 提交          button 普通按鈕，沒有實際意義，但是可以通過js綁定事件實現（也可以是 <button>普通的按鈕</button>）          reset 重置，把表單中的所有input數據清空          radio 單選 要指定 name 來給radio分組，每組只能選中一個，checked默認勾選          checkbox 多選，也應該指定name屬性，checked默認勾選          file 獲取用戶上傳的文件          hidden 隱藏標籤    form表單中 要想觸發提交動作，只有兩種情況可以      input標籤type指定成submit      直接寫button標籤      獲取用戶輸入（輸入、選擇、上傳...）的標籤，都必須有一個name屬性  checked="checked" 控制單選或多選默認選中  如果標籤的屬性名和屬性值相等可以簡寫（checked="checked" ---> checked）        value 指定值，不寫隨瀏覽器變化    <select name="" id="" multiple> 下拉框      <optgroup label="上海"> 分組（不能選）          <option value="">選項1</option>          <option value="" selected="selected">選項2</option>          <option value="" selected>選項3</option>      </optgroup>  </select>    multiple 多選      ctrl 按住就可以多選了  selected 默認選中（selected=selected）      <textarea></textarea> 多行文本框 輸入，可調大小    disable 禁用，只能看（修改密碼時用戶名還是展示的）  防呆措施，...    readonly 只讀（記disable就好了）

name相當於字典的 key， value就是字典的值，

form的屬性

屬性

描述

accept-charset

規定在被提交表單中使用的字符集（默認：頁面字符集）

action *****

規定向何處提交表單的地址（URL）（提交頁面）

autocomplete

規定瀏覽器應該自動完成表單（默認：開啟）

enctype ****

規定被提交數據的編碼（默認：url-encoded）,傳文件時需要指定

method ***

規定在提交表單時所用的 HTTP 方法（默認：GET）

name

規定識別表單的名稱（對於 DOM 使用：document.forms.name）

novalidate

規定瀏覽器不驗證表單

target

規定 action 屬性中地址的目標（默認：_self）

input 的不同形態

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" />
對應的屬性
name：表單提交時的「鍵」，注意和id的區別  value：表單提交時對應項的值      type="button", "reset", "submit"時，為按鈕上顯示的文本年內容      type="text","password","hidden"時，為輸入框的初始值      type="checkbox", "radio", "file"，為輸入相關聯的值  checked：radio和checkbox默認被選中的項  readonly：text和password設置只讀  disabled：所有input均適用

select 標籤

<select name="city" id="city">      <option value="1">北京</option>      <option selected="selected" value="2">上海</option>      <option value="3">廣州</option>      <option value="4">深圳</option>  </select>
對應的屬性
multiple：布爾屬性，設置後為多選，否則默認單選  disabled：禁用  selected：默認選中該項  value：定義提交時的選項值

label標籤

定義：<label> 標籤為 input 元素定義標註（標記）。    說明：      label 元素不會向用戶呈現任何特殊效果。      <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。    <form action="">    <label for="username">用戶名</label>    <input type="text" id="username" name="username">  </form>

textarea 多行文本框

<textarea name="memo" id="memo" cols="30" rows="10">    默認內容  </textarea>
對應屬性
name：名稱  rows：行數  cols：列數  disabled：是否禁用

標籤分類2

塊級標籤

  • 獨佔瀏覽器一行，可設置長寬

​ p div h..

  • 塊級標籤可以修改長寬
  • 塊級標籤內部可以嵌套任意類型的標籤（除了p） p標籤雖然是塊級標籤，但是他不能嵌套其他塊級標籤（包括 p標籤自身）（套了會自動給你分開，看文檔結構），行內標籤還是可以套的

行內標籤

  • 自身文本多大就多大（無法設置長寬（padding 例外））

​ span u i a

塊級（標籤）元素與行內元素的區別

div 與 span 這兩個標籤是專門為定義CSS樣式而生的。

塊級元素

行內元素

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

寫好上述代碼後，右鍵運行

在html 表單的action 屬性中輸入 127.0.0.1:5000/index

給form表單的標籤加上 name value後

接收文件需指定

要指定 enctype="multipart/form-data" 來接收文件

VirMach 便宜 VPS

QNews

QNews