HTML是一種用來建構網頁的標記語言，而非程式，可以將網頁想像成一頁文件，而這份文件內會有標題、內文、圖片、頁尾等元素。HTML這時候就會告訴我們網頁上有哪些標題、標題在哪、圖片在哪等...
而不同的元素，會用標籤<>標示出來，例如標題 、網頁內容 、圖片 等。大部分標籤會有開頭、結尾，讓網頁知道標題內的文字有哪些。例如：
<h1>標題</h1>>
<button>按鈕</button>
而少部分的標籤會沒有結尾標籤，例如圖片：
<img src="圖片網址或位置" alt="替代文字">
此外，在上方圖片標籤 中可以看到裡面包含了 src 和 alt ，這些是此標籤的『屬性』；
每個標籤都會提供不同的屬性，讓資訊能夠更完整。
在 MDN 的 CSS基礎 有一句解釋：
CSS 既非標準程式語言，也不是標記語言, 而是一種風格頁面語言（style sheet language）
如果將HTML形容成一棟房子，而CSS就像是幫這棟房子裝潢上各種風格，可以自訂網頁字體樣式、顏色，網頁排版橫排、直排、動畫等，除此之外，還能製成RWD響應式網頁，讓頁面不管在任何尺寸下都調整到適合的瀏覽樣式。
舉個例子：
h1 { color:red ; }
這樣就能將上面HTML的標題顏色變成紅色
JavaScript 是一個成熟的動態程式語言，應用於 HTML 文件（document）上時，就可以為網頁提供動態的互動功能。
JavaScript可以實現許多事情。例如跑馬燈、相簿、動態版型、回應按鈕點擊等。在熟悉的這個程式語言以後，甚至可以製作遊戲、2D平面以及立體的圖像、資料庫系統等等的應用。
JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 JavaScript 核心為基礎為她撰寫了相當多的工具，例如：
就好比 HTML 如果是『一棟房子』、CSS 是『裝潢』，那JavaScript就像是『裝潢工人』。
我們可以透過 JavaScript 讓網頁移動、改變樣式、獲取資料、讓使用者與網站互動等許多事。
舉個例子：
// 執行事件，將此事件命名為 “Hello”：
function Hello() {
alert('Hello World!');
}
// 執行上述 Hello 事件
Hello();
如果在JavaScript的執行區域或檔案內輸入此程式碼，即會顯示跳出顯示視窗：
React、Vue.js、Angular、jQuery，這些皆是從JavaScript發展而成的，而React /Vue.js /Angular是『前端框架』， jQuery 則是 JavaScript 的 『函式庫(Library)』，這些框架和函示庫除了解決 JavaScript 本身某些問題、優化開發和維護效率等，也使得 JavaScript 成為最熱門的程式語言。
使用HTML的style元素，在文件中定義CSS樣式。
<head>
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
</head>
每一個HTML元素都包含一個style屬性，可以直接定義樣式。
<div style="color:#FFF;font-weight:bold;">內聯樣式</div>
一般使用link元素。
<head>
<link rel="stylesheet" href="css的路徑（相對html的路徑）" type="text/css" >
</head>
<head>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript" src="myjs.js"> </script>
</head>
<script>
寫javascript的程式碼
</script>
iThome鐵人賽
看影片追技術