# Day01. HTML 基礎：文件骨架與常用標籤入門

2025 iThome 鐵人賽

DAY 1

Modern Web

30天技能樹養成：開啟前端冒險秘境系列第 1 篇

17th鐵人賽

evangeline_77

團隊nutc imac

2025-09-15 13:38:43

54 瀏覽

分享至

HTML（Hypertext Markup Language）--「超文本標記語言」，它是構建網頁的基礎，定義了網頁的結構，主要是在告訴瀏覽器這段文字是什麼東西，像是標題、段落、圖片、連結。就像一本書的目錄與內容結構，方便人和電腦理解。

就像開 RPG 一樣，先創建角色，如果沒有骨架，那畫什麼都是黏土怪，所以我們從 HTML 的骨架開始。

<!DOCTYPE html>
<html lang="zh-Hant">    <!-- 網頁語言設定：繁體中文 -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 頁面</title>   <!--主標題 -->
</head>
<body>
  <h1>嗨，我是XXX！</h1>
  <p>123456789</p>
  <img src="me.jpg" alt="大頭照">
  <a href="https://example.com">連結</a>
</body>
</html>

<!DOCTYPE html>
告訴瀏覽器我們用的是 HTML5文件
<html lang="zh-Hant">
設定語言為繁體中文，讓搜尋引擎和螢幕閱讀器知道你的網頁語言，對 SEO 與無障礙很重要。
<meta charset="UTF-8">
防止亂碼的救星，UTF-8 幾乎是全球通用編碼
<meta name="viewport"...>
響應式設計（RWD）的基礎，讓手機版不會被放大縮小到奇怪比例
<title>
瀏覽器分頁的標題。
<body>
網頁主要內容都放這裡
<h1> ~ <p> ~ <a>
這些是 HTML 的基本積木，用語意（semantic）來定義內容的角色

學習心得

第一次碰 HTML，我才發現原來網頁不是一開始就有漂亮的按鈕和動畫。
就像畫畫，也是先想好想要畫出什麼，才從骨架開始慢慢變成有血有肉的角色。
我在寫這份骨架的時候，其實一度覺得「這麼簡單，有什麼好學的？」但當我越深入了解，就發現其實有很多不同方法能做出相同介面......，但如果基礎做不好，後面再漂亮的 CSS 都救不了你。

今天算是簡單先和 HTML 打個招呼，明天才會再進一步聊聊更多結構化的內容。