在學習HTML之前，我們先來給小夥伴們講一下網站開發的基礎知識。瞭解這些，對於你的網站開發學習之路是非常重要的。這不但能讓你避免走太多的彎路，也能讓你知道該學什麼、以及該如何學。

一、從“網頁製作”到“前端開發”

1. Web 1.0時代的“網頁製作”

網頁製作是Web 1.0時代（即2005年之前）的產物，那個時候的網頁主要是靜態頁面。所謂的靜態頁面，指的是僅僅供使用者瀏覽而無法跟伺服器進行資料互動的頁面。例如，一篇博文，就是一個展示性的靜態網頁。

在Web 1.0時代，使用者能夠做的唯一一件事就是瀏覽這個網頁的文字和圖片。使用者只能瀏覽網頁，卻不能在網頁上釋出評論和交流（跟伺服器進行資料互動）。當今我們司空見慣的釋出評論功能，在很多年前的Web 1.0時代的網站中，是極其少見的。

估計很多小夥伴都聽過“網頁三劍客”吧？其實，這個組合就是Web 1.0時代的網站開發工具。

網頁三劍客，指的是“Dreamweaver、Fireworks、Flash”這三款軟體。

2．Web 2.0時代的“前端開發”

現在常說的“前端開發”是從“網頁製作”演變而來的。隨著網際網路於10多年前進入了Web 2.0時代，僅僅由文字和圖片組成的靜態頁面已經遠遠滿足不了使用者的需求了。在Web 2.0時代，網頁分為兩種：一種是“靜態頁面”；另外一種是“動態頁面”。

靜態頁面僅僅供使用者瀏覽，卻不具備與伺服器互動的功能。而動態頁面不僅可以供使用者瀏覽，還可以與伺服器進行互動。換句話來說，動態頁面是在靜態頁面的基礎上增加了與伺服器互動的功能。舉個簡單的例子，如果你想登入QQ郵箱，就得輸入賬號密碼，然後點選“登入”按鈕後，伺服器會對你的賬號和密碼進行驗證，成功後才可以登入。

在Web2.0時代，如果僅僅是使用“網頁三劍客”來開發的話，那是遠遠不能滿足大量資料互動開發需求的。現在我們所說的“頁面開發”，無論是從開發難度，還是開發方式上，都更接近傳統的網站後臺開發。因此，我們不再叫“網頁製作”，而是叫“前端開發”。對於處於Web2.0時代的你，如果要學習網站開發技術，就不要再相信所謂的“網頁三劍客”了，因為這個組合已經是上一個網際網路時代的產物了。此外，這個組合開發出來的網站問題也非常多，例如程式碼冗餘、可讀性差、維護困難等。等學到後面，小夥伴們就會知道為什麼不用這個組合了。

二、從“前端開發”到“後端開發”

1．前端開發

既然所謂的“網頁三劍客”已經滿足不了現在的前端開發需求了，那麼我們現在究竟要學習哪些技術呢？

對於前端開發來說，最核心的3個技術分別是：HTML、CSS和JavaScript，也叫“新三劍客”。

HTML，全稱Hyper Text Markup Language（超文字標記語言）。HTML是一門描述性語言。

CSS，即Cascading Style Sheet（層疊樣式表），是用來控制網頁外觀的一種技術。

JavaScript是什麼？JavaScript，就是我們通常所說的JS，是一種嵌入到 HTML頁面中的指令碼語言，由瀏覽器一邊解釋一邊執行。

現在，我們都知道前端最核心的3個技術是HTML、CSS和JavaScript。不過，有些初學的小夥伴就會問了，它們三者有什麼區別呢？

HTML用於控制網頁的結構，CSS用於控制網頁的外觀，而JavaScript控制著網頁的行為。

這不是等於沒說嗎？好吧，給大家打個比方。製作網頁就好像是蓋房子。蓋房子的時候，我們都是先把結構建好（HTML）。之後，再給房子裝修（CSS），例如給窗戶裝上窗簾、在地板上鋪瓷磚。裝修好之後，當夜幕降臨之時，我們要開燈（JavaScript）才能把屋子照亮。現在大家都懂了吧？

我們再回到實際例子中去，看一下綠葉學習網的導航欄。“前端入門”這一欄目具有以下基本特點。

小夥伴們可能會疑惑：這些效果是怎麼做出來的呢？其實思路跟 “蓋房子”是一樣的。我們先用HTML來搭建網頁的結構，此時預設情況下，字型型別、字型大小、背景顏色如下圖所示。

然後，我們使用CSS來修飾一下字型型別、字型大小和背景顏色，如下圖所示。

最後，再使用JavaScript來定義滑鼠的行為，當滑鼠移到上面時，背景顏色會變成藍色，最終效果如下圖所示。

到這裡，大家就應該都知道一個繽紛絢麗的網頁是怎麼做出來的了吧？理解這個過程，對於後續學習是非常重要的。

對於前端開發來說，即使你精通HTML、CSS和JavaScript，也稱不上一位真正的前端工程師。除了上述3種技術之外，我們還得學習一些其他技術，例如jQuery、Vue.js、SEO、效能優化等。建議小夥伴們把HTML、CSS和JavaScript學好之後，再慢慢去接觸這些技術。

2．後端開發

當你掌握了前端技術，差不多就可以開發一個屬於自己的網站了。不過這個時候做出來的是一個靜態網站，它的唯一功能是供使用者瀏覽，而不能與伺服器進行互動。在靜態網站中，使用者能做的事情是非常少的。因此，如果想開發一個使用者體驗更好、功能更強大的網站，我們就必須學習一些後端技術。

那後端技術又是怎樣的一門技術呢？舉個簡單例子，很多網站都有註冊功能，只有使用者註冊之後，才具有某些許可權。如果你要使用QQ空間，就得註冊一個QQ才能使用。這個註冊以及登入功能就是用後端技術做的。再有，你在淘寶上可以輕鬆方便地購物，這些功能只能依靠後端技術處理才能實現。下面就給大家介紹幾種常見的後端技術。

PHP，是世界上最通用的開源指令碼語言（之一），其語法吸收了C、Java和Perl語言的特點，易於學習，使用廣泛，適用於Web開發領域。

JSP，有點類似ASP技術，它是在傳統的網頁HTML檔案中插入Java程式段（Scriptlet）和JSP標記（tag），從而形成JSP檔案。用JSP開發的Web應用是跨平臺的，既可以在Windows系統下執行，也能在其他作業系統（如Linux）上執行。

ASP.NET，其前身就是我們常說的ASP技術，像綠葉學習網上一版本就是使用ASP.NET開發的。

此外，很多人認為“網站就是很多網頁的集合”，其實這個理解是不太恰當的。準確來說，網站是前端與後端的結合。

三、學習路線

Web開發相關的技術實在是太多了，很多小夥伴完全不知道怎麼入手。就算上網問別人，回答也是五花八門，令人困惑。下面是我們推薦的學習路線。

HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js

這是一條比較理想的前端開發學習路線。除了掌握這些技術，後期我們還需要學習更多輔助性的技能，包括SCSS、Typescript、UI框架等。學完，並且能夠熟練使用之後，你才算是一位真正意義上的前端工程師。針對這條路線，我們為小夥伴們打造了整個系列的教程。

在HTML剛入門的時候，你不一定要把HTML學到精通了再去學CSS（這也不可能），這是一種最笨也是最浪費時間的學習模式。對於初學者來說，千萬別想著精通了一門技術，再去精通另一門技術。在Web領域，不少技術之間都有著交叉關係，只有“通”十行才可能做到“精”一行。

如果你走別的路線，可能會走很多彎路。這條路線是我從初學前端，到開發了各種型別網站以及寫了10多個線上技術教程和多本書籍的心血總結。當然，這條路線是一個建議，並非具有強制性。

接下來，就讓我們邁入前端開發學習的第一步——HTML入門。

https://www.bilibili.com/video/BV1T34y147Vg?spm_id_from=333.337.search-card.all.click