簡介網站架構 (Front-End)
一般來說，我們瀏覽的網站都會分為前端以及後端
何謂前端？何謂後端？ 其實到現在快2017還是存在一點界定的爭議。
但我們通常會以程式功能來區別前後端，前端後端適當的整合才能架構出優良使用者體驗的網站。
前端工程(Front-End)
簡單來說，我們瀏覽的所有網站，不分大小，使用者(Client)端肉眼可見的全都稱為"前端"。
前端設計需要兼顧美感與實用，隨著近年來行動裝置的竄起，如何相容於不同裝置也成為一個重要課題。
優秀的前端工程師寫的程式通常會相容於各大瀏覽器以及行動裝置，並同時兼顧美感和實用。
優秀的前端工程師寫的程式通常會相容於各大瀏覽器以及行動裝置，並同時兼顧美感和實用。
常見程式語言：HTML、CSS、JavaScript
常見框架：jQuery、BootStrap、AngularJS、Nodejs
何謂HTML？
傳統且古老的前端語言，前端工程師必備的語言能力。
在各大網站都不難發現採用HTML寫前端的網頁，至今已發展到HTML5。
以前無名小站寫部落格常用的超連結功能不知道還記得嗎？
<a href="www.davidh83110.com">David's HomePage</a>
寫這一段語法如下面所示，就會變成文字超連結，這就是HTML，相信大家都不覺得陌生。
David's HomePage
HTML的架構？
其實並沒有限制我們怎麼寫，有些人喜歡把<head>、<body>都寫出來才寫程式
其實你連<html>都不用寫，網頁就可以正常呈現了，所以說用法其實滿free的。
但是對開發者來說，沒有規範卻是一件令人困擾的事，所以我們需要W3C制定的規範。
W3C大家應該不陌生，就是World Wide Web Consortium，簡稱W3C，中文翻譯為全球資訊網協會。
雖然說HTML沒有強制規定大家要怎麼寫，但是有一個全球統一的標準架構來參考還是比較ok的。
那為什麼我要照著W3C的標準來開發？
1.瀏覽器的支援度很高
W3C的用意其實就是為了整合跨瀏覽器支援的問題，才有這一套制度規範，如果完全符合W3C的規範寫出來的網頁，通常在各大瀏覽器(FireFox、Chrome、Opera、Safari...)的呈現都是一樣的。
2.方便維護及管理
全球統一標準，當然容易維護跟管理，同時也利於下一個接手的人修改程式碼，不至於完全看不懂。
3.利於SEO
所謂SEO就是搜尋的優先度，google SEO可以提供使用者管理console，並告知網站哪邊需要改進可以有利於SEO，搜尋排名才會更前面，W3C就是個很重要的依據。
所以照著W3C的標準來開發前端，是很重要的技術。
JavaScript？
這個詞大家應該不太陌生，JavaScript是網頁動態呈現很重要的依據。前面提到的HTML/CSS開發出來的網頁我們稱為"靜態頁"，因為他不會動。
那網站很多動畫，甚至有照片可以從右邊跑到左邊還放大，這些效果是如何控制的呢？
就是利用JS來製作的，所以一個優美的前端網頁，是絕對少不了JS的。
前段簡介就先舉以上兩個常用的技術來說明，但其實現在的發展很多元。
像是我架blog所使用的jekyll就是一種BootStrap，這是一種HTML模板，用來架設個人網站可以說是非常合適，因為架構固定，層層分離，維護起來非常方便。
但JS也常被駭客拿來當成入侵的工具，像是XSS攻擊就是一個利用JS控制元素偷取cookies的最佳例子。
前段的介紹，最後舉個例子。
拿Google來說，我們對瀏覽器按F12或是右鍵->檢查就會跑出一個console
或是直接對網頁點右鍵->檢查原始碼，這些就是所謂的前端程式碼囉
就是因為這些程式碼，我們才能看到google這個網頁。
那你會問說，我把它全部copy下來，我不就也有google了？
對啊，沒有錯。但你只是有它的介面，並沒有辦法copy到功能哦。
為什麼呢？因為功能是後端程式碼在做的事，接下來就來介紹後端工程。
