如果你對網(wǎng)頁設(shè)計及開發(fā)感興趣，但是對標題里出現(xiàn)的第一個名詞就摸不著頭腦，先不要方。本文對小白友好，零基礎(chǔ)可讀，保證你讀完能了解網(wǎng)頁開發(fā)的基本思路和流程，明白網(wǎng)頁設(shè)計稿是怎樣被開發(fā)實現(xiàn)的。
一、什么是前端
首先，所謂的前端是指什么呢？前端（front-end）是相對后端（back-end）而言的，是描述進程開始和結(jié)束的通用詞匯。在計算機程序中，前端作用于采集輸入信息，后端進行處理。
而我們通常所說的「前端」，一般是指web前端，可以理解為網(wǎng)頁的界面樣式和視覺呈現(xiàn)。所以，前端設(shè)計一般視作網(wǎng)站的視覺設(shè)計，前端開發(fā)則是視覺設(shè)計的代碼實現(xiàn)。
二、前端開發(fā)語言
HTML、CSS和JavaScript是前端開發(fā)中三種最基礎(chǔ)的代碼語言。看到代碼你先別急著關(guān)網(wǎng)頁，先來欣賞下使用不同程序語言的程序員之間的鄙視鏈（笑）。
匯編 >C >C++ >Python >Java 及 C# 及 PHP（這三者相互撕） >VB >那些堅持把HTML稱為程序語言的人
所以你大概明白了，對于完全零基礎(chǔ)的人來說，前端開發(fā)所用的語言（除了JavaScript），是相對比較容易學(xué)習(xí)和上手的。
2.1HTML/CSS/JavaScipt
你可以把網(wǎng)頁想象成一間房子。HTML決定了網(wǎng)頁的框架結(jié)構(gòu)——有幾間房間、作什么用途、里面擺放什么東西，CSS決定了網(wǎng)頁的樣式——房間是如何裝潢的（如墻壁是什么顏色的），JavaScript則決定了網(wǎng)頁上的用戶交互和數(shù)據(jù)處理——用遙控器遙控電視。
下面簡單介紹一下HTML和CSS語言的用處和用法，如果想繼續(xù)學(xué)習(xí)，可以參考翁愷老師的兩門公開課程——HTML5入門和CSS3。
2.2HTML
HTML是一種網(wǎng)頁標記語言。它主要是利用標簽來告訴瀏覽器，標簽之間的東西是什么——是標題、段落、圖片還是鏈接等。瀏覽器則會根據(jù)HTML標簽，相應(yīng)地作出顯示。下面舉幾個栗子：
<h1>這是1級標題</h1>
<p>這是段落</p>
<a href=“這是鏈接地址”>這是鏈接的文字</a>
<img src=“這是圖片的路徑或鏈接地址”/>
2.3CSS
CSS中文名叫做「層疊樣式表」，從名字里就可以看出，它是一種聲明樣式的文檔。我們可以通過鏈接外部css文檔，或者將樣式寫在HTML文檔的<head></head>標簽中，抑或在HTML標簽中內(nèi)嵌屬性style=""來實現(xiàn)對樣式的定義。舉個例子，我們要讓<p>這個段落</p>的背景變成灰色，就可以用以下三種方法實現(xiàn)：
/*方法一：直接用style屬性*/
<p style=“background-color:grey;”>這是段落</p>
/*方法二：在HTML文檔的<head>標簽中聲明（會應(yīng)用于頁面中所有的<p></p>段落）*/
<head>
<style>
p{
background-color:grey;
}
</style>
</head>
/*方法三：通過外鏈實現(xiàn)*/
//另建一個css文檔，在其中寫上方法二中<style>標簽間的內(nèi)容，再在HTML文檔中作如下聲明
<head>
<link href=“css文檔的路徑” rel=“stylesheet" type=“text/css” />
</head>
三、網(wǎng)頁上的框
代碼語言只是前端開發(fā)實現(xiàn)的基礎(chǔ)工具，要還原一個網(wǎng)頁視覺稿，你還需要掌握以下的方法，并且記住——網(wǎng)頁上的所有東西都盛放在框中。
3.1Chrome開發(fā)者工具
Chrome開發(fā)者工具是對前端開發(fā)最有用的神器，對，沒有之一。它不僅可以讓你看到網(wǎng)頁的源碼，每個元素的樣式、構(gòu)成，還能讓你編輯源碼并且實時查看頁面效果。
你可以在Chrome的菜單欄中，點擊更多工具>開發(fā)者工具打開開發(fā)者工具，也可以在網(wǎng)頁任意位置右擊，點擊檢查打開。打開后，可以同時看到網(wǎng)頁頁面和開發(fā)者工具窗口。其中開發(fā)者工具左半邊是HTML的源碼，里面有各種各樣的元素，右邊顯示的是你在左半邊選擇的元素的樣式。
點擊開發(fā)者工具左半邊窗口中的各種標簽，你可以看到頁面上你所選擇的元素周圍出現(xiàn)了一個亮色的框（如上圖所示）。這就是所謂的「任何一個頁面元素都盛放在框中」。
3.2如何框化視覺稿
知道了網(wǎng)頁元素都盛放在框中對于前端開發(fā)有啥用呢？用處可大了去了?，F(xiàn)在，假設(shè)你是一個前端開發(fā)工程師，設(shè)計師給了你如下的設(shè)計稿，你該做的第一步是什么呢？
那就是把設(shè)計稿上你能看到的所有元素都放進框中，不光是那些天然已經(jīng)是框狀的圖片，還有那些不呈現(xiàn)為方框狀的文字等。實際上，一個HTML的標簽（例如<p>123</p>）就是一個框。
還要注意的是，框是可以嵌套的。所以，要框化這個視覺稿，你首先應(yīng)該找出一個包括整個頁面的最大的框，然后再找出將頁面明顯分成幾塊的次大框，再找更小的框，一直找下去，直到無法再分下去。
3.3框化后的代碼實現(xiàn)
等你把所有元素都框化以后，就可以著手開始寫代碼還原設(shè)計稿了。順序是從最外面的框?qū)懫?，不斷往里面寫。這里面有的框是并列關(guān)系，比如：
<p>我是段落一，也是框一，我和二是并列噠</p>
<p>我是段落二，也是框二，我和一是并列噠</p>
也可能是包含關(guān)系：
<div>
<p>我是段落方框，我被外面的div層的框所包圍</p>
</div>
四、前端開發(fā)的流程
有了工具和方法，那網(wǎng)頁設(shè)計稿的實現(xiàn)具體是怎樣操作的呢？步驟可以概括如下：
- 從設(shè)計師那里（或者自己設(shè)計好）拿到網(wǎng)頁的設(shè)計稿
- 分析設(shè)計稿，找到那些現(xiàn)成的框
- 找出那些樣式重復(fù)的元素（或框）——如1級標題、2級標題、段落等
- 寫HTML代碼，把內(nèi)容盛放進框中
- 寫CSS代碼，定義元素（或框）的樣式（從大的樣式特征——如框的寬度，到小的——如字體字重）
- 保存代碼，在瀏覽器中打開，檢查和設(shè)計稿的差距，調(diào)整代碼
- 重復(fù)4-6步直到還原設(shè)計稿
