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

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

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

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

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

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

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

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

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

2.基本原理

Web頁面的展示通過瀏覽器來完成，而瀏覽器的職責(zé)是根據(jù)用戶輸入的URL地址信息向服務(wù)器發(fā)出請求，得到服務(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)行解析和頁面展示，其大致流程如下：