WEB服務之基礎知識

文章目錄

一、Web基礎知識詳解

超文本傳輸協議（HTTP，HyperText Transfer Protocol)是互聯網上應用最爲廣泛的一種網絡協議。
所有的WWW文件都必須遵守這個標準。設計HTTP最初的目的是爲了提供一種發佈和接收HTML頁面的方法。1960年美國人Ted Nelson構思了一種通過計算機處理文本信息的方法，並稱之爲超文本（hypertext）,這成爲了HTTP超文本傳輸協議標準架構的發展根基。

1.1 HTML

http://www.w3school.com.cn

HyperText Markup Language

HTML 指的是超文本標記語言 (Hyper Text Markup Language)

HTML 不是一種編程語言，而是一種標記語言(markup language)

HTML 標籤通常是成對出現的，比如<b> 和</b>

1.1.1 標籤

標籤	描述
`<!DOCTYPE>`	定義文檔類型。
`<html>`	定義 HTML 文檔。
`<title>`	定義文檔的標題。
`<body>`	定義文檔的主體。
`<h1>`to`<h6>`	定義 HTML 標題。
`<p>`	定義段落。
`<br>`	定義簡單的折行。
`<hr>`	定義水平線。
`<!--...-->`	定義註釋。

1.1.2 HTML 屬性

屬性總是以名稱/值對的形式出現，比如：name=“value”

屬性總是在 HTML 元素的開始標籤中規定。

例

<a href="http://www.w3school.com.cn">This is a link</a>

HTML 屬性：https://www.w3school.com.cn/tags/html_ref_standardattributes.asp

1.1.3 HTML 引用

HTML <q>元素定義短的引用。

瀏覽器通常會爲 <q>元素包圍引號。

<p>WWF 的目標是：<q>構建人與自然和諧共存的世界。</q></p>

HTML<abbr>元素定義縮寫或首字母縮略語。

對縮寫進行標記能夠爲瀏覽器、翻譯系統以及搜索引擎提供有用的信息。

<p><abbr title="World Health Organization">WHO</abbr> 成立於 1948 年。</p>

<dfn>定義項目或縮略詞的定義。

<p><dfn title="World Health Organization">WHO</dfn> 成立於 1948 年。</p>

我覺得<abbr>和<dfn>結合會好一點

<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立於 1948 年。</p>

效果

1.1.4 HTML 計算機代碼元素

標籤	描述
`<code>`	定義計算機代碼文本
`<kbd>`	定義鍵盤文本
`<samp>`	定義計算機代碼示例
`<var>`	定義變量
`<pre>`	定義預格式化文本

<code> 元素不保留多餘的空格和折行：

例子

<p>Coding Example:</p>

<code>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</code>

用<pre> 元素中包圍代碼：

<p>Coding Example:</p>

<code>
<pre>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

效果

1.1.5 HTML 表格與列表

表格由<table> 標籤來定義。每個表格均有若干行（由 <tr>標籤定義），每行被分割爲若干單元格（由 <td>標籤定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

例

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

無序列表

無序列表始於 <ul>標籤。每個列表項始於<li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

有序列表始於<ol>標籤。每個列表項始於 <li>標籤。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

1.1.6 HTML5 語義元素

元素	描述
header	定義文檔或節的頁眉
nav	定義導航鏈接的容器
section	定義文檔中的節
article	定義獨立的自包含文章
aside	定義內容之外的內容（比如側欄）
footer	定義文檔或節的頁腳
details	定義額外的細節
summary	定義 details 元素的標題

1.1.7 HTML 響應式 Web 設計

RWD 指的是響應式 Web 設計（Responsive Web Design）
RWD 能夠以可變尺寸傳遞網頁
RWD 對於平板和移動設備是必需的

垂直框架

<html>

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

水平框架

<frameset row="25%,50%,25%">

重要提示：不能將 <body></body> 標籤與 <frameset></frameset> 標籤同時使用

內聯框架

<iframe src="URL"></iframe>

1.1.8 HTML 腳本

<script> 標籤用於定義客戶端腳本，比如 JavaScript。

script 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件。

必需的 type 屬性規定腳本的 MIME 類型。

JavaScript 最常用於圖片操作、表單驗證以及內容動態更新。

下面的腳本會向瀏覽器輸出“Hello World!”：

<script type="text/javascript">
document.write("Hello World!")
</script>

1.1.9 HTML 顏色

顏色	Color HEX	Color RGB
黑色	#000000	rgb(0,0,0)
紅色	#FF0000	rgb(255,0,0)
綠色	#00FF00	rgb(0,255,0)
藍色	#0000FF	rgb(0,0,255)
黃色	#FFFF00	rgb(255,255,0)
淺藍色	#00FFFF	rgb(0,255,255)
紫色	#FF00FF	rgb(255,0,255)
灰色	#C0C0C0	rgb(192,192,192)
白色	#FFFFFF	rgb(255,255,255)

1.1.10 HTML表單

<input>元素是最重要的表單元素。

<input>元素有很多形態，根據不同的 type 屬性。

類型	描述
text	定義常規文本輸入。
radio	定義單選按鈕輸入（選擇多個選擇之一）
submit	定義提交按鈕（提交表單）

例子

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

1.2 http版本

主流版本1.1

1.2.1 HTTP/0.9

已過時。只接受 GET 一種請求方法，沒有在通訊中指定版本號，且不支持請求頭。由於該版本不支持 POST 方法，所以客戶端無法向服務器傳遞太多信息。

僅能請求訪問HTML格式的資源。

1.2.2 HTTP/1.0

這是第一個在通訊中指定版本號的HTTP 協議版本，特別是在代理服務器中。

變化：

請求行必須在尾部添加協議版本字段（http/1.0）；必須包含頭消息；

增加了請求方式POST和HEAD；

多格式：MIME多用途互聯網郵件擴展；

支持cache；

不支持keepalive，所以用了非標準：Connection: keep-alive；

1.2.3 HTTP/1.1

當前主流版本。持久連接被默認採用，並能很好地配合代理服務器工作。還支持以管道方式同時發送多個請求，以便降低線路負載，提高傳輸速度。

變化：

引入了持久連接（persistent connection），一個TCP連接可以允許多個HTTP請求；

加入了管道機制，同一個TCP連接裏，允許多個請求同時發送，增加了併發性，進一步改善了HTTP協議的效率；

請求的頭信息新增了Host字段

新增了請求方式PUT、PATCH、OPTIONS、DELETE等；

支持只發送header信息(不帶任何body信息)

身份認證機制

支持文件斷點續傳

新增了24個錯誤狀態響應碼

1.2.4 1.1比1.0主要優化

1.緩存處理
2.帶寬優化及網絡連接的使用
3.錯誤通知的管理
4.消息在網絡中的發送
5.互聯網地址的維護
6.安全性及完整性

1.2.5 HTTP/2.0

HTTP2.0是SPDY（谷歌公司研發的https的一種協議）的升級版

變化：

HTTP請求和響應中，狀態行和請求/響應頭都是些信息字段，並沒有真正的數據

將所有的信息字段建立一張表，爲表中的每個字段建立索引，客戶端和服務端共同使用這個表，他們之間就以索引號來表示信息字段

增加雙工模式（不僅客戶端能夠同時發送多個請求，服務端也能同時處理多個請求，解決了隊頭堵塞的問題）

增加服務器推送的功能（不經請求服務端主動向客戶端發送數據）

http各版本：https://blog.csdn.net/qq_22238021/article/details/81197157

1.2.6 面試題：http1.0和http1.1的區別

1.長連接
HTTP 1.1支持長連接（PersistentConnection）和請求的流水線（Pipelining）處理，在一個TCP連接上可以傳送多個HTTP請求和響應，減少了建立和關閉連接的消耗和延遲，在HTTP1.1中默認開啓Connection： keep-alive，彌補了HTTP1.0每次請求都要創建連接的缺點

2.緩存處理
在HTTP1.0中主要使用header裏的If-Modified-Since,Expires來做爲緩存判斷的標準，HTTP1.1則引入了更多的緩存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供選擇的緩存頭來控制緩存策略

3.帶寬優化和網絡連接的使用
HTTP1.0中，存在一些浪費帶寬的現象，例如：客戶端只是需要某個對象的一部分，而服務器卻將整個對象送過來了，並且不支持斷點續傳功能，HTTP1.1則在請求頭引入了range頭域，它允許只請求資源的某個部分，即返回碼是206（Partial Content），方便了開發者自由的選擇以便於充分利用帶寬和連接

4.錯誤通知的管理
在HTTP1.1中新增24個狀態響應碼，如
409（Conflict）表示請求的資源與資源當前狀態衝突；.
410（Gone）表示服務器上的某個資源被永久性的刪除

5.Host頭處理
在HTTP1.0中認爲每臺服務器都綁定一個唯一的IP地址，因此，請求消息中的URL並沒有傳遞主機名（hostname）。但隨着虛擬主機技術的發展，在一臺物理服務器上可以存在多個虛擬主機（Multi-homed Web Servers），並且它們共享一個IP地址。HTTP1.1的請求消息和響應消息都應支持Host頭域，且請求消息中如果沒有Host頭域會報告一個錯誤（400 Bad Request）

1.3 http報文結構

1.3.1 請求報文

1.結構

2.實例

3.請求方法

GET 客戶端請求指定資源,服務端返回指定資源
PUT 通常用於向服務器發送請求，如果URI不存在，則要求服務器根據請求創建資源，如果存在，服務器就接受請求內容，並修改URI資源的原始版本。
POST 將客戶端的數據提交到服務器
OPTION 請求服務器支持的方法
HEAD 只請求響應報文的頭部信息
DELETE 請求服務器刪除指定資源

4.常見的請求頭部屬性

Accept 請求報文可通過一個 Accept 報文頭屬性告訴服務端客戶端接受什麼類型的響應。
Cookie 客戶端的Cookie就是通過這個報文頭屬性傳給服務端
Referer 表示這個請求是從哪個URL過來的，假如你通過baidu搜索出一個商家的廣告頁面，你對這個廣告頁面感興趣，鼠標一點發送一個請求報文到商家的網站，這個請求報文的Referer報文頭屬性值就是 http://www.baidu.com。
Cache-Control 對緩存進行控制，如一個請求希望響應返回的內容在客戶端要被緩存一年，或不希望被緩存就可以通過這個報文頭達到目的。
其他屬性參考 –HTTP標頭字段列表： http://en.wikipedia.org/wiki/List_of_HTTP_header_fields

其他屬性

Connection 當前連接的控制選項以及逐跳請求字段列表，不得與HTTP / 2一起使用
Expect 指示客戶端需要特定的服務器行爲。
From 發出請求的用戶的電子郵件地址
HTTP2-Settings 從HTTP / 1.1升級到HTTP / 2的請求

1.3.2 響應報文

1.結構

2.實例

3.響應狀態碼

1xx:信息響應類，表示接收到請求並且繼續處理

100繼續
101交換協議
102處理
103早期提示

2xx:處理成功響應類，表示動作被成功接收、理解和接受

200 OK
201 創建了新資源
202 接受
203 非權威信息
204 沒有內容
205 重設內容
206 部分內容
207 多狀態
208 已報告

3xx:重定向響應類，爲了完成指定的動作，必須接受進一步處理

300 多種選擇
301 永久重定向（永久移動）
302 臨時重定向 （臨時移動）302已被303和307取代（不推薦）
303 查看其他 GET方法
304未修改
305 使用代理
306 切換代理
307 臨時重定向
308 永久重定向

4xx:客戶端錯誤，客戶請求包含語法錯誤或者是不能正確執行

400 錯誤的要求
401 未經授權
402 需要付款
403 禁止
404 找不到
405 方法不允許
406 不可接受
407 代理身份驗證
408 請求超時
409 衝突
410 不可用

5xx:服務端錯誤，服務器不能正確執行一個正確的請求

500 內部服務器錯誤
501 未實施
502 錯誤的網關
503 服務不可用
504 網關超時
505 不支持HTTP版本

HTTP狀態代碼列表：https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

4.響應頭部屬性

Cache-Control

響應輸出到客戶端後，服務端通過該報文頭屬告訴客戶端如何控制響應內容的緩存。

eg:Cache-Control: max-age=3600
Set-Cookie

服務端可以設置客戶端的Cookie，其原理就是通過這個響應報文頭屬性實現的
其他響應頭部屬性

1.4 URL(Uniform Resource Locator)

URL是Internet上用來描述信息資源的字符串，主要用在各種WWW客戶程序和服務器程序

URL 也被稱爲網址

URL結構

1.協議://[用戶名:密碼@]主機名.域名.頂級域名[[:端口號]/目錄/文件名.文件後綴?參數=值#標誌]

2.協議

http http://www.pl.com/index.html

https

ftp ftp://test:[email protected]

telnet

Scheme	訪問	用於…
http	超文本傳輸協議	以 http:// 開頭的普通網頁。不加密。
https	安全超文本傳輸協議	安全網頁。加密所有信息交換。
ftp	文件傳輸協議	用於將文件下載或上傳至網站。
file		您計算機上的文件。

URL編碼：

URL 只能使用 ASCII 字符集來通過因特網進行發送。

URL 編碼使用 “%” 其後跟隨兩位的十六進制數來替換非 ASCII 字符。

URL 不能包含空格。URL 編碼通常使用 + 來替換空格。

1.5 MIME類型

（通常稱爲 Multipurpose Internet Mail Extensions 或 MIME 類型）是一種標準，用來表示文檔、文件或字節流的性質和格式。它在IETF RFC 6838中進行了定義和標準化。瀏覽器通常使用MIME類型（而不是文件擴展名）來確定如何處理URL，因此Web服務器在響應頭中添加正確的MIME類型非常重要。如果配置不正確，瀏覽器可能會曲解文件內容，網站將無法正常工作，並且下載的文件也會被錯誤處理。

text/html html頁面
text/plain 純文本文件
text/css 層級樣式表
text/xml 標記語言
image/gif gif圖片
image/jpeg jpg圖片
application/javascript js
video/mp4 mp4
video/x-flv flv

1.6 http事務

http事務：https://www.jianshu.com/p/c69c8c597ef5

1.6.1 域名解析

1.瀏覽器檢查緩存；有就結束，沒有就下一步

2.瀏覽器檢查操作系統緩存；/etc/hosts 有就結束，沒有就下一步

3.請求網絡配置中的DNS服務器； /etc/resolv.conf DNS服務器

4.Root Server域名服務器中解析；LDNS

5.根據域名服務器返回給本地域名服務器一個主域名服務器地址（gTLD）

6.本地域名服務器像gLTD發送請求。

7.gTLD服務器查詢並返回此域名對應的NameServer域名服務器地址，這個NameServer服務器就是註冊的域名服務器。

8.發送請求到NameServer，根據域名ip映射關係表，找到目標ip。

9.返回該域名對應的ip和ttl值，LDNS會緩存這個域名和ip的對應關係，緩存時間由TTL控制。

10.把解析結果返回用戶，用戶根據TTL值緩存在本地系統緩存，解析過程結束。

1.6.2 發起TCP的3次握手

不過多介紹

1.6.3 建立TCP連接後發起http請求

1.6.4 服務器端響應http請求，瀏覽器得到html代碼

請求頭名	描述
Accept	就是告訴服務器端，我接受那些任何類型
Accept-Encoding	這個看起來是接受那些壓縮方式的文件
Accept-Lanague	告訴服務器能夠發送哪些語言
Connection	告訴服務器支持keep-alive特性
Cookie	每次請求時都會攜帶上Cookie以方便服務器端識別是否是同一個客戶端
Host	用來標識請求服務器上的那個虛擬主機，比如Nginx裏面可以定義很多個虛擬主機，那這裏就是用來標識要訪問那個虛擬主機。
User-Agent	用戶代理，一般情況是瀏覽器

1.6.5 瀏覽器解析html代碼，並請求html代碼中的資源

1.6.6 瀏覽器對頁面進行渲染呈現給用戶

1.7 靜態資源

1.7.1 純粹的html網頁,不包含後臺數據庫及動態程序(php,jsp,asp等)

圖片、視頻、JS、CSS

1.7.2 靜態網頁url

www.pl.com/a.jpg

1.7.3 優缺點

1.優點

內容由客戶端瀏覽器解析,服務端只需要將內容發送給客戶端
不需要讀寫數據庫,性能和效率很高

2.缺點

後端沒有數據庫支持,用戶體驗差,功能少

1.8 動態資源

包含動態程序(php,jsp,asp等),一般需要與後臺數據庫交互,可以實現比靜態更多的功能,如用戶註冊,用戶登錄,論壇,排行榜等

1.9 網站流量度量術語

1.9.1 IP

internet protocol

指獨立IP數。00:00-24:00內相同IP地址值被計算一次。

1.9.2 PV

即Page View, 即頁面瀏覽量或點擊量，用戶每次刷新即被計算一次。

1.9.3 UV

即UniQue Visitor,訪問您網站的一臺電腦客戶端爲一個訪客。00:00-24:00內相同的客戶端只被計算一次。

1.9.4 併發量

同一時間點用戶請求數

1.10 主流的web服務器介紹

1.10.1 apache

中小企業主流的web服務器

1.10.2 nginx

nginx,當今的主流,nginx的分支tengine也被大量使用,高併發,低內存開銷

1.10.3 lighttpd

靜態資源解析效率很高,不溫不火的web服務器

1.10.4 IIS

微軟下的web服務器

1.10.5 tomcat

Tomcat 服務器是一個免費的開放源代碼的Web 應用服務器，屬於輕量級應用服務器，在中小型系統和併發訪問用戶不是很多的場合下被普遍使用，是開發和調試JSP 程序的首選。對於一個初學者來說，可以這樣認爲，當在一臺機器上配置好Apache 服務器，可利用它響應HTML（標準通用標記語言下的一個應用）頁面的訪問請求。實際上Tomcat是Apache 服務器的擴展，但運行時它是獨立運行的，所以當你運行tomcat 時，它實際上作爲一個與Apache 獨立的進程單獨運行的。

1.11 提供動態頁面解析的服務

1.11.1 php

在apache中以模塊形式存在(mod_php5.so)被apache加載

在nginx中以fastcgi守護進程來處理php解析工作

1.11.2 tomcat

解析Jsp應用

1.11.3 python

django

flask

解析python應用