在HTML入門教程學習之前，我們有必要跟大家講一下網站開發的一些知識。了解這些知識，對你以後網站開發之路如何走、該學習些什麽，是非常有

用的。同時也避免你走太多的彎路。

一、從網頁制作到前端開發

1、web1.0時代的網頁制作

網頁制作是web1.0時代的產物，那個時候的網頁主要是靜態網頁，所謂的靜態網頁就是沒有與用戶進行交互而僅僅供讀者瀏覽的網頁，例如一篇QQ日

誌、一篇博文等展示性文章。在web 1.0時代，用戶能做的唯一一件事就是瀏覽這個網站的文字圖片內容，這時用戶也不能像現在在大多數網站都可

以評論交流（缺乏交互性）。現在大多數人都聽過“網頁三劍客Dreamweaver+Fireworks+Flash”吧，這個組合就是web 1.0時代的產物。

?：網頁三劍客指的是“Dreamweaver、Fireworks和Flash”。

2、web2.0時代的前端開發

“前端開發”是從“網頁制作”演變而來的。

從2005年開始，互聯網進入web 2.0時代，由單一的文字和圖片組成的靜態網頁已經不能滿足用戶的需求，用戶需要更好的體驗。在web 2.0時代，網

頁有靜態網頁和動態網頁。所謂動態網頁，就是用戶不僅僅可以瀏覽網頁，還可以與服務器進行交互。舉個例子，你登陸新浪微博，要輸入賬號密

碼，這個時候就需要服務器對你的賬號和密碼進行驗證通過才行。web2.0時代的網頁不僅包含炫麗的動畫、音頻和視頻，還可以讓用戶在網頁中進行

評論交流、上傳和下載文件等（交互性）。這個時代的網頁，如果是用“網頁三劍客Dreamweaver+Fireworks+Flash”制作的，那是遠遠不能滿足需

求。現在網站開發無論是開發難度，還是開發方式上，都更接近傳統的網站後臺開發，所以現在不再叫“網頁制作”，而是叫“web前端開發”。

所以，處於web2.0時代的你，如果要學習網站開發技術，就不要再相信所謂的“網頁三劍客Dreamweaver+Fireworks+Flash”，因為這個組合已經是

上個互聯網時代的產物。而且這個組合開發出來的網站問題也非常多，例如代碼冗余、網站維護困難（學習到後期，你會知道為什麽不用這個組合

了）。

二、前端技術

1、前端開發最核心技術

我們知道，用所謂的網頁三劍客已經不能滿足需求了，那前端開發究竟要學習什麽技術呢？網頁最主要由3部分組成：結構、表現和行為。網頁現在新

的標準是W3C，目前模式是HTML、CSS和JavaScript。

前端開發最核心的3個技術

（1）HTML是什麽？

HTML，全稱“Hyper Text Markup Language（超文本標記語言）”，簡單來說，網頁就是用HTML語言制作的。HTML是一門描述性語言，是一門非常

容易入門的語言。

（2）CSS

CSS，全稱“（層疊樣式表）”。以後我們在別的地方看到“層疊樣式表”、“CSS樣式”，指的就是CSS。

（3）JavaScript

JavaScript是一門腳本語言。

（4）HTML、CSS和JavaScript的區別

我們都知道前端技術最核心的是HTML、CSS和JavaScript這三種。但是這三者究竟是幹嘛的呢？

“HTML是網頁的結構，CSS是網頁的外觀，而JavaScript是頁面的行為。”

我暈，這不是等於沒說嗎？好吧，我給大家打個比喻。我們把前端開發的過程比喻成“建房子”，做一個網頁就像蓋一棟房子，先把房子結構建好

（HTML）。建好房子之後給房子裝修（CSS），例如往窗戶安上窗簾、往地板鋪上漂亮的瓷磚。最後呢，裝修完了之後，當夜幕降臨的時候，我們要

開燈（JavaScript），這樣才能看得見裏面。現在大概懂了吧。

我們回到實際例子中去，看一下綠葉學習網的導航條。我們先分析一下“前端技術”這一欄目的具有以下基本特點：

① 導航條文字顏色是白色；

② 大小是14px

③ 背景顏色是綠色；

④ 鼠標移動到上面顏色會變成深綠色；

這些效果是怎麽做出來的呢？其實思路就跟上面“建房子一樣”。我們先用HTML搭建網頁結構，這時候默認情況下，字體、字體顏色、字體大小和背

景顏色如下圖：

僅僅使用HTML的文字

然後我們通過CSS修飾一下，改變其字體、字體大小、字體顏色和背景顏色，得到如下的效果圖：

在HTML基礎上加入CSS的文字

最後，我們通過JavaScript定義鼠標一個行為，就是鼠標移動到上面的時候，背景顏色會變為深綠色，效果如下：

加入JavaScript特效

現在大家都知道一個繽紛多彩的網頁究竟是怎樣做出來，也知道為什麽“前端技術最核心的是HTML、CSS和JavaScript”了吧？

2、前端開發其他技術

前端技術最核心的是HTML、CSS和JavaScript，但是對於一個真正的前端工程師來說，哪怕你精通這三個，你也不能稱為一個真正的“前端工程

師”。因為前端技術除了HTML、CSS和JavaScript這三種，還需要學習Ajax、SEO等。

（1）Ajax

Ajax，即“Asynchronous Javascript And XML（異步JavaScript和XML）”，是指一種創建交互式網頁應用的網頁開發技術。

通過在後臺與服務器進行少量數據交換，Ajax可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新

。傳統的網頁（不使用Ajax）如果需要更新內容，必須重載整個頁面。

Ajax是前後端交互的技術，主要實現在前端。（不懂？！沒關系，我們在Ajax教程中會講解到）

（2）SEO

SEO，即“Search Engine Optimization（搜索引擎優化）”。SEO優化是專門利用搜索引擎的搜索規則來提高目前網站在有關搜索引擎內的自然排

名的方式（國內常見的搜索引擎有百度、360、搜狗等）。

簡單來說，你建好了網站並不代表你網站就能被搜索引擎搜索到，我們一般使用百度搜索資料時，搜索出來的網頁有很多，但是我們一般看了搜索結

果的第一、二頁就不再往下看了。SEO，就是為了我們的網站能排在搜索結果的前面，這樣你的網站才會有流量。你做網站，相信你也是想讓你網站

有更多人瀏覽的吧。

三、後端技術

如果我們只學習完前端技術，其實也差不多可以開發屬於自己的網站了。不過這個時候開發出來的網站是一個靜態的網站，唯一的功能是供用戶瀏

覽，缺乏與用戶的交互性，用戶能做的東西不多。因此，如果我們要開發一個用戶體驗更好、功能更加強大的網站，就要學習一下後端技術。

那後端技術究竟是怎樣的一門技術呢？舉個簡單的例子，很多大型網站都有註冊功能，只有用戶註冊了之後才具有某種權限，例如你要使用QQ空間，

你就要註冊一個QQ才能使用。這樣的功能就是後端技術所實現的。再有，淘寶網不是有很多商家嗎？這些商家有各種各樣的商品，這些龐大的數據只

能使用後端技術中的數據庫技術才能實現。

1、PHP

PHP是一種通用開源腳本語言。語法吸收了C語言、Java和Perl的特點，易於學習，使用廣泛，主要適用於Web開發領域。

2、JSP

JSP技術有點類似ASP技術，它是在傳統的網頁HTML文件中插入Java程序段（Scriptlet）和JSP標記（tag），從而形成JSP文件。用JSP開發的web應

用是跨平臺的，既可以Windows系統下運行，也能在其他操作系統（如Linux）上運行。

3、ASP.NET

ASP.NET的前身就是我們常說的ASP技術。綠葉學習網就是使用ASP.NET開發的。ASP.NET是本系列課程推薦使用的一門技術。當然大家可以自己選

擇。

以上三種都是動態網頁技術，大家可以到這裏詳細了解一下：百度百科動態網頁技術

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

四、從前端開發到後端開發的學習路線

1、常見的Web技術

常用Web技術

2、學習路線

從上面我們可以看出，Web技術實在太多了，很多同學都不知道怎麽入手，上網問別人，回答又五花八門。這是本網站推薦的：

HTML入門→CSS入門→HTML進階→CSS進階→JavaScript入門→jQuery入門→ASP.NET入門（或PHP入門）→Ajax→ASP.NET進階（或PHP進階）

這一條路線是比較理想的一條從前端開發到後端開發的學習路線，其實你別看這條路線那麽長，其實我是截斷了來定制的，要掌握的也就幾門技術：

HTML、CSS、JavaScript、ASP.NET（PHP）、Ajax等。

我們在HTML剛剛入門的時候，你不需要一定要把HTML學到精通才去學CSS入門教程（這也不可能），這是一種最笨又最浪費時間的學習模式。所以對

於初學者，千萬千萬別想著精通了一門技術，再去精通另外一門技術。你要是能做到了，我相信肯定很多大神都拜你為師了。因為技術這種東西是

要“通十行”才會把一行給通了。

如果你走別的路線，你可能將會走很多很多的彎路。這條路線是本人從前端技術初學者開始，到開發了綠葉學習網、廣州智能工程研究會網站、畢業

選題系統、大量在線工具等項目以及閱讀大量技術書籍之後的的心血總結。當然，這條路線也是一個建議，並非強硬。

接下來，就是我們踏入前端開發的第一步——HTML入門教程。

?疑問

1、什麽叫XHTML+CSS+JavaScript？

我們看到市面上很多書名都叫“DIV+CSS”或“HTML+CSS”，其實這兩個叫法都是不嚴謹的，準確來說是“XHTML+CSS”。但是叫的人多了，大家也

知道是那個意思，所以約定俗成就幹脆稱為“DIV+CSS”或“HTML+CSS”。所以以後，我們看到“DIV+CSS”或“HTML+CSS”，心裏也應該知道指的

是“XHTML+CSS”。然而什麽叫XHTML，我們在後面的章節會說到，讀者不用手忙腳亂地。

2、常見的JavaScript框架應該學習哪個？

我們知道，HTML、CSS和JavaScript是前端技術中最基本的3個元素。對於HTML和CSS，他們沒有別的框架，但是對於“JavaScript”來說，它卻有很

多框架，例如：

“jQuery、ExtJS、Dojo、YUI……”

那對於初學者來說，應該選擇哪個JavaScript框架比較好呢。當然非jQuery莫屬了。jQuery是全球最流行的JavaScript框架，是最簡單易懂、最適

合初學者入門的JavaScript框架，沒有之一。

?總結

1、從web1.0到web2.0，網頁制作已經變為前端開發了。現在對於前端開發，你要學的不是什麽“網頁三劍客”，而是“HTML+CSS+JavaScript”；

2、前端技術核心元素的是HTML、CSS和JavaScript，但是我們還要學習一些Ajax、SEO知識；

3、前端技術只能開發靜態網頁，而進一步學習了後端技術，你能開發一個用戶交互性更好、功能更加強大的網站；

4、後端技術有ASP.NET（或PHP）、SQL Server等；

5、學習路線：HTML入門→CSS入門→HTML進階→CSS進階→JavaScript入門→jQuery入門→ASP.NET入門（或PHP入門）→Ajax→ASP.NET進階（或

PHP進階）；