《Web前端技術(shù)（HTML+CSS+JavaScript）》課件-第1章 Web技術(shù)概述

第1章Web技術(shù)概述學(xué)習(xí)目標123了解Web的由來及其與Internet的關(guān)系了解Web技術(shù)相關(guān)概念了解Web應(yīng)用開發(fā)及Web前端開發(fā)常用工具4掌握HbuilderX的使用本章架構(gòu)★★★1.1Web的起源1.2Web技術(shù)相關(guān)概念1.3Web應(yīng)用開發(fā)★1.4Web前端開發(fā)常用工具★1.5HBuilderX的使用1.1Web的起源1.1Web的起源

Internet，中文正式譯名為因特網(wǎng)，又叫做國際互聯(lián)網(wǎng)，它是由那些使用公用語言互相通信的計算機連接而成的全球網(wǎng)絡(luò)。目前Internet已經(jīng)是世界上規(guī)模最大、發(fā)展最快的計算機互聯(lián)網(wǎng)。從1991年開始Internet連網(wǎng)計算機的數(shù)量每年翻一番，到2000年已超過100萬個網(wǎng)絡(luò)，1億臺計算機和10億個用戶使用Internet。截至2020年5月31日，全球互聯(lián)網(wǎng)用戶數(shù)量達到46.48億，占世界人口數(shù)量的59.6%。2000-2020年，世界互聯(lián)網(wǎng)用戶數(shù)量增長了近12倍。1

Internet的誕生1.1Web的起源

Internet這一影響人們生活的技術(shù)源自于美國1969年開始實施的Arpanet計劃，其目的是建立分布式的、存活力極強的全國性信息網(wǎng)絡(luò)。1972年，由50所大學(xué)和研究機構(gòu)參與連接的Internet網(wǎng)最早的模型Arpanet第一次公開向人們展示。到1980年，Arpanet成為Internet最早的主干網(wǎng)絡(luò)。20世紀80年代初，２個著名的科學(xué)教育網(wǎng)CSNET和BITNET又先后建立。1984年，美國國家科學(xué)基金會NSF規(guī)劃建立了13個國家超級計算中心及國家教育科研網(wǎng)(NSFNET)，替代Arpanet的主干地位。NSFNET網(wǎng)絡(luò)于1989年改名為Internet，且向公眾開放，隨后，Internet網(wǎng)開始接受其它國家地區(qū)接入。從此，Internet便在全球各地普及起來。1

Internet的誕生1.1Web的起源（1）E-mail：電子郵件。具有速度快、成本低、方便靈活的優(yōu)點，用戶之間通過發(fā)送/接收電子郵件可以實現(xiàn)信息的交換。（2）FTP（FileTransferProtocol）：文件傳輸協(xié)議。主要用于文件的分享，由于登錄FTP的用戶名和密碼會以明文傳輸?shù)椒?wù)器端，因此在安全性要求高的環(huán)境中較少應(yīng)用。（3）BBS（BulletinBoardSystem）：電子公告牌。主要用以信息的共享和用戶之間的互動，現(xiàn)代已發(fā)展成為功能前的社區(qū)，可以實現(xiàn)信息公告、線上交談、分類討論、經(jīng)驗交流、文件共享等。（4）WWW（WorldWideWeb）：簡稱3W，也稱Web，是Internet上集文本、聲音、圖像、視頻等多媒體信息于一身的全球信息資源網(wǎng)絡(luò)，是Internet上的重要組成部分。2

Internet的主要服務(wù)1.1Web的起源

1989年夏天，Tim開發(fā)世界第一個Web服務(wù)器和第一個Web客戶機；同年12月，將其發(fā)明正式命名為WorldWideWeb。1990年，Tim以HTML為基礎(chǔ)在NeXT電腦上發(fā)明了最原始的Web瀏覽器。1991年8月6日，Tim建立世界上第一個網(wǎng)站（http://info.cern.ch）。該網(wǎng)站解釋了WorldWideWeb是什么，以及如何使用網(wǎng)頁瀏覽器和如何建立一個網(wǎng)頁服務(wù)器等。至此，Web正式誕生。1994年10月，Tim在麻省理工創(chuàng)立WorldWideWebConsortium（萬維網(wǎng)聯(lián)盟），該聯(lián)盟的簡稱為W3C，是Web技術(shù)領(lǐng)域最具有權(quán)威和影響力的國際中立性技術(shù)標準機構(gòu)。3

Web的誕生1.2

Web技術(shù)相關(guān)概念1.2

Web技術(shù)相關(guān)概念

WWW可以簡稱為3W或Web，中文名為萬維網(wǎng)，它是Internet上最核心的部分。萬維網(wǎng)是建立在Internet上的一種網(wǎng)絡(luò)服務(wù)，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問的直觀界面，其中的文檔及超級鏈接將Internet上的信息節(jié)點組織成一個互為關(guān)聯(lián)的網(wǎng)狀結(jié)構(gòu)。WWW在使用上分為Web服務(wù)器端和Web客戶端，用戶通過Web客戶端可以訪問Web服務(wù)器端的頁面。1WWW1.2

Web技術(shù)相關(guān)概念

Website的中文名稱是網(wǎng)站，是指在互聯(lián)網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML、CSS、JavaScript等代碼語言制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合，有可供管理人員操作的后臺及用戶使用的前臺。簡單地說，Website是一種通訊工具，就像布告欄一樣，人們可以通過Website來發(fā)布或訪問資訊，也可以提供或享受服務(wù)。2Website1.2

Web技術(shù)相關(guān)概念

URL（UniformResourceLocator，統(tǒng)一資源定位器），俗稱網(wǎng)址，它是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯(lián)網(wǎng)上標準資源的地址。在WWW上瀏覽或者查詢信息，必須在網(wǎng)頁瀏覽器上輸入查詢目標的地址。

URL的一般格式如下：協(xié)議：//主機地址（lP地址）+目錄路徑+參數(shù)日常使用的協(xié)議主要有ftp（文件傳輸協(xié)議）、file（本地文件）、telnet（遠程登陸協(xié)議）、http（超文本傳輸協(xié)議）、https（超文本傳輸安全協(xié)議）等。3URL1.2

Web技術(shù)相關(guān)概念例如：ftp://java:java@1file:///c:/ProgramFiles/Java/jdk1.8.0_172/bintelnet://3401https:///test/index.html?key1=valuel&key2=value2URL的參數(shù)是提供給服務(wù)器的額外參數(shù)，緊跟在路徑后面，使用“?”與路徑分割。參數(shù)可以有一組或多組，通過鍵值對的方式進行設(shè)置，使用“=”連接鍵值對，多組參數(shù)使用“&”進行連接。查詢參數(shù)不是必須的，如果不需要，則可以不出現(xiàn)在URL上。3URL1.2

Web技術(shù)相關(guān)概念

Web標準（WebStandard），是一系列標準的集合，主要包含：結(jié)構(gòu)標準（XML、HTML、XHTML）、表現(xiàn)標準（CSS）、行為標準（DOM、JavaScript）。4Web標準1.2

Web技術(shù)相關(guān)概念

Web瀏覽器，簡稱瀏覽器，是指可以顯示網(wǎng)頁服務(wù)器或者文件系統(tǒng)的HTML文件內(nèi)容，并讓用戶與這些文件交互的一種軟件。網(wǎng)頁瀏覽器主要通過HTTP協(xié)議與網(wǎng)頁服務(wù)器交互并獲取網(wǎng)頁，這些網(wǎng)頁由URL指定，文件格式通常為HTML，并由MIME在HTTP協(xié)議中指明。Web瀏覽器是計算機中一種重要的應(yīng)用軟件，很多有實力的IT企業(yè)競相設(shè)計開發(fā)自己的瀏覽器，并不斷推出新的版本。5Web瀏覽器1.2

Web技術(shù)相關(guān)概念瀏覽器的內(nèi)核，也就是瀏覽器所采用的渲染引擎。渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的形式。由于不同的瀏覽器內(nèi)核對網(wǎng)頁代碼的解釋會有所不同，因此同一網(wǎng)頁在不同內(nèi)核的瀏覽器中的渲染（顯示）效果也可能不同，這也是Web頁面開發(fā)者需要在不同內(nèi)核的瀏覽器中測試網(wǎng)頁顯示效果的原因。

（1）InternetExplorer（IE）瀏覽器此款瀏覽器是Microsoft（微軟）公司為抵抗當(dāng)時主流的網(wǎng)景瀏覽器而創(chuàng)造的。因其與Windows操作系統(tǒng)進行了捆綁發(fā)行，使得IE瀏覽器的應(yīng)用依舊較為廣泛。IE瀏覽器的內(nèi)核為Trident，俗稱IE內(nèi)核。5Web瀏覽器1.2

Web技術(shù)相關(guān)概念

（2）Opera瀏覽器

Opera桌面瀏覽器是一款來自挪威的極為出色的瀏覽器。Opera具有速度快、節(jié)省系統(tǒng)資源、訂制能力強、安全性高及體積小等特點。Opera瀏覽器的內(nèi)核：最初是自己的Presto內(nèi)核，后來是Webkit，現(xiàn)在是Blink內(nèi)核。

（3）Chrome瀏覽器

Chrome是一款由Google（谷歌）公司開發(fā)的網(wǎng)頁瀏覽器，具有速度快、不容易崩潰，并且更為靈活、更加安全等特點，同時還包含很多各式各樣的插件。Chrome瀏覽器此前使用WebKit內(nèi)核，現(xiàn)在使用Blink內(nèi)核，俗稱Chrome內(nèi)核。5Web瀏覽器1.2

Web技術(shù)相關(guān)概念（4）Firefox（火狐）瀏覽器

此款Mozilla公司旗下的產(chǎn)品，使用的內(nèi)核為Gecko，是開源內(nèi)核，受到了很多的歡迎。

（5）Safari瀏覽器

此款瀏覽器是蘋果公司的產(chǎn)品，使用的是WebKit內(nèi)核。

（6）國產(chǎn)品牌瀏覽器

如360瀏覽器、獵豹瀏覽器、2345瀏覽器，大多采用IE+Chrome雙內(nèi)核模式；又如搜狗瀏覽器、遨游瀏覽器、QQ瀏覽器，大多使Trident（兼容模式）+Webkit（高速模式）兩種內(nèi)核的組合模式；百度瀏覽器的內(nèi)核為IE內(nèi)核。5Web瀏覽器1.2

Web技術(shù)相關(guān)概念Web服務(wù)器主要提供Web瀏覽服務(wù)，服務(wù)器是一種被動程序，只有當(dāng)Internet上運行在其他計算機中的瀏覽器發(fā)出訪問請求時，服務(wù)器才會響應(yīng)。Web服務(wù)器可以解析HTTP協(xié)議，能接受HTTP請求，會返回HTTP響應(yīng)，Web瀏覽器就可以獲取到網(wǎng)頁（HTML），以及CSS、JavaScript、音頻、視頻等各類資源，經(jīng)過瀏覽器的解析、渲染、整合，最終呈現(xiàn)為可被用戶瀏覽的Web頁面。Web服務(wù)訪問請求及響應(yīng)過程如圖所示。6Web服務(wù)器1.3

Web應(yīng)用開發(fā)1.3

Web應(yīng)用開發(fā)

Web應(yīng)用開發(fā)分為Web前端開發(fā)和Web后端開發(fā)。Web前端開發(fā)主要涉及直接與用戶交互的網(wǎng)頁，使用的技術(shù)包括HTML、CSS、JavaScript等。Web后端開發(fā)（即Web應(yīng)用系統(tǒng)的服務(wù)端開發(fā)）主要涉及Web服務(wù)、中間件、數(shù)據(jù)庫等。1.4

Web前端開發(fā)常用工具1.4

Web前端開發(fā)常用工具

“工欲善其事，必先利其器”。單純從編寫代碼角度看，完全可以通過記事本軟件來進行Web前端頁面代碼的編寫，但效率很低。因此，尋找合適的開發(fā)工具來提升工作效率是至關(guān)重要的。下面列舉幾個常見的Web前端開發(fā)工具。1.4

Web前端開發(fā)常用工具

EditPlus是一款小巧但功能強大的可處理文本、HTML和程序語言的Windows編輯器。EditPlus是可以取代記事本的文字編輯器，擁有無限制的撤消與重做、英文拼字檢查、自動換行、列數(shù)標記、搜尋取代、同時編輯多文件、全屏幕瀏覽功能。EditPlus是一個非常好用的HTML編輯器，它除了支持顏色標記、HTML標記外，還內(nèi)建完整的HTML&CSS指令功能，對于習(xí)慣用記事本編輯網(wǎng)頁的開發(fā)者，能起到事半功倍的效果。1

EditPlus1.4

Web前端開發(fā)常用工具

SublimeText是一款輕量級的編輯器，優(yōu)雅小巧、啟動速度快，支持多種編程語言。它是一款跨平臺的編輯器，同時支持Windows、Linux、MacOSX等操作系統(tǒng)。SublimeText還具有良好的擴展能力和完全開放的用戶自定義配置，以及實用的編輯狀態(tài)恢復(fù)功能，它的快捷鍵十分易用，可極大地減少代碼開發(fā)的勞動強度。2

SublimeText1.4

Web前端開發(fā)常用工具

Atom是Github專門為程序員推出的一個跨平臺文本編輯器。它具有簡潔和直觀的圖形用戶界面，支持HTML、CSS、JavaScript等網(wǎng)頁編程語言。Atom支持宏，可以自動完成分屏功能，同時集成了文件管理器。3

Atom1.4

Web前端開發(fā)常用工具

Dreamweaver是世界頂級軟件廠商Adobe推出的一套擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動應(yīng)用程序的網(wǎng)頁設(shè)計軟件。由于它支持代碼、拆分、設(shè)計、實時視圖等多種方式來創(chuàng)作、編寫和修改網(wǎng)頁，對于初級人員，可以無需編寫任何代碼就能快速創(chuàng)建Web頁面。同時，其成熟的代碼編輯工具更適用于Web開發(fā)高級人員的創(chuàng)作。4

Dreamweaver1.4

Web前端開發(fā)常用工具

WebStorm與IntelliJIDEA同源，是JetBrains公司旗下的一款開發(fā)工具，它被眾多開發(fā)者譽為“最強大的HTML5編輯器”。5

WebStorm1.4

Web前端開發(fā)常用工具

VisualStudioCode（簡稱VSCode），它是一款針對于編寫現(xiàn)代Web和云應(yīng)用的跨平臺源代碼編輯器，可運行于Windows、macOS和Linux操作系統(tǒng)。VSCode為開發(fā)者們提供了對多種編程語言的內(nèi)置支持，同時也為這些語言提供豐富的代碼補全和導(dǎo)航功能。6

VisualStudioCode1.4

Web前端開發(fā)常用工具

HBuilder是一款優(yōu)秀的國產(chǎn)Web前端開發(fā)工具。HBuilderX是HBuilder的升級版，它們都是由DCloud（數(shù)字天堂）公司推出的，專門為Web前端開發(fā)者服務(wù)的通用集成開發(fā)環(huán)境（IDE）。在下一小節(jié)，將對其進行更加全面的介紹。7

HBuilder和HBuilderX1.5

HBuilderX的使用1.5

HBuilderX的使用

HBuilderX是一款優(yōu)秀的國產(chǎn)Web前端集成開發(fā)環(huán)境，其主體由Java編寫。它基于Eclipse，所以順其自然地兼容了Eclipse的插件。開發(fā)便捷是HBuilderX的最大優(yōu)勢，通過完整的語法提示，大幅提升HTML、CSS、JavaScript的開發(fā)效率。1.5

HBuilderX的使用可以在其官網(wǎng)（https://www.dcloud.io/hbuilderx.html）下載最新版的HBuilderX。HBuilderX目前支持Windows系統(tǒng)和macOS系統(tǒng)，如圖所示，下載時應(yīng)根據(jù)計算機系統(tǒng)的實際情況選擇適合的版本。在對兩種操作系統(tǒng)支持的基礎(chǔ)上，又分為標準版和App開發(fā)版。完成Web前端頁面開發(fā)，下載標準版即可；如果做App開發(fā)，則建議下載App開發(fā)版，否則需要在插件管理中安裝uni-app插件。1下載HBuilderX1.5

HBuilderX的使用解壓下載到的HBuilderX壓縮包，如圖所示，雙擊HBuilderX.exe運行該軟件。2運行HBuilderX1.5

HBuilderX的使用進入HBuilderX主界面，依次點擊“文件”→“新建”→“項目”(或按下Ctrl+N組合鍵，以觸發(fā)快速新建)，打開新建項目對話框，如圖所示。3使用HBuilderX新建項目1.5

HBuilderX的使用接下來，需要填寫新項目的基本信息。應(yīng)在如圖所示的A處填寫新建項目的名稱；在B處填寫（或選擇）項目保存的路徑（注意：更改此路徑后，HBuilderX會記錄，下次新建項目時，