不管什麼型別的頁面 都包含html css js 看你應該是接觸時間不長 我的建議是從靜態頁面開始練習 先用css寫著頁面效果 並附加練習媒體查詢 以及 自適應。能快速搭建頁面結構後把css效果用js替換實現。靜態頁面沒問題了就可以去熟悉資料型別之類的js更進階的知識為之後前後互動做準備。個人認為框架會一兩種就可以了 現在火不一定一直火，追求效能永遠無止境的，多瞭解框架思維和實現原理有助於擴充套件思路。如果需要前端學習資料可以找我！願君早日成為大牛，同時謝謝邀請！

剛看到這個問題的時候，感覺問題挺有意思的，哪幾種類型頁面。我感覺是就需要書寫的頁面需要呈現出什麼樣子，展示給使用者。

我開發前端有一年多的時間了，簡單說下自己的看法。主流的有兩種，一個是PC開發，一個是移動端開發。簡單地說你在瀏覽器看到的，或者是app內部看到的都是頁面。還有很多桌面應用是前端開發的，像atom編輯器。結合網際網路現在的豐富度，對介面的要求，體驗，展示要求越來越高。

pc瀏覽器方面的，型別也很多了，像天貓，京東這種電商型別的，節日慶祝還有個大大的廣告，現在的瀏覽器很多都自動會彈出來商品廣告，直接成為導流的方式。想瀏覽器搜尋頁面，百度的相對簡單點，主頁就一個大大的輸入框，像360這種，就有很多其他平臺的連結方式，顯得密密麻麻一堆。還有我之前做過的財務報表方面， 需要給操作人篩選搜尋，還要有對比顯示，還有相對簡單的視覺化，折線圖餅狀圖，領導希望看到產品趨勢和所佔比例。還有公司的管理系統，通常左邊是選單，右側是展示區，右上角是登入退出。當我我說的知識比較籠統的，其實內部還有很多構造。我上個專案做的物流派單，還要嵌入地圖，展示派送點，規劃路線，地圖上實現派單等等。出列表的形式也有，像咱們悟空問答問題列表，單但我感覺pc上不算很多，當然佈局也沒有那麼複雜。

移動端現在是主流趨勢。手機使用者增多，而且電腦上很多功能手機都可以實現了。所以h5。我希望大家明白h5是一個標準而不是一種新技術，很多人有這個誤區，移動端h5佈局，h5頁面。其實h5只是個標準，跟es6，es7這些都是一個概念。只不過是在新的標準裡規則裡增加了新東西，canvas、localstorage，postMessage等等。我們現在主要說的h5使用canvas實現的動畫，像個小影片一樣，還有音樂背景。移動端我覺得列表就很多了，像訂閱，新聞列表，音樂播放這些。手機上看影片video標籤，新聞詳情頁面。看個天氣，日曆，地圖；手機購物；手機上的資料視覺化。現在這些都很成熟了，大家可以找找素材練習練習。

說到移動端還的強調幾個，一個是流量巨大的小程式，不光是原生的小程式，有很多第三方框架可以直接開發，像那個京東的tora，還有美團的mpvue，dcloud的uniapp啊都可以，建議大家一定找到個適合自己的學習下，工作會用到的；還有h5小遊戲，流量很大，當初的flybird這種虐心遊戲大獲成功，也有很多成熟的開發框架，像layabox，還支援小程式的小遊戲。

當然還有未來趨勢的webVR，當然現在技術不是很成熟，但已經在慢慢完善了。還有即時通訊IM，溝通介面。我接觸的也不是很多，可能也只能想到這裡了。

前端只是一開始你要掌握html、css、js，掌握了這個之後可以進階學習下h5+css3。

目前前端的vue.js框架比較流行，適用於前後端分離的專案，可以快速搭建出原形頁面，可以瞭解下。