IT兄弟連 HTML5教程 HTML5的學習線路圖 第一階段學習網頁製作
- 2019 年 10 月 5 日
- 筆記
版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/ITXDL123/article/details/100914619
學習HTML5技術可並不是簡單學會幾個新增的標籤而已，HTML5現在可以說是前端所有技術的代名詞。需要學習的語言和工具不僅多，對於剛接觸他們的新人會感覺很亂。另外，前端開發也會細分很多個開發崗位，不同的崗位所涉及的技術也會有差別，所以先要確定自己的發展定位，收集要學習的內容，整理好學習的順序。很多時候，成功除了勇氣、堅持不懈外，更需要方向。也許有了一個好的方向，成功來得比想像的更快。如果在錯誤的路上奔跑，再怎麼努力也是白搭。學習Web前端也是如此，首先應該選擇一個正確的學習路線。HTML5學習線路圖，如圖1.13所示：
圖1
如圖所示，如果需要掌握全部前端技術，可以分為三個階段學習，循序漸進的逐步儲備自己的知識量。當然也並不需要全部內容學習完成才能參加工作，每個階段都有自己的定位，有對應的工作崗位，只是學習的內容越全面，發展空間也就越廣泛。本書覆蓋第一階段全部內容，第二階段和第三階段可以參考本書的配套書籍。
1.5.1 第一階段學習網頁製作
第一階段的學習也是Web前端技術的開始，雖然對於成手來說這部分是最簡單的技術，但對於新手來講開頭是最難的。技術種類繁多，不知到從任處下手，所以必須有一個良好的學習路徑。對於本書學習路徑的規劃可以參考以下幾個步驟：
1．學習前端技術一定是從HTML開始，同時也要了解一些UI方面的知識。HTML是為了將內容放到網頁上，像文字、圖片和表單等，是一個網頁的骨架，無論是靜態網頁還是動態網頁，最終返回到瀏覽器端的都是HTML程式碼，瀏覽器將HTML程式碼解釋渲染後呈現給用戶。因此，我們必須掌握HTML的基本結構和常用標記及屬性。也可以通過HTML中一些標籤和屬性做一些簡單的頁面布局和樣式處理，但這是CSS強項，所以這方面的內容僅作為了解即可。目前學習HTML可直接從HTML5入手，重點掌握最新一代HTML語言的語義化標籤。HTML的學習是一個記憶和理解的過程，需要通過程式碼和效果進行對照學習的方法，去彌補單純識記HTML標籤和屬性的枯燥乏味。
2．在學習了HTML之後，只是掌握了各種「原材料」的製作方法，要想蓋一幢樓房就還需要把這些「原材料」按照我們設計的方案組合布局在一起並進行一些樣式的美化，就需要開始學習CSS技術。CSS即層疊樣式表，是專門為頁面中的HTMl標記添加樣式的語言，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言其樣式是可以復用的，這樣就極大地提高了我們開發的速度，降低了維護的成本。當然也是像學習HTML一樣，從基本的使用語法學起。然後掌握CSS和HTML配合使用的幾種方式、CSS的樣式選擇器和常用的CSS樣式屬性。也是可以從CSS3直接開始學習，重點掌握CSS3中新增加的樣式選擇器和新的樣式屬性。由於樣式屬性比較多，所以劃分成和外觀相關的、與布局相關的，以及做盒子模型有關的幾部分屬性去學習。
3．其實學完HTML和CSS兩門技術就可以編寫頁面了，但只能說你對HTML和CSS技術了解，對其中一些常用的知識沒有完全掌握，也不能熟練在項目中去應用。要想達到技術使用成熟，下一步就必須學會HTML和CSS的結合使用，完成各種需求下的頁面布局。像CSS中的盒子模型、相對布局、絕對布局等能夠實現對網頁中各對象的位置排版進行像素級的精確控制。當然和語言發展及應用場景不同，有很多種頁面布局方法，像表格布局、浮動布局、定位布局、網格布局，以及響應式頁面布局等。
4．雖然能布局頁面就已經算一名合格的頁面製作人員了，但由於CSS3有好多樣式屬性為了能兼容各種瀏覽器，同一個屬性要不同的前綴寫多次才能做到，特別是大型項目中CSS屬性非常多。而SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。所以建議讀者學完CSS以後，掌握SASS語言的用法。
5．如果你掌握了SASS的一些基本入門知識點後，可以趁熱打鐵，工欲善其事，必先利其器，你最好再去學習一下SASS工具compass，compass是SASS團隊成員開發的，compass是對SASS的一個封裝，目的是為開發者提供一些豐富的組件以及一些實用的工具模組。由於瀏覽器對CSS3支援的差異性，我們很多時候需要寫一堆針對不同瀏覽器前綴樣式，著實很煩人，compass幫我們解決了這個問題，我們只需include相應樣式定義即可，compass會自動為我們生成針對不同瀏覽器的樣式定義。
6．如果上面的提到的內容全部掌握了，就已經可以實現自己想要的效果了。可開發頁面就像蓋大樓一樣，每天這樣日復一日，年復一年的蓋樓，非常繁瑣。能不能將大樓裡面每一個單獨部件模組化，當需要蓋樓時就像堆積木一樣組合在一起。這種思想在Web前端開發中也是適合的，於是乎就出現了各種前端框架，在這裡筆者給你推薦給大家的是Bootstrap。Bootstrap是Twitter推出的一個開源的用於前端開發的工具包，它是目前最受歡迎的HTML、CSS和JS框架，用於開發響應式布局、移動設備優先的WEB項目，為所有開發者、所有應用場景而設計。Bootstrap讓前端開發更快速、簡單。所有開發者都能快速上手、所有設備都可以適配、所有項目都適用。在項目開發過程中可以藉助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速的完成頁面布局和樣式設置，然後再有針對性的微調樣式，這樣基於框架進行開發大大縮短了開發周期。所以能掌握一款好的前端框架對你是非常有幫助的。
7．基礎知識掌握了，下一步就是能熟練使用這些技術。要想做到這一點那只有多看、多寫、多練。通過不斷開發項目積累經驗，從實戰中提升自己解決問題的能力、積累開發素材、摸索創新方法。「君子生非異也，善假於物也」，在開發和學習的過程中還要多瀏覽一些優秀的網站，善於分析借鑒其設計思路和布局方法，見多方能識廣，進而才可以融會貫通，取他人之長為我所用。同時還要善於使用Firebug這樣的利器，一方面可以在我們學習過程中幫助我們調試自己的頁面，另一方面我們可以使用Firebug方便地查看、分析別人網站的源程式碼，「偷」也是一種技能。幾個項目跟下來一定可以成為頁面製作專家。