網路上很多分享 HTML, CSS 的資源，但很多超級多內容，一開始在學的時候以為每個指令都要背，實際上只要知道大方向跟邏輯，學會查就好了。本篇文章會記錄學習重點，和免費學習的資源。
HTML、CSS、JavaScript 差在哪裡？
👉 HTML = 骨架 🏗️（負責結構）負責標記內容，決定元素的位置與層級，他不是程式語言喔！- 像是房子的 骨架，沒有裝潢，但有基本的房間、牆壁。
👉 CSS = 皮膚 & 衣服 🎨（負責美化）
負責美化 HTML，讓畫面更漂亮，調整顏色、大小、對齊方式等
- 像是給房子粉刷油漆、擺放家具，讓它變得好看。
- 可以改變 顏色、字體大小、背景、版面配置 等。
👉 JavaScript = 大腦 & 肌肉 🧠💪（負責互動 & 動態行為）
讓頁面有互動，可以處理用戶操作、改變畫面、與後端溝通
- 像是房子裡的 電燈開關、門鈴、電梯，使用者可以操作它們，讓它產生變化。
- 用來實現 點擊按鈕變色、彈出視窗、表單驗證、動畫、與後端 API 連接 等功能。
下圖是前端網頁的組成、HTML、CSS、JavaScript
在VS code 裡面的右上角框框，可以同時開不同的程式檔案。
HTML in 100 Seconds
HTML 並不是程式語言，他是標記分別是大標 小標和層級，而CSS 則是調整美觀用的，不一定字體大或是最上面的就是H1。
我們可以用 W3 Schools 的互動介面練習，如果你想要真的做網頁，也可以參考我前面的文章。
https://www.w3schools.com/html/default.asp
HTML + CSS: 按 F12 用開發者工具查看網頁 HTML 架構與 CSS 設定，建議先用 Mircrosoft Edge 比較容易對照。下圖這些由< > 組合的就是 HTML 標籤。
當鼠標放到 Head 就會顯示對應的區塊
介紹幾個常聽到的HTML名詞
🏗 HTML 基本概念 & 常見名詞
1️⃣ HTML 標籤 (Tag) & 屬性 (Attribute)
HTML 是用標籤組成的，每個標籤有不同的屬性：
- 區塊 (Block) 元素：會自動換行，例如
<div>,<p>,<h1>... - 行內 (Inline) 元素：不會換行，例如
<span>,<a>,<strong>... - 語意化 (Semantic) 元素：有清楚的語意，告訴瀏覽器與開發者「這是什麼內容」，例如
<article>,<section>,<header>...，常用於內容的側邊攔、頁首 - 非語意化 (Non-semantic) 元素：沒有明確意義，用來排版的容器。例如
<div>,<span>...特別用區塊特別標出來 - 自閉合 (Self-closing) 標籤：不需要
</>前後都要包，例如<img>,<br>,<input>
以下範例使用 div 是因為之後 CSS 設計可以單獨美化這一區塊
<div class = "container">
<h1>大標題<h1>
<p>這是一段內容<p>
<img src="image.jpg" alt="一張圖片">
</div>
非語意化元素還有一個用途，
CSS 搭配 <div> 讓區塊變美：
<style>
.container {
width: 80%;
margin: 0 auto; /* 讓區塊置中 */
padding: 20px;
background-color: lightgray;
border-radius: 10px;
}
</style>
<div class="container">
<h1>這是標題</h1>
<p>這是一個段落內容。</p>
</div>
💡 效果：
width: 80%→ 限制內容寬度，不會太窄或太寬，這部分會延伸到同個網頁在不同裝置的設計，譬如平板跟手機看的畫面不一樣。margin: 0 auto→ 讓整個<div>置中padding: 20px→ 內距，讓內容不要貼太近background-color: lightgray→ 加上灰色背景border-radius: 10px→ 讓區塊的角變圓潤
沒有 <div> 的話，這些樣式可能要套在 body 或個別標籤上，會變得不好管理！
在網頁開啟F12，往下滑會看到Width, margin...
2️⃣ <head> & <body> 🧠+🦵
HTML 主要分為 <head> 和 <body>：
<head>：存放 隱藏資訊，如標題 (<title>)、CSS、JS、SEO 相關資訊等。<body>：顯示 真正的內容，如標題、文字、圖片、表格等。
🔹 範例：
<!DOCTYPE html>
<html>
<head>
<title>Bicky 部落格</title>
</head>
<body>
<h1>越南放大鏡</h1>
<p>外派的故事</p>
</body>
</html>
3️⃣ 標題 & 段落 📢📜
HTML 有 6 級標題 (<h1> ~ <h6>) ，<p> 用來表示段落。
🔹 範例：
<h1>我是 H1 最大標題</h1>
<h2>我是 H2 標題</h2>
<h3>我是 H3 標題</h3>
<p>這是一個段落文字。</p>
4️⃣ 連結 (<a>) 🔗
<a> 標籤用來建立超連結，可以連到其他網站或內部頁面。
🔹 範例：
<a href="https://www.google.com" target="_blank">點我開啟 Google</a>
5️⃣ 圖片 (<img>) 🖼
使用 <img> 標籤來顯示圖片，src 指定圖片網址，alt 是替代文字（無法顯示時用）。
🔹 範例：
<img src="photo.jpg" alt="這是一張漂亮的風景照片">
6️⃣ 頁面標題 & Favicon 🏷🔖
<title>：設定瀏覽器標題列顯示的文字。<link rel="icon">：設定網頁的小圖標（Favicon）。- 這個沒辦法在w3school跑，以下推薦一個製作網頁小圖標的方式。這功能我沒有試成功，推測要把圖片變成網址才可以跑嗚嗚
如果你要讓 favicon 從網路載入，你可以上傳 .ico 到 GitHub, Imgur, Google Drive, 網站伺服器 等地方，然後用 絕對網址：
🔹 範例：
<head>
<title>我的網站</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
7️⃣ 表格 (<table>) 📊
表格用 <table>，裡面用 <tr> 代表列、<th> 代表標題、<td> 代表欄位。
🔹 範例：
<table border="1">
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>小明</td>
<td>25</td>
</tr>
</table>
8️⃣ Class vs ID
- Class (
.)：適用於多個元素，適合共用樣式。 - ID (
#)：一個頁面內 唯一，適合用來標識特定元素。
🔹 範例：
<div class="box">這是 class，很多元素可以共用</div>
<div id="unique-box">這是 ID，每頁只會有一個</div>
9️⃣ 表單 (<form>) 📝
表單用來收集用戶輸入，包括文字框、按鈕、選擇器等。
🔹 範例：
<form>
<label for="username">姓名：</label>
<input type="text" id="username" name="username">
<br>
<label for="email">Email：</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="送出">
</form>
🔟 列表 (<ul> & <ol>) 📝
- 無序列表 (
<ul>)：項目符號 (•) - 有序列表 (
<ol>)：數字 (1, 2, 3...)
🔹 範例：
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>