為什麼學習網頁製作？
互聯網時代的今天，各種各樣的網頁充斥著我們的生活。只要使用瀏覽器，打開的每一個頁面都可以稱之為網頁。即使使用頭條這樣的APP，其內容佈局、展示的方法也脫胎於網頁頁面設計的方法與原則。可以說頁面的概念已經遍佈我們的信息化世界。
作為芸芸眾生中的一員，學習網頁製作對我們的事業、生活有怎樣的幫助呢？
第一，學習網頁製作有助於理解網絡信息的傳播運行機制，即使通過本課程不能全面瞭解這些核心機制，也能為大家鋪墊下繼續深入學習的知識基礎。即使自己不必親自制作網頁，在使用第三方工具時，比如微信公眾號、微信小程序或者其他自動網頁或網站生成工具時也會比沒有基礎的人更快的掌握這些工具。
第二，學好網頁製作是製作網站的基礎，如果您因為事業需要或者個人愛好打算製作自己的網站或博客，無論是打算使用php還是Java還是Python去構建您的網站，精通網頁製作技術是您的第一塊技術基石。
第三，如果您打算學習網絡爬蟲來分析一些網絡數據，瞭解網頁頁面構成也是必要基礎，至少您要知道一個網頁頁面中每個標籤中對應的是哪些信息，才能有的放矢拿到自己想要的信息。
第四，如果您想學習編程，但是缺少相應的基礎知識，看不懂複雜的C語言教學，那麼從網頁製作入手嘗試理解編程的語法也是一個很不錯的選擇。
除此之外，瀏覽器可以做的事情越來越多，比如webgl的出現，可以讓我們通過瀏覽器構建3d世界，無論是虛擬現實（VR）還是增強現實（AR）都有很多開源免費的解決方案。TensorFlow的JavaScript版本的出現，讓我們可以通過結合瀏覽器學習使用人工智能技術，且非常容易實現。
所以，新的一年裡，我打算做網頁製作的學習教程，讓更多沒有基礎卻對網絡技術感興趣的小夥伴能加入進來。
製作網頁需要學習哪些技術？
簡單來說學習網頁製作需要掌握三門技術。
第一，也是最基礎最核心的內容是HTML超文本標記語言。大家不必糾結HTML到底是什麼，但是一定要記住它能幹什麼。HTML通俗來說可以比喻成容器。大家試想，網頁裡都有哪些內容呢？
一般網頁中都會有文字、圖片、聲音、視頻、表格等內容，這些內容就是靠HTML中的標籤添加進頁面的。
所以說HTML這個工具就是個容器，我們使用HTML標籤語言為網頁添加所有需要的信息內容。
第二，CSS層疊樣式表，這是一個用來裝飾頁面的工具。如果說HTML是個信息容器，那麼如何讓這些信息條理清晰的顯示出來呢？那就需要CSS來幫忙了。如下圖所示，這是一個最簡單的頁面，只用到了HTML，裡面裝了一個標題和一個只有六個字的段落。
為了讓這個頁面看起來美觀些，我們為其添加css樣式表。添加後如圖所示：
我們可以看出來，CSS讓標題文字換了顏色，也居中顯示了，背景也變成了藍色。
第三，JavaScript，這個工具相比HTML和CSS來講是最難學習的，學習JavaScript就是在學習編程了。它雖然只是個腳本語言，但是用到的知識和其他編程語言相差不大。
那JavaScript能幹什麼呢？
首先，它能為頁面中添加很多交互效果。舉個例子，我們常見的圖片翻頁、輪播很多就是基於JavaScript腳本實現的。
其次，JavaScript可以為傳統頁面擴展出很多新功能，例如結合three.js我們可以很容易的在頁面中構建三維空間，或者實現一些3d遊戲或其他三維動態演示效果。舉個例子（https://renaultespace.littleworkshop.fr/），打開可能略慢。3d展示的汽車廣告是不是很酷！
再次，JavaScript可以以網頁為基礎，實現各種各樣的在線小遊戲，例如Phaser.js就是目前非常火的一個開源免費網頁遊戲製作庫。phaser官網：http://phaser.io/
JavaScript為網頁的功能拓展提供了很多可能性，無論是3d顯示還是遊戲製作還是未來的人工智能工具，都是由JavaScript都為大家提供了將功能引入到頁面的接口，這也是學習難度比較大的原因。不過只要堅持下去一定能學通的！
網站與網頁的區別？
網頁是指我們看到的單個頁面。這些頁面分為靜態頁面和動態頁面兩種。靜態頁面指的是不能與服務器進行數據交互的頁面，顧名思義動態頁面指的是可以與服務器進行數據交互的頁面，這一點大家不必糾結。
簡單來說，靜態頁面寫好後什麼樣就是什麼樣，誰打開都是事先編輯好的內容，而動態頁面寫好後會隨著不同的訪問變換不同數據，動態頁面更像是一個頁面模板，隨時套用不同信息。
大部分網站中的頁面都是動態頁面。
如果使用靜態頁面做網站會出現什麼問題呢？如果您有300篇博客文章，那您就要做300個靜態頁面來顯示，大型資訊網站信息量更加龐大，如果都用靜態頁面來做，佔用的服務器空間也是龐大到不可想象。
網站中的動態頁面就解決了這個問題，例如一個簡單的網站我們只需一個主頁、文章頁、搜索頁基本上就可以了，這些頁面中沒有具體內容，我們稱之為模板。當您打開後，顯示的內容都是在數據庫中調出的。這樣，一個數據庫用來存儲壓縮過的精簡信息，這些信息通過不同頁面模板顯示在用戶面前就成為網站的基本運行模式。
例如在靜態頁面中顯示文字字數的代碼是這樣
<code>300字
/<code>
如果使用以php編寫的WordPress網站框架來動態顯示文章字數就是這樣
<code>/<code>
這條語句可以調取數據庫中文章字數的記錄並顯示出來。這也我們通過這一條語句就可以顯示不同文章的字數了。
無論是靜態頁面還是動態頁面，他們的核心內容都是一樣的，HTML，CSS，JavaScript都是必修知識。只是靜態頁面在HTML中插入信息，而動態頁面插入的是調取數據庫信息的語句。
因此，我們這個教程看起來是在做靜態頁面，但是我們學習的也是製作網站的基礎知識。
本教學學完能幹什麼？
第一，可以寫出靜態頁面。
第二，有能力讀懂他人寫好的頁面代碼。
第三，為繼續深入學習網站製作或更為炫酷的頁面製作打下基礎。
第四，掌握編程基礎，至少是基於JavaScript的。
我是大魚，致力於數字藝術技術分享！歡迎大家關注！祝願大家2020年學有所成！
HTML學習目錄
閱讀更多 大魚師兄 的文章
