網頁HTML、CSS、JavaScript 比較與 必修資源分享 - HTML 篇
網路上很多分享 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>
10會員
53內容數
雙重身份：越南放大鏡 X 下班資工系
政大東南亞語言學系是我接觸越南語的起點，畢業後找越南外派工作的生活跟資訊時，發現幾乎都是清單式的分享，很難身歷其境。所以我希望「越南放大鏡」可以帶讀者看到更多細節和深入的觀察。
-
下班資工系則是自學資工系的課程內容，記錄實際操作的過程，學習理論的過程。希望可以跟讀者一起成長。
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
要如何利用 HTML 標籤來增加網頁的結構性呢？HTML 標籤提供了 Google 爬蟲更多有用的資訊，讓爬蟲在爬行網站時可以更輕鬆且正確地分析網頁內容。本文將為你介紹 HTML 對於 SEO 的重要性以及 10 個常見的 HTML 語法。｜SEO
HTML 是什麼？
超文本標記語言（Hyper
資訊架構就像是網站的地圖，讓用戶快速找到所需的資訊。好的資訊架構可提升使用者滿意度、強化 SEO、增進擴充性、達成商業目標。資訊架構可透過使用者訪談、卡片分析、競品分析、使用者測試等方法設計。在設計資訊架構時，需考量用戶的認知方式、目標客群、資訊分類等因素。定期檢驗資訊架構，才能確保用戶體驗。
圖片大小
漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具
隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
在當今這個數位化的時代，網頁無處不在，我們每天都在使用互聯網瀏覽網頁，查找資訊、分享內容、購物等等。然而，網頁的背後是什麼？為什麼網頁能夠呈現出如此多元化的內容？
HTML（超文字標記語言）作為網頁設計的基礎語言，不僅影響了網頁的美學設計，同時也對網頁的功能性和互動性產生了重要影響。本文將探討HTML如何在網頁設計中影響美學與功能性，並進一步探討其如何與其他技術相結合，共同提升網頁設計的品質和效果。
首先，HTML在網頁設計中對美學方面的影響主要體現在網頁的
在當今數位化的時代，網頁設計已不僅僅是簡單地展示內容，更成為了吸引用戶和提升用戶體驗的重要手段。在這樣的背景下，HTML（超文字標記語言）作為網頁設計的基礎語言之一，對於網頁設計的靈活性和創意性有著深遠的影響。
想要自學 HTML 嗎？HTML 是一個相對簡單的標記語言，適合初學者。透過免費資源和互動平臺，你可以輕鬆地學習 HTML，並逐步提高技能。除了 HTML，你還可以瞭解免費網頁設計軟體，如 VS Code 和 Sublime Text。加油吧！
在當今數位化時代，網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象，還是個人展示創意作品，一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局，更包含了使用者體驗（UX）、使用者介面（UI）和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進，網頁設計已經
要如何利用 HTML 標籤來增加網頁的結構性呢？HTML 標籤提供了 Google 爬蟲更多有用的資訊，讓爬蟲在爬行網站時可以更輕鬆且正確地分析網頁內容。本文將為你介紹 HTML 對於 SEO 的重要性以及 10 個常見的 HTML 語法。｜SEO
HTML 是什麼？
超文本標記語言（Hyper
資訊架構就像是網站的地圖，讓用戶快速找到所需的資訊。好的資訊架構可提升使用者滿意度、強化 SEO、增進擴充性、達成商業目標。資訊架構可透過使用者訪談、卡片分析、競品分析、使用者測試等方法設計。在設計資訊架構時，需考量用戶的認知方式、目標客群、資訊分類等因素。定期檢驗資訊架構，才能確保用戶體驗。
圖片大小
漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具
隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
在當今這個數位化的時代，網頁無處不在，我們每天都在使用互聯網瀏覽網頁，查找資訊、分享內容、購物等等。然而，網頁的背後是什麼？為什麼網頁能夠呈現出如此多元化的內容？
HTML（超文字標記語言）作為網頁設計的基礎語言，不僅影響了網頁的美學設計，同時也對網頁的功能性和互動性產生了重要影響。本文將探討HTML如何在網頁設計中影響美學與功能性，並進一步探討其如何與其他技術相結合，共同提升網頁設計的品質和效果。
首先，HTML在網頁設計中對美學方面的影響主要體現在網頁的
在當今數位化的時代，網頁設計已不僅僅是簡單地展示內容，更成為了吸引用戶和提升用戶體驗的重要手段。在這樣的背景下，HTML（超文字標記語言）作為網頁設計的基礎語言之一，對於網頁設計的靈活性和創意性有著深遠的影響。
想要自學 HTML 嗎？HTML 是一個相對簡單的標記語言，適合初學者。透過免費資源和互動平臺，你可以輕鬆地學習 HTML，並逐步提高技能。除了 HTML，你還可以瞭解免費網頁設計軟體，如 VS Code 和 Sublime Text。加油吧！
在當今數位化時代，網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象，還是個人展示創意作品，一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局，更包含了使用者體驗（UX）、使用者介面（UI）和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進，網頁設計已經