HTML
以前網頁都是非常單純的資訊呈現，所以聰明的工程師想到，只要在電腦上裝了一個瀏覽器，然後制定一個標準，讓瀏覽器能正確呈現網頁就好了。
這個標準就是HTML，HTML用tag的方式告訴瀏覽器資訊該如何呈現，舉例：瀏覽器讀到image這個tag就知道要在網頁上擺一張圖片，讀到button就知道要在網頁上放一顆按鈕。
如此一來，我只要制定一系列常用的tag (例如<h1>,<h2>,<p>,<image>,<input>等等)，就能讓瀏覽器呈現圖文並茂的網頁。
至於有哪些tag呢？可以參考：
左邊的選單列有每個tag的介紹，而主選單依序有HTML, CSS, JavaScript的介紹：
這麼多tag，要一個個學嗎？千萬不要，因為HTML已經很直覺了，而且網路資訊已經非常豐富，我們只要像查字典一樣，根據想要呈現的畫面，找尋合適的tag就好，例如想呈現表格的話，直接Google “HTML table”、想呈現下拉式選單，直接Google “HTML Drop Down List”，你可以找到一堆sample code，通常是一看就懂。
可以直接用online html editor，來學習HTML：http://htmlcodeeditor.com/
範例：
<!-- HTML Code -->
<!-- 通常每個html tag會是這樣的形式：<tag>Content</tag>-->
<!-- 一組<tag></tag>構成一個element，<tag>表示開頭、</tag>表示結尾。 --><button> 按鈕 </button>
<h1>標題</h1>
<p>段落</p>
<!--
註解：每個HTML tag都有各種屬性
例如下面的image tag就有src屬性可以指定圖片的來源
width屬性則指定圖片的寬度
-->
<image src="https://www.image.ie/images/no-image.png" width="50%">
CSS
有了HTML後，大家還是不滿意，因為單純用HTML語言描述出來的網頁很醜，工程師想出了一個方法，就是制定一種描述網頁外觀的語言，再讓它變成一種標準，這樣瀏覽器也就會知道如何美化網頁了，這個語言就是CSS (Cascading Style Sheets)，CSS提供很多很厲害的效果和描述外觀的屬性，例如讓圖片變模糊、變亮、旋轉，或者改變字體的顏色。
範例：
<button> 按鈕 </button>
<h1>標題</h1>
<p>段落</p>
<!--
註解：每個HTML tag都有各種屬性
例如下面的image tag就有src屬性可以指定圖片的來源
width屬性則指定圖片的寬度
-->
<image src="https://www.image.ie/images/no-image.png" width="50%"><style>
/* 指定以下CSS會套用到img這個tag上*/
img {
/*讓圖片旋轉90度，需要套用這些屬性：*/
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-filter: blur(2px); /*讓圖片變模糊*/
}
</style>
老話一句，CSS屬性一堆，一一認識實在太花時間了，既然都是描述語言，就要像查字典一樣，想要呈現什麼外觀直接Google就好。
JavaScript
最後呢，光是呈現畫面總少了點趣味，我們希望網站能和使用者有互動，JavaScript就是用來撰寫這些互動行為的程式語言，接續剛剛的例子，如果我們想要按按鈕後跳出提示文字：
<button id="button-1"> 按鈕 </button>
<h1>標題</h1>
<p>段落</p>
<!--
註解：每個HTML tag都有各種屬性
例如下面的image tag就有src屬性可以指定圖片的來源
width屬性則指定圖片的寬度--><image src="https://www.image.ie/images/no-image.png" width="50%">
<style>
/*指定以下CSS會套用到img這個tag上*/
img {
/*讓圖片旋轉90度*/
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-filter: blur(2px); /*讓圖片變模糊*/
}
</style>
<script>
<!-- 利用document.getElementById這個方法，可以抓出我們想要的HTML element，本例我們抓出id是button-1的HTML element，並且指定當滑鼠點擊這個element時會觸發一個alert。
--> document.getElementById("button-1").onclick = function(){
alert("click button");
};
</script>
Javascript能監聽網頁上的各種操作行為，例如移動滑鼠、點擊按鈕、網頁縮放、輸入文字等等。
學習JavaScript，可能得像學習其他程式語言一樣，了解迴圈結構、條件選擇語法、變數命名、各種函數等等，有了這些基礎後，我們才看得懂網路上的sample code，並且找到需要的函數來實現指定的互動功能。
總結
- HTML建立起網頁的主結構。
- CSS負責美化網頁。
- JavaScript負責描述網頁如何與使用者互動。
而互動的背後原理其實是利用JavaScript撰寫程式邏輯來控制HTML上的element，並且根據用戶的操作行為來改變HTML結構或在element上套用對應的CSS，就能設計出一個充滿互動性的網頁，進而實現一些我們常見的動態互動效果，像是滑鼠移動到按鈕上時，按鈕的顏色變深；清除表單的內容；警告email輸入格式錯誤。
但光學會這三樣東西，仍然無法滿足工程師開發上的需要，為了開發的效率，不想重新造輪子，所有的開發語言生態系都一定會衍生出各種framework和library，像是bootstrap就是一種CSS & JavaScript構成的前端framework，他能夠幫我們處理好跨裝置的用戶體驗，讓訪客在各種螢幕大小的裝置上瀏覽網站，都能有最佳的操作體驗：
其他常見的JavaScript框架有Vue.js, AngularJS, ReactJS, jQuery等等，各有喜好者，但目的都是為了簡化開發複雜度，把前後端分開，提高重複使用性，可維護性。
另外也有比較功能性的library，例如HightCharts，就提供了一系列的圖表工具；D3.js則是一個動態圖形顯示資料的JS函數庫。
總言之，學海無涯，也許你會問可以用純HTML、JS、CSS不用任何框架嗎？但何不站在巨人的肩膀上呢？除非你想自己去解決各種瀏覽器的相容性問題，各種螢幕大小裝置的網頁呈現方式，不然學會現有的framework和library絕對是事半功倍的捷徑。
我是James，一位自由接案工作者對於軟體開發與接案工作充滿熱忱，截至2018年，不知不覺已經累積11年的時間在這個領域打轉，擁有6年的接案經驗。 寫作是我一個新的嘗試，初衷是希望能讓這個環境變得更好，從三個面向出發：1.個人：強化團隊成員的生產力與技術力，提供技術觀點與教學、工作方法等硬實力。
2.組織：培養良好的團隊合作態度與企業文化、分享合作與溝通技巧。
3.社會：讓客戶、發包單位知道如何有效處理系統外包，把資源花在刀口上，並透過接案經驗分享促進良好的合作。ＦＢ粉絲頁：艾菲肯先生——您最佳的技術夥伴
個人刊物 ：艾菲肯先生的咖啡時間
工作室網站：Efacani.com
