前端-頁(yè)面設(shè)計(jì)。此處指需要設(shè)計(jì)頁(yè)面樣式，即從用戶(hù)角度看到了哪些元素，哪些元素是裝飾，哪些元素可以交互，每個(gè)元素占用頁(yè)面的比例是多少等等。這與接下來(lái)的前端代碼設(shè)計(jì)也是息息相關(guān)。比如你要做一個(gè)游戲界面（當(dāng)

前端-頁(yè)面設(shè)計(jì)。此處指需要設(shè)計(jì)頁(yè)面樣式，即從用戶(hù)角度看到了哪些元素，哪些元素是裝飾，哪些元素可以交互，每個(gè)元素占用頁(yè)面的比例是多少等等。這與接下來(lái)的前端代碼設(shè)計(jì)也是息息相關(guān)。比如你要做一個(gè)游戲界面（當(dāng)然自己做網(wǎng)站不會(huì)這么復(fù)雜，不用擔(dān)心），那么下面這個(gè)界面的每一個(gè)元素，不僅要畫(huà)出原型圖，在不同分辨率的顯示器下各元素的比例變化，都需要專(zhuān)業(yè)的設(shè)計(jì)來(lái)確認(rèn)的。

前端-代碼開(kāi)發(fā)。前端開(kāi)發(fā)人員的三駕馬車(chē)是JavaScript，HTML和CSS。我們以普通的百度首頁(yè)為例，打開(kāi)百度網(wǎng)址后，按F12，就可以看到當(dāng)前網(wǎng)頁(yè)的HTML和CSS信息。其中，HTML是負(fù)責(zé)頁(yè)面的骨架，即比如百度的logo要在中間位置，下面是一個(gè)輸入框，右邊是一個(gè)帶有“百度一下“文字的點(diǎn)擊框等等，當(dāng)前頁(yè)面的html代碼在下圖右上的紅框中。CSS是負(fù)責(zé)骨架后細(xì)節(jié)，比如這個(gè)logo在不同的分辨率屏幕上，要展示出不同的尺寸，百度一下文字是藍(lán)底白字等等，這些都是由下圖右下角的紅框部分控制。今后，如果對(duì)某個(gè)頁(yè)面的布局感興趣，就可以通過(guò)這種方式（F12）來(lái)學(xué)習(xí)人家的設(shè)計(jì)以及實(shí)現(xiàn)思想。接下來(lái)是JavaScript，它是負(fù)責(zé)捕捉前端操作，并且與后端代碼進(jìn)行數(shù)據(jù)交換的腳本語(yǔ)言。當(dāng)你在輸入框輸入“長(zhǎng)城”，并點(diǎn)擊“百度一下”之后，與“百度一下”按鈕綁定的點(diǎn)擊事件就被觸發(fā)，然后會(huì)收集輸入框的文字?jǐn)?shù)據(jù)，傳送給后端，拿回response之后，渲染到前端，于是變成了你看到的搜索結(jié)果。

后端開(kāi)發(fā)。后端開(kāi)發(fā)是沒(méi)有界面的，但是不要以為就更加簡(jiǎn)單。后端語(yǔ)言的選擇非常多，有Python，PHP，Java，go等等，雖然我是Java開(kāi)發(fā)工程師，但是對(duì)于初學(xué)者，我的建議是選擇thinkPHP框架，因?yàn)樽鳛橹袊?guó)人編寫(xiě)的框架，它不僅是使用“最優(yōu)秀的語(yǔ)言PHP”，而且有非常多的中文資料文檔，非常適合新手快速上手，搭建網(wǎng)站。

當(dāng)然后面如果有興趣，也可以進(jìn)一步了解SSM框架，springboot等框架。