題主問(wèn)的應(yīng)該是類似企業(yè)官網(wǎng)的網(wǎng)站，而不是Web Application這種系統(tǒng)類網(wǎng)站吧。

接下來(lái)我分類回答。

企業(yè)官網(wǎng)

對(duì)于企業(yè)官網(wǎng)，通常的功能包括企業(yè)介紹，產(chǎn)品/服務(wù)介紹，聯(lián)系信息，成功案例等等。其中企業(yè)為了通過(guò)官網(wǎng)進(jìn)行營(yíng)銷，會(huì)在一定程度上讓官網(wǎng)和企業(yè)的CRM系統(tǒng)進(jìn)行集成以便生成并進(jìn)一步跟進(jìn)潛在客戶信息。

目前業(yè)界使用比較廣泛的工具是WordPress。那么一般情況下在選取合適的模板后，可以進(jìn)入WordPress的后臺(tái)進(jìn)行修改配置等。不需要直接接觸數(shù)據(jù)庫(kù)或者代碼。當(dāng)然有經(jīng)驗(yàn)的朋友能夠?qū)ySql和PHP有了解更好，因?yàn)閃ordPress是基于MySql和PHP的。

WordPress有一個(gè)很好的地方在于，做出來(lái)的網(wǎng)站響應(yīng)式的（responsive）。能夠根據(jù)訪問(wèn)的設(shè)備進(jìn)行顯示。根據(jù)電腦，平板，手機(jī)自動(dòng)調(diào)整顯示。

并且WordPress有超多的模板可供選擇，非常方便。

接下來(lái)上圖，可以看一下WordPress的功能，圖片包括了模板和手機(jī)顯示效果。

應(yīng)用系統(tǒng)類網(wǎng)站 （Application Website）

這類系統(tǒng)說(shuō)是網(wǎng)站，其實(shí)是基于Web的應(yīng)用系統(tǒng)。功能龐大，邏輯復(fù)雜，涵蓋面很廣。目前的SaaS系統(tǒng)多是這一類。

一般前端也比較復(fù)雜，使用復(fù)雜的JavaScript架構(gòu)，早一點(diǎn)的如JQuery，現(xiàn)在更多的使用React, Angular, Vue等。

后端使用Java的比較多，能夠應(yīng)對(duì)復(fù)雜的邏輯。根據(jù)實(shí)際情況，后端也有可能是分布式的。一般來(lái)說(shuō)分為調(diào)度控制層(Controller), 業(yè)務(wù)應(yīng)用層 (Business Application), 數(shù)據(jù)訪問(wèn)層（Persistence)。

調(diào)度控制層(Controller)：進(jìn)行訪問(wèn)的控制，用戶識(shí)別，以及請(qǐng)求的分發(fā)等。業(yè)務(wù)應(yīng)用層 (Business Application)：SaaS應(yīng)用的整個(gè)業(yè)務(wù)邏輯核心層就在這里了，一般覆蓋面廣，邏輯也較為復(fù)雜。數(shù)據(jù)訪問(wèn)持久層（Persistence)：跟數(shù)據(jù)庫(kù)打交道的這一層，通常業(yè)界也有成熟的框架，如Hibernate，Mybatis等。大型應(yīng)用也會(huì)引入緩存機(jī)制來(lái)提高效率，如 Redis等。

希望上述能夠回答題主的問(wèn)題。如有進(jìn)一步問(wèn)題，請(qǐng)留言/私信。

學(xué)HTML5肯定沒(méi)問(wèn)題，但要看學(xué)到什么程度，題主可能是要學(xué)到能找工作，如果沒(méi)有一點(diǎn)基礎(chǔ)那是需要花相當(dāng)大的精力。 具體學(xué)習(xí)方法在我之前的回答里也介紹過(guò)多次，主要就是：

找一個(gè)系列視頻認(rèn)真跟學(xué)

找一本評(píng)分比較高的入門書(shū)籍

找一本評(píng)分比較高的實(shí)戰(zhàn)書(shū)籍

入門后熟練學(xué)習(xí)掌握幾個(gè)前端框架

如果非計(jì)算機(jī)專業(yè)，那建議再抽點(diǎn)時(shí)間學(xué)習(xí)一點(diǎn)HTML4基礎(chǔ)知識(shí)、JS入門知識(shí)，然后再學(xué)習(xí)HTML5。w3school是一個(gè)比較好的入門網(wǎng)站，可以多逛逛。

做前端設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)的，素材永遠(yuǎn)很重要。因?yàn)樗夭牡拿烙^程度往往直接決定了網(wǎng)頁(yè)頁(yè)面的風(fēng)格、整潔度、色調(diào)等等。

我大學(xué)時(shí)候，在一家非常小型的創(chuàng)業(yè)公司實(shí)習(xí)。公司人員只有幾個(gè)，所以在那時(shí)我基本上算是獨(dú)立開(kāi)發(fā)了一個(gè)旅游酒店訂購(gòu)平臺(tái)，前端設(shè)計(jì)、后端開(kāi)發(fā)、公眾號(hào)開(kāi)發(fā)等等都涉及，那段時(shí)間基本是我最全能的時(shí)候了。

所以當(dāng)時(shí)我也收集了許多的前端素材，在這里一并分享給大家。

一、圖標(biāo)類

每一個(gè)Web開(kāi)發(fā)者，尤其是前端開(kāi)發(fā)人員一定都會(huì)需要icon圖標(biāo)來(lái)為項(xiàng)目增色。

Font Awesome Icons

Font Awesome提供可縮放的矢量圖標(biāo)，可以使用CSS所提供的所有特性對(duì)它們進(jìn)行更改，包括：大小、顏色、陰影或者其它任何支持的效果。

Icon Monster

特點(diǎn)：免費(fèi)，高質(zhì)量,。非常簡(jiǎn)潔的icon圖標(biāo)庫(kù)。

IconFinder

這是一個(gè)比較有設(shè)計(jì)感的Icon圖庫(kù)，并且已經(jīng)打包分類好，缺點(diǎn)是只有部分是免費(fèi)的。個(gè)人覺(jué)得里面免費(fèi)的圖庫(kù)也已經(jīng)夠用了。

附上圣誕特輯！

Iconfont-Alibaba

阿里巴巴UX部門推出的矢量圖標(biāo)管理網(wǎng)站，也是國(guó)內(nèi)首家推廣Webfont形式圖標(biāo)的平臺(tái)。這個(gè)相信大家都用過(guò)！

二、圖片素材

無(wú)版權(quán)限制的圖片素材

PEXELS

Pexels可以說(shuō)是圖片素材界的超級(jí)網(wǎng)紅了，說(shuō)到圖片肯定哪里都有它，我自己都推薦好幾次了。可以免費(fèi)下載各種各樣的分辨率，包括原圖尺寸。

網(wǎng)址：(https://www.pexels.com/)

例如搜索：圣誕節(jié)（Christamas）

PNGimg

這個(gè)主要用作素材，是不同種類的無(wú)背景素材圖片！直接可以免費(fèi)用。注意它是全部都是無(wú)背景圖片，非常適合那些需要PNG透明底配圖的。

(http://pngimg.com/)

例如搜索：Birds

KaboomPics

KaboomPics是以生活化免費(fèi)高質(zhì)量圖片素材為主的圖片素材庫(kù)。里面的圖片都是攝影愛(ài)好者攝影后通過(guò)審核上傳的。并且可以應(yīng)用于任何項(xiàng)目，沒(méi)有版權(quán)限制。

自媒體可以從中找封面圖，攝影愛(ài)好者也可以從中欣賞或著學(xué)習(xí)。

Unsplash

（https://unsplash.com/）

先這樣~希望這些資源對(duì)你有幫助，下次還會(huì)更新一些web開(kāi)發(fā)的常用工具。

如果有幫助，歡迎關(guān)注我以示支持，也以防錯(cuò)過(guò)下一波干貨！~