1.基礎(chǔ)技術(shù)

前端基礎(chǔ)技術(shù)有HTML、CSS和JavaScript。HTML（Hypertext Markup Language,超文本標(biāo)記語(yǔ)言）一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。CSS（Cascading Style Sheets，層疊樣式表）是一種用來(lái)表現(xiàn)HTML文件樣式的計(jì)算機(jī)語(yǔ)言，如字體、大小、顏色、背景圖、邊框等。JavaScript用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。簡(jiǎn)單地說(shuō)，如果將網(wǎng)頁(yè)比喻為人，僅使用HTML標(biāo)簽相當(dāng)于素顏照，使用CSS相當(dāng)于美顏，使用JavaScript相當(dāng)于做魔術(shù)表演。

事實(shí)上，如果你有Web瀏覽器和文本編輯器，那么你就可以做網(wǎng)頁(yè)的編程了。下面我們來(lái)看下HTML+CSS+JS的廬山真面目，如圖所示，HTML是由、、 、 、 等標(biāo)簽組成。

而查看HTML源代碼，我們大致上可以得到如下標(biāo)簽層次，我們可以將每個(gè)標(biāo)簽看成對(duì)象，如下圖所示：

你發(fā)現(xiàn)了嗎？我們一直在提的一個(gè)詞是“對(duì)象”。那么如何來(lái)理解對(duì)象呢， 我們可以把一個(gè)人看成對(duì)象，這個(gè)人具有身高、性別、年齡等屬性，也有吃飯、睡覺(jué)、旅游等行為。同樣地，在前端的世界里，將瀏覽器、文檔都看作一個(gè)對(duì)象，對(duì)頁(yè)面的操作就可以通過(guò)屬性或方法來(lái)調(diào)用，如屬性的調(diào)用object.attribute,方法的調(diào)用object.method(arguments)。

在JavaScript中，把瀏覽器看成一個(gè)對(duì)象，抽象為BOM（Browser Object Model,瀏覽器對(duì)象模型）。

同樣地，我們把文檔看成一個(gè)對(duì)象，抽象為DOM（Document Object Model,文檔對(duì)象模型）。

BOM和DOM是JavaScript的核心，同時(shí),JavaScript需要遵循規(guī)范與標(biāo)準(zhǔn)ECMAScript。

總的來(lái)說(shuō)，JavaScript=ECMAScript + DOM + BOM，其中ECMAScript約定語(yǔ)法和基本對(duì)象，DOM提供與網(wǎng)頁(yè)交互的方法和接口，如動(dòng)態(tài)顯示時(shí)間；而B(niǎo)OM提供與瀏覽器交互的方法和接口，如跳轉(zhuǎn)到一個(gè)頁(yè)面、前進(jìn)、后退等。

2.基本原理

Web頁(yè)面的展示通過(guò)瀏覽器來(lái)完成，而瀏覽器的職責(zé)是根據(jù)用戶(hù)輸入的URL地址信息向服務(wù)器發(fā)出請(qǐng)求，得到服務(wù)器的響應(yīng)后在其窗口展示。具體到瀏覽器解釋并顯示 HTML 文件的標(biāo)準(zhǔn)規(guī)范分別定義在由W3C維護(hù)的 HTML 和 CSS 規(guī)范中。

瀏覽器從網(wǎng)絡(luò)層獲取數(shù)據(jù)包，并將其轉(zhuǎn)化為HTTP響應(yīng)內(nèi)容，并根據(jù)狀態(tài)碼進(jìn)行解析和頁(yè)面展示，其大致流程如下：