Web技術

WEB發展

WEB的發展

1990年,基於TCP協議的HTTP協議和瀏覽器誕生,在應用層使用文本跨網絡在不同進程間傳輸數據,最後在瀏覽器中將服務器端返回的HTML渲染出來,由此,網頁開發誕生。

網頁是存儲在WEB服務器端的文本文件,瀏覽器發起HTTP請求後,到達WEB服務器程序後,服務程序根據URL讀取對應的HTML文件,並封裝成HTTP響應報文返回給瀏覽器。

起初網頁開發主要是指HTML、CSS等文件製作,目的就是爲了顯示文字或圖片,可以通過超鏈接跳轉到另一個HTML並顯示其內容。後來,網景公司意識到讓網頁動起來十分重要,研發出JavaScript語言,JavaScript是可以在瀏覽器使用JS引擎執行的腳本語言,可以讓網頁元素動態變化,網頁動起來了。先如今的WEB前端開發:HTML、CSS和JavaScript。

爲了讓網頁可以動起來,微軟使用ActiveX技術、SUN的Applet都可以在瀏覽器中執行代碼,但都有安全性問題。目前WEB服務器端將瀏覽器(客戶端)請求的資源直接組成成HTML,然後瀏覽器直接對收到HTML文件進行渲染即可。==>因此計算處理等主要操作有client轉移至後端WEB server,因此目前的WEBserver變得十分龐大。

爲了解決上述問題,早期出現了CGI(Common Gateway Interface)通用網關接口協議,通過瀏覽器中輸入URL直接映射到一個服務器端的腳本程序執行,這個腳本可以查詢數據庫並返回結果給瀏覽器端,這種將用戶請求使用程序動態生成的技術,稱爲動態網頁技術。先後出現了ASP、PHP、JSP等技術,這些技術使用不同的語言編寫的程序都運行在服務器端,所有稱爲WEB後端編程。有一部分程序員還是要編寫HTML、CSS、JavaScript這些代碼運行在瀏覽器端,稱爲WEB前端編程。合起來稱爲Browser/Server編程,即B/S編程

關於CGI:https://blog.csdn.net/wdirdo/article/details/103137453

HTML

HTML:htyper text markup language 即超文本標記語言,不同於編程語言。

超文本就是超出純文本的範疇,即超文本中可以含有例如描述文本的顏色、大小、字體等信息,或使用圖片、音頻、視頻等非文本內容。

HTML由一個個標籤組成,這些標籤各司其職,有的提供網頁信息,有的負責圖片,有的負責網頁佈局。

html文檔樹形結構圖:

數:下面的每一個子節點只能有一個父節點。

  • 二叉樹:一個父節點最多只能有兩個子節點。

圖/網:下面的每一個子節點不只一個父節點。

注:HTML是數據和顯示數據格式的混合體!(爬蟲爬的是數據,爬蟲只要數據)

  • HTML5
<!DOCTYPE HTML>             #文檔說明
<html ...>                  #根標籤

                            #head部分瀏覽器知道就行
                            #放置一些腳本和樣式表均放置於head部分
<head>                      #主站對外的話,元數據有作用
    <meta charset="UTF-8">
    <title>首頁</title>     #標題欄
</head>

<body>                      #瀏覽器渲染出來呈現給我們看的內容是body部分
<h1>WOW</h1>

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>
  • 瀏覽器就是可以渲染和顯示HTML格式的客戶端,瀏覽器與WEB server通信:基於HTTP協議、HTTP協議基於TCP協議(三次握手、四次揮手)

==>(nginx的長連接等相關配置)
==> HTTP響應數據報文分爲報文頭部和報文實體:

超文本需要顯示,就得有個軟件能夠呈現出超文本定義的排版格式,例如顯示圖片、表格,顯示字體的大小、顏色,這個軟件就是瀏覽器

瀏覽器主要的兩大核心:

  • ①渲染引擎
  • ②JS引擎

超文本的誕生是爲了解決純文本不能格式顯示的問題,是爲了好看、美觀,但是隻有通過網絡才能分享超文本的內容,==>制定了HTTP協議。

如今,HTML依然是互聯網展示數據的最主要的方式,廣泛的應用在PC端和移動端。

CSS

CSS (層疊樣式表,Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。

JavaScript
JavaScript簡稱JS,是一種動態的弱類型的腳本解釋性語言,JS和HTML、CSS並稱爲三大WEB核心技術,得到了幾乎主流瀏覽器的支持。
JS引擎

什麼是JS引擎?

JS引擎就是能夠將 Javascript 代碼處理並執行的運行環境。

JS引擎的組成:

1.編譯器:主要工作是將源代碼編譯成抽象語法樹,在某些引擎可能還包含了將抽象語法樹轉換成中間表示(字節碼)。

2.解釋器:在某些引擎中,解釋器主要是接收字節碼,解釋執行這個字節碼,同時也依賴垃圾回收機制等。

3.JIT工具:一個能夠 JIT 的工具,將字節碼或者抽象語法樹轉換成本地代碼。

4.垃圾回收器和分析工具:它們負責垃圾回收和收集引擎中的信息,幫助改善引擎的性能和功效

V8引擎
V8是google開源的高性能JavaScript和WebAssembly引擎,使用c++編寫。它被用於chrome和node.js,以及其他的瀏覽器。

V8引擎不是解釋執行,而是本地編譯,在V8引擎做了很多優化,JS程序在其上運行堪比本地二進制程序。

基於V8引擎,Nodejs誕生,Nodejs提供了大量的庫,從此便可以在服務器真正大規模的使用JavaScript編程,因此JS也可以編寫後端程序。

Nodejs編寫的程序部署需要使用V8引擎,V8引擎被裝載到node裏面,即使用node處理Nodejs編寫的程序。

靜態網頁技術

靜態文件:.html .txt .jpg .js .css .mp3 .avi(等文件後綴名)

注:區分動態和靜態資源是根據在服務端什麼形式至客戶端就是什麼形式,這就是靜態資源,而不是根據視覺上的動和靜來區分的。

前端技術:HTML、JS、CSS(這些代碼在瀏覽器中運行)

動態網頁技術

網頁的內容是後端根據用戶此瀏覽器端提交的請求不同,通過後端程序將內容臨時拼湊好,生成HTML,返回瀏覽器,通過瀏覽器渲染呈現。常見的有ASP和Dotnet、JSP、PHP、Nodejs和等、目前企業級開發第一把交椅JSP(==> WEB部署得最多的Tomcat)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章