很多人第一次接觸網頁時，腦中會浮現：
但如果直接跳到 CSS 或 JavaScript，會發現沒有基礎可以發揮。
HTML（HyperText Markup Language，超文件標示語言）就像建築物的骨架：
幾乎所有 HTML 頁面都有固定模板，長這樣：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day 1</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>我的第一個網頁！</p>
</body>
</html>
<!DOCTYPE html> → 告訴瀏覽器這是 HTML5 文件<html> ... </html> → 整份文件的根元素
<head> ... </head> → 放設定，例如：
<title>：瀏覽器分頁上的名稱<meta charset="UTF-8">：指定編碼方式，避免中文字亂碼<body> ... </body> → 使用者實際看得到的內容（標題、段落、圖片、表單等）最容易踩雷的地方，就是忘了關閉標籤。
錯誤例子：
<p>這是一個段落
<p>這是第二個段落</p>
瀏覽器會把兩個 <p> 當成一個段落，排版可能跑掉。
正確寫法：
<p>這是一個段落</p>
<p>這是第二個段落</p>
小技巧（VS Code）：開啟「自動關閉標籤」（預設通常開啟），打開 <p> 後會自動補 </p>。
meta charset="UTF-8"如果不寫編碼，瀏覽器可能用 Big5 或其他舊的編碼，中文會變成亂碼。
範例：
<meta charset="UTF-8">
這行是告訴瀏覽器：「這份文件用 UTF-8 編碼」。
UTF-8 幾乎可以正確顯示世界上所有文字（包含中文、日文、Emoji），所以這行幾乎必備。
<head> 放設定，<body> 放內容meta charset 不能少接下來要挑戰：標題與段落的排版，讓文字更有層次，而不是只有兩行字。
感謝 未知作者 的精彩分享！
JavaScript 生態系統真的很豐富，這樣的分享對開發者很有幫助。
實際的程式碼範例很有幫助，讓理論更容易理解。
遇到的問題和解決方案分享很實用，相信很多人都會遇到類似的情況。
也歡迎版主有空參考我的系列文「南桃AI重生記」：https://ithelp.ithome.com.tw/users/20046160/ironman/8311
如果覺得有幫助的話，也歡迎訂閱支持！
iThome鐵人賽
看影片追技術