整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這里是云端源想IT，幫你輕松學IT”
嗨~ 今天的你過得還好嗎？
誰見過風呢
勿論你和我
但當樹木俯首
風正經過
- 2024.03.05 -
在這個數字化的時代，我們每天都在與網頁打交道。你是否曾經好奇過，這些充滿魔力的網頁是如何誕生的呢？今天，我們就來揭開構成這些網頁的神秘面紗——HTML（超文本標記語言）。
網頁的基本組成
網頁是構成網站的基本元素，通常由圖片、鏈接、文字、聲音、視頻等元素組成，通常我們看見的網頁都是.htm和.html后綴結尾的文件，因為都稱為HTML文件。
什么是HTML
HTML 英文全稱是 Hyper Text Markup Language，中文譯為“超文本標記語言”，專門用來設計和編輯網頁。
使用 HTML 編寫的文件稱為“HTML 文檔”，一般后綴為.html（也可以使用.htm，不過比較少見）。HTML 文檔是一種純文本文件，您可以使用 Windows 記事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本編輯來打開或者創建。
每個網頁都是一個 HTML 文檔，使用瀏覽器訪問一個鏈接（URL），實際上就是下載、解析和顯示 HTML 文檔的過程。將眾多 HTML 文檔放在一個文件夾中，然后提供對外訪問權限，就構成了一個網站。
HTML的故事始于1989年，當時蒂姆·伯納斯-李在歐洲核子研究中心（CERN）提出了一個名為“萬維網”的概念。
為了實現這一概念，他發明了HTML，并隨后與羅伯特·卡里奧一起發明了HTTP協議。從那時起，HTML就成為了互聯網不可或缺的一部分。
上圖簡單羅列了HTML的發展歷史，大家可以簡單了解一下。
什么是標簽
HTML 標記通常被稱為 HTML 標簽 (HTML tag)。 HTML 標簽是由尖括號包圍的關鍵詞，比如<html/>。
<標簽>內容<標簽/>什么是元素
"HTML 標簽" 和 "HTML 元素" 通常都是描述同樣的意思。但是嚴格來講，一個HTML 元素包含了開始標簽與結束標簽，如下實例。
HTML 元素：
<p>這是一個段落</p>web瀏覽器
Web 瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取 HTML 文件，并將其作為網頁顯示。 瀏覽器并不是直接顯示的 HTML 標簽，但可以使用標簽來決定如何展現 HTML頁面的內容給用戶：
HTML 屬性
屬性是用來修飾元素的，屬性必須位于開始標簽里，一個元素的屬性可能不止一個，多個屬性之間用空格隔開，多個屬性之間不區分先后順序。
每個屬性都有值，屬性和屬性的值之間用等號鏈接，屬性的值包含在引號當中，屬性總是以名稱/值對的形式出現。
一個典型的HTML文檔由以下幾個基本元素構成：
這是文檔類型聲明，告訴瀏覽器這個文檔使用的是HTML5標準。
這是整個HTML文檔的根元素，其他所有元素都包含在這個標簽內。
這個部分包含了所有關于網頁的元信息，如標題、字符集聲明、引入的CSS樣式表和JavaScript文件等。
這個標簽定義了網頁的標題，它顯示在瀏覽器的標題欄或標簽頁上。
這個部分包含了網頁的所有內容，如文本、圖片、鏈接、表格、列表等。
HTML的結構示例
讓我們通過一個簡單的例子來具體了解HTML的結構：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個HTML頁面</title>
</head>
<body>
<h1>歡迎來到我的網頁！</h1>
<p>這是一個簡單的段落。</p>
<a href="https://www.example.com">點擊這里訪問示例網站</a>
</body>
</html>在這個例子中，我們可以看到一個完整的HTML文檔結構，從<!DOCTYPE html>開始，到最后一個</html>結束。
想象一下，如果HTML是一棵樹，那么<html>就是樹干，<head>和<body>就像是樹的兩個主要分支。<head>中的標簽好比是樹葉，它們雖然不起眼，但卻至關重要，為樹木提供營養。而<body>中的標簽則像是樹枝和果實，它們構成了樹的主體，吸引人們的目光。
想要快速入門HTML嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！搜索【云端源想】前往學習哦！
HTML的特點主要包括簡易性、可擴展性、平臺無關性和通用性等。具體如下：
1、簡易性：
HTML是一種相對容易學習和使用的語言，它的版本升級通常采用超集方式，使得新版本能夠兼容舊版本的標簽和功能，這樣既保持了向后兼容性，又能夠靈活方便地引入新的功能。
2、可擴展性：
隨著互聯網的發展，HTML也在不斷增加新的元素和屬性來滿足新的需求，如支持多媒體內容的嵌入、更豐富的表單控件等。這種設計使得HTML能夠適應不斷變化的網絡環境。
3、平臺無關性：
HTML編寫的網頁可以在不同的操作系統和瀏覽器上顯示，這是因為HTML是一種與平臺無關的語言。這意味著無論用戶使用什么設備或瀏覽器，都能夠訪問和瀏覽HTML頁面。
4、通用性：
HTML是網絡的通用語言，它是一種簡單的標記語言，用于創建和結構化網頁內容。由于其廣泛的支持和普及，幾乎所有的設備和瀏覽器都能夠解析和顯示HTML內容。
5、支持多種媒體格式：
HTML不僅支持文本內容，還能夠嵌入圖片、音頻、視頻等多種媒體格式，這使得網頁可以提供豐富的用戶體驗。
6、標準化：
HTML遵循萬維網聯盟（W3C）制定的國際標準，這意味著網頁開發者可以根據這些標準來創建網頁，確保網頁的互操作性和可訪問性。
7、標簽豐富：
HTML提供了一系列的標簽，如標題、列表、鏈接、表格等，這些標簽使得開發者能夠創建出結構清晰、功能豐富的網頁。
綜上所述，HTML作為一種基礎的網頁開發語言，因其易學易用、跨平臺、多功能和高度標準化的特點，成為了構建現代網絡內容的核心工具。
HTML作為連接世界的紐帶，其重要性不言而喻。它是數字世界的基石，也是每個想要進入互聯網領域的人必須掌握的技能。無論你是夢想成為前端開發者，還是僅僅想要更好地理解這個由代碼構成的世界，學習HTML都是一個不錯的開始。
今天就先講到這里了，
更多前端開發基礎知識點擊文末閱讀原文查看哦！
記得關注【云端源想IT】一起學編程！
我們下期再見！
END
文案編輯|云端學長
文案配圖|云端學長
內容由：云端源想分享
TML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”，主要是通過HTML標簽對網頁中的文本、圖片、聲音等內容進行描述。
1 HTML骨架格式
日常生活的書信，我們要遵循共同的約定。
同理：HTML 有自己的語言語法骨架格式：
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>2 html基本標簽
作用：所有HTML中標簽的一個根節點。
作用：用于存放：title,meta,base,style,script,link
注意：在head標簽中我們必須要設置的標簽是title
作用：讓頁面擁有一個屬于自己的標題。
作用：頁面在的主體部分，用于存放所有的HTML標簽：p,h,a,b,u,i,s,em,del,ins,strong,img
3 顏色的表示方式
第一種方式：使用顏色名稱: 僅僅有16種顏色名可用英文字母，其余的要用16進制值。
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow第二種方式：RGB模式
第三種：十六進制
#000000 #ffffff #325687 #3774054 文檔類型<!DOCTYPE>（重點）
<!DOCTYPE html>這句話就是告訴我們使用哪個html版本， 我們使用的是 html 5 的版本。 html有很多版本，那我們應該告訴用戶和瀏覽器我們使用的版本號。
標簽位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規范，必需在開頭處使用標簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進行解析。
5 HTML標簽的語義化（重點）
所謂標簽語義化，就是指標簽的含義。
為什么要有語義化標簽：方便代碼的閱讀和維護，同時讓瀏覽器或是網絡爬蟲可以很好地解析，從而更好分析其中的內容，使用語義化標簽會具有更好地搜索引擎優化
核心：合適的地方給一個最為合理的標簽。
語義是否良好： 當我們去掉CSS之后，網頁結構依然組織有序，并且有良好的可讀性，不管是誰都能看懂這塊內容是什么。
遵循的原則：先確定語義的HTML ，再選合適的CSS。
6 總結：（重要知識點）
<html></html>
<head></head>
<title></title>
<body></body>
<table></table>
<tr></tr>
<td></td>
<span></span>
<p></p>
<form></form>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<object></object>
<style></style>
<b></b>
<u></u>
<strong></strong>
<i></i>
<div></div>
<a></a>
<script></script>
<center><center><br>
<hr>
<img>
<input>
<param>
<meta>
<link>1.注釋標簽：<!–注釋–>
-------------------------------------
2.換行標簽：<br/>
-------------------------------------
3.段落標簽：<p>文本文字
特點：段與段之間有行高
屬性：align對齊方式
(left：左對齊 center：居中 right：右對齊)
-------------------------------------
4.水平線標簽:<hr/>
屬性:
width：水平線的長度(兩種:第一種:像素表示；第二種，百分比表示)
size: 水平線的粗細 (像素表示，例如：10px)
color: 水平線的顏色
align:水平線的對齊方式(left：左對齊 center：居中 right：右對齊)
-------------------------------------
5.容器標簽（重點）
<div>:塊級標簽，獨占一行，換行
<span>:行級標簽，所有內容都在同一行作用
<div>:主要是結合css頁面分塊布局
<span>:進行友好提示信息為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題，隨著數字增大文字逐漸變小，字體是加粗的，內置字號，默認占據一行；
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>容器里面裝載著文字或圖表的一種形式，叫列表。列表最大的特點就是 整齊 、整潔、 有序
無序列表 ul （重點）
無序列表標簽： <ul></ul>
屬性：type :三個值，分別為：
circle(空心圓) ,disc(默認,實心圓),square(黑色方塊)
列表項：<li></li>
注意：
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
<li>與</li>之間相當于一個容器，可以容納所有元素。
無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！有序列表 ol
有序列表標簽：<ol>
屬性：type：1、A、a、I、i（數字、字母、羅馬數字）
列表項： <li></li>定義列表dl
\dl>
<dt>名詞1
<dd>名詞1解釋1
<dd>名詞1解釋2
…
<dt>名詞2
<dd>名詞2解釋1
<dd>名詞2解釋2
…
</dl>
dl>
名詞1
名詞1解釋1
名詞1解釋2
... 名詞2
名詞2解釋1
名詞2解釋2
...獨立標簽
屬性:
src：圖片地址： 相對路徑 （同一個網站） 絕對路徑 （不同網站）
width:寬度height:高度border:邊框align:對齊方式，代表圖片與相鄰的文本的相當位置（有三個屬性值：top middle bottom）
alt:圖片的文字說明hspace 和 vspace 設定圖片邊沿上下左右空白，以免文字或其它圖片過于貼近鏈接標簽
超鏈接可以是文本，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。（不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接）
屬性：
href:跳轉頁面的地址(跳轉到外網需要添加協議)；
name:名稱，錨點(回到錨點: 頂部，底部，中間)，在訪問錨點的書寫格式:#name的值
target:_self(自己) _blank(新頁面，之前頁面存在) _
__parent top 默認
self_search相等于給頁面起一個名字，如果再次打開時，如果頁面存在，則不再打開新的頁面。可以是任意名字。如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。
算機網絡知識，是面試常考的內容，在實際工作中也常常會涉及到。
最近總結了66條計算機網絡相關的知識點，大家一起看一下吧：
http0.9流程：
客戶端，構建請求，通過DNS查詢IP地址，三次握手建立TCP連接，客戶端發起請求，服務器響應，四次揮手，斷開TCP連接。（與服務器只有一個來回）
http1.0流程：
客戶端，構建請求，通過DNS查詢IP地址，三次握手建立TCP連接，客戶端發起請求，服務器響應，四次揮手，斷開TCP連接。（與服務器有兩個來回）
因為不足缺陷，就有了http1.1。
http1.1中瀏覽器再也不用為每個請求重新發起TCP連接了，增加內容有：緩存相關首部的擴展，OPTIONS方法，Upgrade首部，Range請求，壓縮和傳輸編碼，管道化等。但還是滿足不了現在的web發展需求，so，就有了http.2版本。
http2解決了（管道化特性可以讓客戶端一次發送所有的請求，但是有些問題阻礙了管道化的發展，即是某個請求花了很長時間，那么隊頭阻塞會影響其他請求。）http中的隊頭阻塞問題。
使用http2會比http1.1在使用TCP時，用戶體驗的感知多數延遲的效果有了量化的改善，以及提升了TCP連接的利用率（并行的實現機制不依賴與服務器建立多個連接）
所以需要學習http2，了解更過的內容來掌握計算機網咯。
對于http2，你可以來運行一個http2的服務器，獲取并安裝一個http2的web服務器，下載并安裝一張TLS證書，讓瀏覽器和服務器通過http2來連接。（從數字證書認證機構申請一張證書）。
了解http2的協議，先讓我們了解一下web頁面的請求，就是用戶在瀏覽器中呈現的效果，發生了些什么呢？
資源獲取的步驟：
把待請求URL放入隊列，判斷URL是否已在請求隊列，否的話就結束，是的話就判斷請求域名是否DNS緩存中，沒有的話就解析域名，有的話就到指定域名的TCP連接是否開啟，沒有的話就開啟TCP連接，進行HTTPS請求，初始化并完成TLS協議握手，向頁面對應的URL發送請求。
接收響應以及頁面渲染步驟：
接收請求，判斷是否HTML頁面，是就解析HTML，對頁面引用資源排優先級，添加引用資源到請求隊列。（如果頁面上的關鍵資源已經接收到，就開始渲染頁面），判斷是否有還要繼續接收資源，繼續解析渲染，直到結束。
第一種GET方法：發送一個請求來獲取服務器上的某一些資源。
第二種POST方法：向URL指定的資源提交數據或附加新的數據。
第三種PUT方法：跟POST方法一樣，可以向服務器提交數據，但是它們之間也所有不同，PUT指定了資源在服務器的位置，而POST沒有哦。
第四種HEAD方法：指請求頁面的首部。
第五種DELETE方法：刪除服務器上的某資源。
第六種OPTIONS方法：它用于獲取當前URL所支持的方法，如果請求成功，在Allow的頭包含類似GET,POST等的信息。
第七種TARCE方法：用于激發一個遠程的，應用層的請求消息回路。
第八種CONNECT方法：把請求連接轉換到TCP/TP通道。
簡單說說，瀏覽器根據請求的url交給dns域名解析，查找真正的ip地址，向服務器發起請求；服務器交給后臺處理后，返回數據，瀏覽器會接收到文件數據，比如，html,js，css，圖像等；然后瀏覽器會對加載到的資源進行語法解析，建立相應的內部數據結構；載入解析到的資源文件，渲染頁面，完成顯示頁面效果。
不夠清楚明白碼？
那就再次詳細一下，咳咳，從瀏覽器接收url，開始進行網絡請求線程，發出一個完整的HTTP請求，從服務器端接收請求到對應的后臺接收到請求，然后是后臺和前臺的http交互；其中的緩存問題（http的緩存），瀏覽器接收到http數據包后的解析流程，css的可視化格式模型，js引擎解析過程等；其他呈現頁面效果。
：這里就需要你對瀏覽器內核的理解：其中主要的渲染引擎和JS引擎，這里了解一下你對瀏覽器內核的理解。
瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。其實最開始渲染引擎和JS引擎是沒有區分明確的，不過后來JS引擎越來越獨立，so，內核就傾向于渲染引擎。
對于資源請求/獲取,資源響應/頁面渲染，會給網絡帶寬和設備資源帶來壓力，這個時候就會考慮到web的性能優化。
其中里面的性能關鍵：
什么是數據包 數據包（IP數據包），指封裝在固定結構的一系列字節，它定義了數據包的長度，傳輸的細節，以及其他與TCP相關的信息。
延遲：指IP數據包從一個網絡端點到另一個網絡端點所花費的時間。（所花費時間在于往返時延，是延遲的時間的兩倍）
帶寬：只要帶寬沒有飽和，兩個網絡端點的連接會一次處理盡可能多的數據量（所以帶寬可能會成為性能的瓶頸）
建立連接時間：在客戶端和服務器之間建立連接往返數據（三次握手）
TCP三次握手過程：客戶端向服務器發起一個SYN包，服務器端返回對應的SYN的ACK響應以及新的SYN包，然后客戶端返回對應的ACK。（在客戶端和服務器之間建立正常的TCP網絡連接時，客戶端首先發出一個SYN消息，服務器使用SYN+ACK應答表示接收了這個消息，最后客戶端再以ACK消息響應。）
SYN是同步序列編號，是TCP/IP建立連接時使用的握手信息。ACK是確認字符，在數據通信中，接收站發給發送站的一種傳輸類控制字符。表示發來的數據已確認接收無誤。在TCP/IP協議中，如果接收方成功的接收到數據，那么會回復一個ACK數據。通過ACK信號有自己固定的格式，長度大小，由接收方回復給發送方。
詳解三次握手：
第一次握手，建立連接時，客戶端發送SYN包到服務器，并進入SYN_SENT狀態，等待服務器確認，其中SYN就是同步序列編號。
第二次握手，服務器收到SYN包，必須確認客戶的SYN，同時自己也發送一個SYN包，即是SYN+ACK包，此時服務器進入SYN_RECV狀態。
第三次握手，客戶端收到服務器的SYN+ACK包，向服務器發送確認包ACK，此包發送完畢，客戶端和服務器進入ESTABLISHED（TCP連接成功）狀態，完成三次握手。
完成三次握手，客戶端與服務器開始傳送數據。
TLS協商時間（TLS會造成額外的往返傳輸）
除了網絡，還有頁面內容本身或服務器性能，如首字節時間TTFB，內容下載時間，開始渲染時間，文檔加載完成的時間等。
那么什么是TTFB，它是指客戶端從開始定位到web頁面，至接收到主體頁面響應的第一字節所耗費的時間。它是測量：從瀏覽器發起請求至收到其第一字節之間的耗時。
內容下載時間是等同于被請求資源的最后字節到達時間。
開始渲染時間，從客戶看到空白頁面的時長。
優化技術：
對于http1的問題，迎來了http2。其中http1的問題：
隊頭阻塞，大多數情況下，瀏覽器會希望同時獲取許多資源，但http1未提供機制來同時請求這些資源，如果僅是使用一個連接，需要發起請求，等待響應，然后才能發起下一個請求。
在http1中要給特性為管道化，可以允許一次發送一組請求，但是需要按照發送順序依次接收響應。所以在請求應答過程中，如發生什么情況，剩下的工作都會被阻塞，這就是“隊頭阻塞”（阻塞在那次請求應答發生錯誤），阻礙網絡傳輸和web頁面的渲染，指導失去響應。
低效的TCP利用，TCP協議作為最可靠的協議之一，其核心是擁塞窗口。
擁塞窗口，是衛星通信在因特網中防止通信擁塞的一種措施，它是在發端采用了一種“擁塞避免”算法和“慢速啟動”算法相結合的機制。“擁塞窗口”就是“擁塞避免”的窗口，它是一個裝在發送端的可滑動窗口，窗口的大小是不超過接收端確認通知的窗口。
擁塞窗口指在接收方確認數據包之前，發送方可以發送的TCP包的數據。（如擁塞窗口指定為1的情況，那么發送方就發出1哥數據包之后，只有接收方確認了那個發出的數據包，才能發送下一個）
擁塞控制能防止過多的數據注入到網絡中，用于避免網絡過載，TCP中可以通過慢啟動探索當前連接對應擁塞窗口的合適大小。即發送者發送數據的時候并非一開始注入大量數據到網絡中，而是發送一個數據包進行測試，當得到確認回復后，額外發送一個未確認包。
這意味著得到一個確認回復，可以發送兩個數據包，得到兩個確認回復，可以發送四個數據包，以幾何形式增長很快到達協議規定的擁塞窗口大小（發包數上限），這時候連接進入擁塞避免階段，這種機制需要往返幾次才能得知最佳擁塞窗口大小，但往返幾次所需的時間成本不可忽略。
tcp中的慢啟動概念，是用來探索當前連接對應擁塞窗口的合適大小。用來弄清楚新連接當前的網絡情況。“慢速啟動”是在連接建立后，每收到一個來自收端的確認，就控制窗口增加一個段值大小，當窗口值達到“慢速啟動”的限值后，慢速啟動便停止工作，避免了網絡發生擁塞。
TCP傳輸控制協議的設計思路是，對假設情況很保守情況下，能夠公平對待同一網絡的不同流量的應用，它的避免擁塞機制被設計城即使在最差的網絡情況下也可以起作用。
臃腫的消息首部，HTTP/1.1能壓縮請求內容，但是消息首部卻不能壓縮。它可能占據請求的絕大部分（也可能是全部）也是比較常見了。（在這里如果能壓縮請求首部，把請求變得更小，就能夠緩解帶寬壓力了，降低系統的總負載）
受限的優先級設置，即如果瀏覽器針對指定域名開啟多個socket請求，若web頁面某些資源會比另外一些資源重要，會加重資源的排隊效應，會延遲請求其他的資源，優先級高的資源先獲取，優先級低的資源會在資源高的資源處理完成，（在處理過程中，瀏覽器不會發起新的資源請求）等待高的完成后再發起請求，(這就會讓總的頁面下載時間延長)。
在請求優先級高的資源的時間區間內瀏覽器并不會發起優先級較低的新請求
小結：HTTP1.1慢啟動影響資源首次加載速度，TCP建立連接后，會開始請求傳輸，開始比較慢，然后不斷加快，為了防止出現網絡擁堵，會讓頁面的首次渲染時間變長。開始多個tcp，如出現網絡下降，無法識別資源的優先級，會出現競態問題。
數據壓縮，在瀏覽器中發送請求時會帶著Content-Encoding: gzip，里面時瀏覽器支持的壓縮格式列表，有多種如，gzip，deflate，br等。這樣服務器就可以從中選擇一個壓縮算法，放進Content-Encoding響應頭里，再把原數據壓縮后發給瀏覽器。
分塊傳輸，就是將傳輸的文件分解成多個小塊，然后分發給瀏覽器，瀏覽器收到后再重新組裝復原。
每個分開包含兩個部分，分塊長度和分塊數據（長度頭和數據塊），長度頭以CRLF結尾的一行明文，數據塊緊跟在長度頭后面，也是用CRLF結尾，最后用一個長度為0的塊表示結束。
在響應報文里用頭字段Transfer-Encoding:chunked表示報文里的body部分不是一次性發送過來的，而是分成了許多塊逐個發送的。
在Transfer-Encoding：chunked和Content-Length中，這兩個字段是互斥的。
一個響應報文的傳輸長度要么已知，要么長度未知（chunked）。
Content-Length: 299
斷點續傳
要實現該功能需要制定下載的實體范圍，這種制定范圍發送請求叫做范圍請求。
Accept-Ranges：服務器使用http響應頭Accept-Ranges標識自身支持范圍請求，字段的具體值用于定義范圍請求的單位。
語法
Accept-Ranges: bytes,范圍請求的單位是 bytes （字節）Accept-Ranges: none,不支持任何范圍請求單位范圍請求時用于不需要全部數據，只需要其中的部分請求時，可以使用范圍請求，允許客戶端在請求頭里使用專用字段來表示只獲取文件的一部分。
Range的格式，請求頭Range是HTTP范圍請求的專用字段，格式是“bytes=x-y”,以字節為單位的數據范圍。
示例：
執行范圍時會使用頭部字段 Range 來指定資源 byte 的范圍。Range格式：5001-10000字節Range : byte = 5001-100005000之后的Range : byte = 5001-0-3000字節，5001-10000字節Range : byte=-3000,5001-10000上圖表示服務器收到Range字段后，檢測范圍合法性，范圍越界，就會返回狀態碼416，如你的文件只有1000個字節，但請求范圍在20000-3000，就會導致這個狀態碼的出現。
如果成功讀取文件，范圍正確，返回狀態碼“206”。服務器要添加一個響應頭字段Content-Range,告訴片段的實際偏移量和資源的總大小。
最后是發送數據，直接把片段用TCP發給客戶端，一個范圍請求就算是處理完了。
格式是“bytes x-y/length”,與Range頭區別在沒有“=”
Content-Range: bytes 0-4395719/4395720
多端數據，就是在Range頭里使用多個“x-y"，一次性獲取多個片段數據。使用一種特殊的MIME類型：“multipart/byteranges”，用來表示響應報文包含了多個范圍時使用。多種范圍請求 響應會在頭部 Content-Type 表明 multipart-byteranges。
多段數據圖：分隔標記boundary來區分不同的分段
存儲的大小
cookie的數據大小不能超過4k；sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或者更大。
有限期時間
因為CDN緩存更方便；突破瀏覽器并發限制；節約cookie帶寬；節約主域名得連接數，優化頁面響應速度；防止不必要的安全性問題。
http2是超文本傳輸協議的第二版，相比http1協議的文本傳輸格式，http2是以二進制的格式進行數據傳輸的，具有更小的傳輸體積以及負載。
http2.0分層，分幀層（http2多路復用能力的核心部分),數據或http層（包含傳統上被認為是 HTTP 及其關聯數據的部分）。
HTTP2.0：
HTTP/2較HTTP/1.1優化亮點
多路復用的實現：
在單個域名下仍可以建立一個TCP管道，使用一個TCP長連接，下載整個資源頁面，只需要一次慢啟動，并且避免了競態，瀏覽器發起請求，分幀層會對每個請求進行分割，將同一個請求的分割塊打上相同的id編號，然后通過協議棧將所有的分割體發送給服務器，然后通過服務器的分幀層根據id編號進行請求組裝，服務器的分幀層將回應數據分割按同一個回應體進行ID分割回應給客戶端，客戶端拼裝回應。
對于http2中的幀（frame），http1不是基于幀（frame）的，是文本分隔的。
GET/HTTP/1.1 <crlf>
這樣，對于http1的請求或者是響應可能有的問題：
HTTP/1 的請求和響應報文，是由起始行、首部和正文組成，換行符分隔；HTTP/2是將請求和響應數據分割成更小的幀，采用二進制編碼，易于解析的。
參考圖片：
幀結構總結 所有的幀都包含一個9 byte的幀頭 + 可邊長的正文不同。根據幀的類型不同，正文部分的結構也不一樣。
幀頭：
http2作為一個二進制協議，擁有包含輕量型，安全和快速在內的所有優勢，保留了原始的http協議語義，對于http2更改了在系統之間傳輸數據的方式。
二進制分幀層（binary framing layer），所有通信都在單個TCP連接上執行，該連接在整個對話期間一直處于打開狀態，主要是二進制協議將通信分解為幀的方式，這些幀交織在客戶端與服務器之間的雙向邏輯流中。
HTTP/2 連接的拓撲結構(展示了一個用于建立多個流的連接)
在流 1 中，發送了一條請求消息，并返回了相應的響應消息。
HTTP/2 幀結構
前9個字節對于每個幀是一致的。解析時只需要讀取這些字節，就可以準確地知道在整個幀中期望的字節數。
幀首部字段表格：
名稱長度描述length3字節表示幀負載的長度type1字節當前幀類型Flags1字節具體幀類型的標識R1位保留位，不要設置，否則會帶來嚴重后果Stream Identifier31位每個流的唯一IDFrame Payload長度可變真實的幀內容,長度是在length字段中設置的
備注：流Id是用來標識幀所屬的流。流看作在連接上的一系列幀，它們構成了單獨的 HTTP 請求和響應。
對于http1 的請求和響應都分成消息首部和消息體兩部分；http2 從上面一張圖可以知道，http2的請求和響應分成HEADERS 幀和 DATA 幀。
比較一下：
http2的一個重要特性是基于流的流量控制。提供了客戶端調整傳輸速度的能力。其中WINDOW_UPDATE 幀用來指示流量控制信息。
有了多路復用，客戶端可以一次發出多有資源的請求，不用像http1那樣，發出對新對象請求之前，需要等待前一個響應完成。所以瀏覽器失去了在Http1中的默認資源請求優先級策略。
http的頭字段
頭字段類型含義Date表示請求和響應生成的日期Pragma表示數據是否允許緩存的通信選項Cache-Control控制緩存的相關信息Connection設置發送響應之后TCP連接是否繼續保持的通信選項Transfer-Encoding表示消息主體的編碼格式Via記錄途中經過的代理和網關Authorization身份認證數據From請求發送者的郵件地址Referer當通過點擊超級鏈接進入下一個頁面時，在這里會記錄下上一個頁面的URIUser-Agent客戶端軟件的名稱和版本號等相關信息Accept客戶端可支持的數據類型，以MIME類型來表示Accept-Charset客戶端可支持的字符集Accept-Language客戶端可支持的語言Host接收請求的服務器ip地址和端口號Range當需要只獲取部分數據而不是全部數據時，可通過這個字段指定要獲取的數據范圍Location表示信息的準確位置Server服務器程序的名稱和版本號等相關信息Allow表示指定的URI支持Content-Encoding當消息體經過壓縮等編碼處理時，表示其編碼格式Content-Length表示消息體的長度Content-Type表示消息體的數據類型，以MIME規格定義的數據類型來表示Expires表示消息體的有效期Last-Modified數據的最后更新日期Content-Language表示消息體的語言Content-Location表示消息體在服務器上的位置Content-Range當僅請求部分數據時，表示消息體包含的數據范圍
HTTP消息示例：
IP 的基本思路
Ip地址的表示方法
IP地址的結構-子網掩碼表示網絡號與主機號之間的邊界。
解析器的調用方法
DNS服務器的基本工作
DNS 服務器之間的查詢操作
數據通過類似管道的結構來流動
計算機網絡，可以將規模分WAN,Wide Area Network廣域網，和LAN局域網。通過電腦連接交換機再到路由器的連接。
你知道計算機與網絡都經歷了怎么樣的一個發展過程嗎？
TCP/IP的機制是什么，TCP/IP通信協議的統稱，學習這個有人一定不了解什么是協議。
但我們在接觸到程序時，常常聽到協議如IP，TCP，HTTP等協議。記住TCP/IP就是IP,TCP,HTTP等協議的集合。協議就是計算機與計算機之間通過網絡實現通信時需要達成的一種的“約定”。這些協議就是讓不同廠商的設備，不同的CPU和不同的操作系統組成的計算機之間進行通信。
就是兩臺計算機之間都能支持相同的協議，并遵循才能實現相互通信。
分組交換協議
分組交換就是將大數據分割成一個一個叫做包的較小單位進行傳輸的方法。
分層模塊
了解OSI參考模型
OSI將分為易于理解的7層：
1.物理層，2.數據鏈路層，3.網絡層，4.傳輸層，5.會話層，6.表示層，7.應用層。
應用層：是對特定應用的協議。
表示層：設備固有數據格式和網絡標準數據格式的轉換。
會話層：通信管理。負責建立和斷開通信連接。
傳輸層：管理兩個節點之間的數據傳輸。
網絡層：地址管理與路由選擇。
數據鏈路層：互連設備之間傳送和識別數據幀。
物理層：以“0”，“1”代表電壓的高低，燈光的閃滅。
如何模塊化通信傳輸
網絡構成要素
網卡：
什么是網關，它是OSI參考模型中負責將從傳輸層到應用層的數據進行轉換和轉發的設備。
代理服務：
第一，我們可以禁止使用iframe，第二，可以禁止使用gif圖片來實現loading效果，降低CPU的消耗，來提升渲染性能，第三，使用CSS3代碼來代替JS動畫。
對于一些小圖標，可以使用base64位編碼，以減少網絡請求，但不建議大圖使用，因為比較耗費CPU，小圖標優勢在于，可以減少HTTP請求，避免文件跨域，修改及時生效。
頁面頭部的style和script會阻塞頁面，在Renderer進程中的JS線程和渲染線程是互斥的。
TCP/IP協議族市一組協議的集合，也稱為互聯網協議族。
20世紀60年代后半葉，應DoD要求，美國開始進行通信技術相關的演技，ARPANET的誕生，開發分組交互技術，在1975年，TCP/IP的誕生。1983年，ARPANET決定正式啟用TCP/IP為通信協議。
TCP/IP與OSI參考模型
對于OSI七層模型太細了，而互聯網協議族TCP/IP模型劃分為四層。
TCP/IP模型（應用層，傳輸層，互聯網層，網絡接口層）-應用層，傳輸層，網絡層，鏈路層。
傳輸層就是可以讓應用程序之間實現通信。
在其中TCP是一種面向有連接的傳輸層協議，保證兩端通信主機之間的通信可達。UDP是一種面向無連接的傳輸層協議，so，UDP用于分組數據較少或者多播，廣播通信以及視頻通信等領域。
應用層
好了各位，以上就是這篇文章的全部內容，能看到這里的人都是人才。我后面會不斷更新網絡技術相關的文章，如果覺得文章對你有用，歡迎給個贊，也歡迎分享，感謝大家 ！！
喜歡本文的朋友們，歡迎長按下圖關注公眾號程序員小灰，收看更多精彩內容
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
