如果你對網(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ā)有啥用呢？用處可大了去了∷盅蓿現(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è)計稿
