下列是一個網頁原始碼的 HTML 範例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title>範例頁面</title>
<meta name="description" content="這是一個示範用的網頁">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<header>
<h1>歡迎來到我的網頁</h1>
<nav>
<ul>
<li><a href="/">首頁</a></li>
<li><a href="/about">關於我</a></li>
</ul>
</nav>
</header>
<main>
<section id="intro">
<p>這裡是網頁的介紹段落。</p>
<img src="pic.jpg" alt="示意圖">
</section>
<section id="contact">
<form action="/submit" method="post">
<input type="text" name="name" placeholder="姓名">
<input type="email" name="email" placeholder="Email">
<button type="submit">送出</button>
</form>
</section>
</main>
<footer>
<p>版權所有 © 2025</p>
</footer>
</body>
</html>
html lang="zh-Hant"：文件語言為繁體中文
head 是用來定義網頁的 meta 資訊、標題、CSS 或 JS 引用
body：主要可視內容
header：網頁頁首區塊 nav + ul / li / a導航列（連結列）
main：主要內容區
footer：頁尾資訊
閱讀時可以關注：每個 link、script 引用的檔案是什麼？form 的 action 是什麼？動作由何處處理？CSS 樣式、JavaScript 行為會如何影響顯示？
可以使用開發者工具 (F12) 練習拆解不同網站，嘗試用瀏覽器把頁面切換到行動裝置 (Responsive 模式) 看原始碼／樣式變化，練習在檢查元素中暫時更改 CSS 或 HTML，看視覺效果如何改變。
如果你熟悉後端語言 (如 PHP, Node.js)，可以對照前端原始碼與後端輸出差異並閱讀開放原始碼網站 (GitHub 上的前端專案)，並對比瀏覽器中實際呈現，再使用自動化工具如 linter、HTML validator 來檢查原始碼合規性。
iThome鐵人賽
看影片追技術