簡單的說HTML就是網頁的骨架、支架。我們可以透過HTML設置網頁的標題、文字、圖片、影音等內容，但也就只是把這些東西放在網頁裡面。如果我們想要改變標題、文字、圖片這些物件的位置、外觀，我們要使用CSS進行處理，或是透過JavaScript給予互動的效果。後續提到CSS和JavaScript的部分會再細說，這邊就先專注在HTML的架構上吧！這邊建議可以先Google HTML、CSS、JavaScript了解三者的關係。
昨天有教創立存放網頁的資料夾，在開啟VS Code(Visual Studio Code)，之後在左側就可以點2建立新檔案，或按滑鼠右鍵建立新檔案，副檔名記得打上html。
接著，我們嘗試在右側輸入!後，再按一下tab鍵，我們就會發現基本的網頁結構已經出現。
<!DOCTYPE html>
<!--該檔案為HTML檔-->
<html lang="en">
<!--網頁從這邊開始，定義為英文網頁-->
<head>
<!--網頁的「頭」，該區域通常放設定內容和抓取的外掛模組等資訊-->
<meta charset="UTF-8">
<!--使用UTF-8進行編碼，最常見的文字編碼-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--什麼版本的IE就用什麼版本的模式，現在還有人在用舊IE？整段拿掉OK-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--設定RWD的模式，之後會介紹，content="width=device-width指網頁會和讀取網頁的載具同寬；initial-scale=1.0指畫面初始會和原本網頁內容一致，1.0就是縮放比例為100%的意思-->
<title>Document</title>
<!--這個網頁顯示在瀏覽器上的標題文字-->
</head>
<!--網頁的「頭」結束的地方-->
<body>
<!--網頁的「身體」，網頁內容顯示的部分從這邊開始-->
</body>
<!--網頁的「身體」結束的地方-->
</html>
<!--整個網頁的結尾-->
前述語法已經加了註解，再麻煩大家自行閱讀囉！我們可以觀察到語法區域有被html.../html框住的部分，代表的就是網頁的開頭與結尾，而...的部分就是整個網頁的內容。
這時我們可以從你建立資料夾的檔案裡面發現你建立的html檔案，請點滑鼠兩下將它打開。這時候應該會開啟一個純白無內容的網頁。
接著回到Visual Studio Code，我們可以嘗試在編輯區域被body與/body夾住的中間區域，輸入<h1>Hello World!!!</h1>，存檔後再重新整理剛剛開啟的網頁，看看會看到什麼？分別在編輯網頁的檔案中再輸入<h2>Hello World!!!</h2>與<p>Hello World!!!</p>後，再重新整理剛剛開啟的網頁。可以參考以下語法：
<h1>h1的 Hello World!!!</h1>
<h2>h2的 Hello World!!!</h2>
<p>p的 Hello World!!!</p>
我們可以看到大小不同的文字，這是HTML預設的文字大小，h1代表第一標題、h2代表第二標題、p代表段落，三者呈現不同的網頁大小，可參考下圖。
iThome鐵人賽
看影片追技術