前幾天，小異看到國外一位網友使用HTML5遊戲引擎Phaser 3 製作了他的個人網站。
好傢夥，逼格拉滿了，這哪裡是一個平平無奇的個人網站啊，完全就是一個神奇寶貝風格的遊戲網站！
這個極具特色的個人網站的其他部分的製作是簡單地使用了CSS和JS。你可以通過滑鼠操控小人物參觀代表作者不同經歷和信息介紹的建築物，遊戲體驗感十足！
在原帖子下方，還「炸」出了許多深藏不露的Web開發高手。
有把自己的個人網站設計成超級馬里奧遊戲的軟體工程師。
有把自己的個人網站設計成沉浸式網絡拉麵店的技術顧問。
有把自己的個人授課網站設計成3D汽車遊戲的Web開發人員。
看了這些有趣的個人網站，小異特別羨慕，也想學好Web開發。
因此，小異特地去請教了一位擁有多年Web開發經驗的程式設計師朋友，他給我總結了Web開發快速上手搞懂的幾個要點，用他的原話就是「抓住幾個重點問題，你就學會了Web編程」！
今天，小異也不藏私，一起分享給大家。
— 01 —
明白Web開發到底是什麼？
首先，概念性的東西要清楚。
比如，我們常說的Web開發通常是指前端開發與後端開發的組合。
前端開發是指開發用戶直接看到的網站部分，如布局、設計和互動性。
一個網站的每一個面向客戶的東西都屬於前端開發，主要通過HTML、CSS、javaScript、AJAX、DOM等技術實現網站在客戶端的顯示和交互功能。
後端開發處理的是後端邏輯，與處理開發網站客戶端的前端開發不同。
後端開發主要通過Java、PHP、Python和Node.js等技術對從前端頁面傳輸來的數據進行處理，按照需要將數據存入資料庫，或者通過模板引擎來處理數據，接著以變量的方式將其展示到頁面模板上，最終輸出頁面到瀏覽器並進行渲染。
你也可以這樣簡單地理解，前端開發用於構建用戶界面，而後端開發用於構建系統架構以使網頁正常工作。
— 02 —
明白Web伺服器的工作原理
一般來說，Web伺服器也稱為WWW(WORLD WIDE WEB)伺服器，是指網站伺服器，主要功能是提供網上信息瀏覽服務。
當網際網路上運行在其他計算機中的瀏覽器發出請求時，伺服器才會響應。目前最主流的伺服器是 Apache、Nginx和IIS。
Web伺服器的工作原理可以概括為：
（1）客戶端通過TCP/IP協議和Web伺服器建立TCP連接。
（2）連接建立以後，向Web伺服器發送HTTP協議請求包。
（3） Web伺服器對請求按照HTTP協議進行解碼。
（4）如果沒有錯誤出現， Web伺服器將執行請求所要求的動作，向客戶端發送HTTP協議應答包。
（5）客戶端與Web伺服器斷開，關閉文件和網絡連接，結束會話。
— 03 —
HTML5的語法、標記方法、元素
編寫Web應用逃不開HTML，不管是在線的還是離線的，所以Web開發者應該學習HTML5相關知識。
HTML5是新一代的HTML標準，新增了很多特性。HTML5的結構、語法、標記方法、元素，像<img>、<a>、meta元素.....這些常用的標籤，常見的特殊字符，還有常用表單的寫法，你要是都能信手拈來，那寫網頁肯定沒問題。
— 04 —
CSS語法
都說門面功夫要做到位，你開發的Web項目也得有賞心悅目的外觀。而Web開發中的面子工程靠的就是CSS。
你需要熟悉CSS中經典屬性的用法，還有CSS3中的選擇器、背景、邊框、盒子模型、布局方式、動畫、濾鏡，以及針對各種瀏覽器應該怎樣在代碼中設置各種屬性等。
— 05 —
熟悉各種Web開發程式語言，同時精通一門
如果你是Web開發初學者，在這種情況下，你很有可能在選擇最佳Web程式語言時面臨很多困難。因為不同的程式語言支持不同的編程技術，並各有各的複雜性。
一個優秀的前端開發人員應該對HTML，CSS，JavaScript有很強的理解，一個優秀的後端開發人員應該熟悉伺服器端語言，即PHP、Python、Java。
為此，小異列出了一些最適合 Web 開發的程式語言，你不需要學習所有的程式語言，但請你根據實際需要選擇最合適的一種。
● JavaScript
JavaScript是唯一能讓你既可以建立Web應用程式、前端和後端，又可以構建移動應用程式（React Native）的的程式語言。
毫無疑問，比較容易上手的JavaScript不僅是需求很高也是最受Web開發者喜愛的語言之一。如果你很糾結到底選擇那門程式語言，那就直接選擇JavaScript吧！
● Python
Python是另一種用於Web開發的程式語言。它被大約44%的軟體工程師使用，僅次於JavaScript，位居第二。Python的優點主要有：語法簡單、易於學習，支持不同庫或工具，良好的可讀性，擁有優秀的框架，具有強大的類型等。
● PHP
PHP是一種腳本語言，主要用於Web應用、伺服器端、WordPress、Facebook或Flickr等。PHP Web開發支持.NET、Bzip2、Apache等免費開源擴展。它提供微軟SQL、MySQL、Server等不同資料庫的訪問。
此外，PHP從第一版開始就一直使用類似Perl的變量，可以有效地結合到HTML中。
● Java
Java 廣泛用於製作企業級的 Web 應用程式，很多大公司都在使用它。
選擇Java作為Web程式語言的主要是因為它有豐富的開源庫，支持面向對象的編程範式，藉助 Java 虛擬機功能實現最佳平台獨立性，高度安全，支持多線程，是分布式計算的理想選擇。
● Ruby
與Python和PHP一樣，Ruby也特別簡單易學，非常適合初學者。
並且，由於Ruby on Rails 框架可以用於開發網站，所以Ruby 也是 Web 開發的絕佳選擇。
— 06 —
知道都有哪些Web開發框架，會用其中一個
前端開發人員應該知道各種Web開發框架和庫，如Bootstrap，React，AngularJS，EmberJS等。後端開發人員應該知道Express.js，Django，Laravel，Ruby等框架。
— 07 —
路徑問題
在Web開發中經常會遇到路徑問題，而如果你對Web中的路徑相關概念一知半解的話，總會遇到令人頭疼的問題。為了避免錯誤，提高開發效率，你需要對它有足夠的認識。
路徑通常分為絕對路徑和相對路徑。
絕對路徑指文件的完整URL，例如：
<img src="https://man.ilovefishc.com/html5/image/FishC.png" alt="FishC-logo">而相對路徑指以當前網頁所在位置為基準建立出的目錄路徑，例如：
<img src="../html5/image/FishC.png" alt="FishC-logo">— 08 —
資料庫訪問
目前比較容易並且普遍的資料庫訪問技術主要有四種，分別是JDBC、ODBC、ADO.NET和PDO，複雜點的技術可以等Web開發水平上去了再學習。
想要輕鬆上手Web開發，掌握JDBC就差不多可以了。JDBC是一種用於java程序連結資料庫的標準方法。它是由java編寫的類和接口實現的，是一種可以執行SQL的java API。
如果開發的是簡單的Web應用，JDBC夠你用了，學習使用時，特別注重對Connection接口、Statement接口和ResultSet接口的學習，就能編寫一些簡單的代碼了。
要是這些基礎的東西，你都能搞定了，那應該能找到一份養活自己的Web開發工作了。
當然，如果你的目標不止是學會，還要特別會，達到精通，那小異建議你找個更加詳細的教程，按照大牛給出的路線學習。
這裡，小異推薦一本新手自學Web開發的秘笈《零基礎入門學習Web開發（HTML5 & CSS3）》給你。
▲跟著小甲魚，Web開發不迷路！
如果說搞懂上面幾點，你就學會了Web編程開發，那麼，讀懂這本書的內容，你就能成為Web開發的實戰高手。
因為，這本源自B站同名視頻教程，擁有百萬播放量的《零基礎入門學習Web開發（HTML5 & CSS3）》主打特色就是實戰性。
書中精解HTML 5和CSS3中233個語法知識點和多種網頁的設計技巧；
還手把手帶你實現上百個Web開發案例，數十種布局方式，源碼拿來即可用。它附贈原始碼，可運行在macOS、Linux、 Windows等作業系統平台；
書籍更是配套86集在線教學視頻，讓你學習更功效！
乾貨十足，福利滿滿，你心動了嗎？
總而言之，不論你是
想要零基礎入門Web開發的專業和非專業人士；
還是想要利用Web開發編程開發的程式設計師；
還是想要過考Web開發課程的大學生；
還是教授Web開發的大學老師。
只要你想要自學快速入門Web開發，這本書就是你的不二選擇！
並且，你還有一次近距離學習這本書，入門Web開發的機會——
3月17日晚7：30，小異特邀《零基礎入門學習Web開發（HTML5 & CSS3）》作者小甲魚。他將解答大家有關Web開發的難點以及困惑，如何稱為一名優秀的Web開發者，更有新書《零基礎入門學習Web開發（HTML5 & CSS3）》的分享。
歡迎關註明晚頭條的直播呀，你將學到：
Web開發是什麼?
Web開發怎麼學?
Web開發學習難點?
Web開發常見的坑?
文章編輯：羅夢婷 審校：桐希
參考文獻：
《零基礎入門學習Web開發（HTML5 & CSS3）》第一章、第二章
How Long Does It Take To Become A Web Developer?
What Are The Best Programming Language For Web Development
將我的個人網站製作成了一個神奇寶貝風格的小遊戲
1
END
1