今天起床我就知道完蛋惹，沒睡飽夢做到正精彩，就被鬧鐘叫醒了，可惜又忘記紀錄有趣的夢境。
起床又昏又沉，我發現有個大問題，就是時間。因為與職訓地點太遠，交通時間太長，導致一天在課堂相關的時間竟到了13小時以上，更何況回家還要練習?(不可能的)，簡單記錄一下今天發生的事，要學新東西，又要看書，還要運動，當我時間管理大師膩!
我很懷念躺平的時光，每件事都有餘裕(但沒目標又啥都不想做)，現在則感覺有點太充實，感到有壓力，有壓力就容易睡不好，雖然我已經早睡早起惹，但至少要9小時才能感覺好(現在普遍睡不到7小時)。
今天上什麼，我完全沒看，糟糕中的糟糕，躺~。每次聽到一半回神都感覺 :
因為在教基礎，但卡住了，所以我開始清雲端硬碟為了後續可以放程式碼、圖片、所以把帳號的雜物都清一清(其實是腦袋已經放空了)。
事先聲明 : 時間有限，東西亂七八糟，想到什麼就寫什麼，隨便寫，會用ai幫忙，只是紀錄並非教學。
參考網址
問題整理
- HTML 的基本概念和用途。
- 為什麼是超文本標記語言？
- HTML 文件的結構（
html、head、body）。 - 基本標籤及其功能（如
p、h1-h6、ul、li、a、img）。 - 常用的屬性（
id、class、href、src）。 - 標籤能有多少種？哪些是必需的？
- 屬性能有幾個？哪些是常見的？
- 標籤與屬性的關係。
meta的定義和作用。- 為什麼
meta沒有結束標籤？ - 搜尋引擎看哪些
meta標籤？（如description、viewport）。 - 有
meta和沒有meta的差別。 - 絕對路徑和相對路徑的差異。
- 如何用圖表表示檔案之間的關係。
- 引入 CSS 時的注意事項（檔案格式、位置）。
實做練習題
- 將一串文字改成對應的顏色，「enjoylyingflat is cute」，enjoy → 紅色，lying → 綠色 ，flat → 黃色，is → 藍色，cute → 黑色，文字維持在同一行且字體樣式維持一樣。
- 你是一個初學者設計師，請設計一個「極簡的部落格模板」，包含：主標題與副標題、一篇文章的樣板：文章標題、圖片、兩段文字內容、一個導覽列（至少有三個導覽項目，例如：首頁、關於、聯絡）、要求：所有標籤要有意義（避免使用過多的
<div>），考慮不同標籤之間的用途與結構。
HTML + CSS + JavaScript 是什麼？
HTML（HyperText Markup Language）—— 結構
- 負責什麼： 定義網頁的結構和內容。
- 比喻： 是房子的骨架，提供框架。
- 用途：用標籤來描述內容（標題、段落、圖片、表單等）
CSS（Cascading Style Sheets）—— 樣式
- 負責什麼： 美化網頁的外觀和佈局。
- 比喻： 是房子的裝飾，負責塗上顏色、安排佈局。
- 用途：控制文字顏色、背景、字體大小、間距等、實現網頁的響應式設計（適配不同設備）。
JavaScript（JS）—— 行為
- 負責什麼： 增加互動功能和動態行為。
- 比喻： 是房子的電路，讓按鈕、燈光等可以運作。
- 用途：處理按鈕點擊、滑鼠移動、表單提交等交互行為、改變 HTML 或 CSS 的內容和樣式、通過 API 與伺服器溝通，實現數據的動態更新。
如何建立一個 HTML 檔案
- 使用任何文字編輯器 : 我們使用VSCODE
- 檔案名稱自由命名（如
index.html也可以enjoylyingflat.html）。 - 副檔名必須是
.html，這樣系統和瀏覽器才能識別為 HTML 文件。 - 按下
! 和 Tab鍵，或是 ! 和 空白鍵，儲存 - 在使用VSCODE找到剛剛建立的 HTML 檔案（例如
index.html）雙擊檔案，系統會自動用預設瀏覽器打開該檔案，或在檔案上 右鍵，選擇「打開方式」，選擇你想用的瀏覽器（例如 Chrome、Firefox、Edge 等）。 - 也可以使用 拖放 方法，將 HTML 檔案直接拖到瀏覽器窗口。
VSCODE快捷鍵
- 複製程式碼行：
Shift + Alt + 向上/向下鍵 - 移動程式碼行：
Alt + 向上/向下鍵 - 設定文字大小：直接調整
font size設定 - 縮排：
Tab - 格式化文件(自動排版)：
Shift + Alt + F - 分割編輯器視窗：
Ctrl + \\ - 搜尋：
Ctrl + F - 啟動偵錯：
F5 - 同時編輯多個相同的變數(單個) :
Ctrl + D - 同時編輯多個相同的變數(全選) :
Ctrl + Shift + L
參考網址 :
keyboard-shortcuts-windows.pdf
VSCODE套件(Extentions)
- Chinese (Traditional) – 切換成繁體中文
- Bracket Pair Colorization Toggler – 顯示成對的括號
- Auto Rename Tag – 自動同步修改 HTML 標籤的開頭和結尾
- Live Server – 本地快速啟動開發伺服器，即時預覽靜態網頁，查看修改效果
參考網址 :
Extensions for Visual Studio family of products | Visual Studio Marketplace
什麼是HTML
參考網址 :
HTML（HyperText Markup Language），中文「超文本標記語言」，是網頁的基礎語言，用來定義網頁的結構和內容。例如文字、圖片、清單、表格…等。
特點 :
- 標籤式語法（例如
<h1>、<p>、<img>等）。
來看看範例
<p>enjoylyingflat is cute</p>(左邊程式碼) vs enjoylyingflat is cute(右邊輸出)
標籤（Tag）
- 定義：標籤是 HTML 的基礎語法，用於告訴瀏覽器該內容的結構和用途，標籤用 尖括號(<>) 包裹，分為「開始標籤」(Opening tag)和「結束標籤」(Closing tag)。
- 開頭標籤：
<標籤名>（如<p>）。 - 結尾標籤：
</標籤名>（如</p>）。 - P.S 有些標籤沒有結尾部分（如
<img>和<br>）。
內容（Content）
- 定義：內容是標籤包裹住的文字、圖片或其他資料，展示在網頁上給用戶看的部分。
enjoylyingflat is cute是用戶可以直接看到的文字，屬於內容。
元素（Element）
- 定義： 元素是由「開始標籤 + 內容 + 結束標籤」組成的完整結構，或僅由單個標籤組成的自閉合標籤。
- 完整元素：
<p> enjoylyingflat is cute </p> - 標籤：
<p>和</p> - 內容：
enjoylyingflat is cute - 特殊情況：自閉合元素(有些元素沒有內容，也不需要結束標籤，稱為自閉合元素)
三者的關係
- 標籤 : 元素的外框，用來包內容。
- 內容 : 是元素內部的資料。
- 元素 : 標籤+內容 的組合。
簡單對比表格
| 概念 | 作用 | 例子 |
|---|---|---|
| 內容 | 用戶能直接看到的資料 | enjoylyingflat is cute |
| 標籤 | 定義內容的語法和結構 | <p> 和 </p> |
| 元素 | 標籤和內容的完整組合 | <p>enjoylyingflat is cute</p> |
屬性
- 屬性是在標籤上的細節描述，描述標籤的特性或行為。
- 格式：屬性通常以
屬性名="屬性值"的形式出現在 HTML 標籤中。屬性名是描述功能的名稱，屬性值則是對應的設定值。 - 位置：屬性通常出現在開始標籤
<tag>中，緊跟標籤名稱之後。 - 可以同時包含多個屬性：元素可以有多個屬性，彼此之間用空格分隔。
如 : <a href="<https://enjoylyingflat.com/>" target="_blank">範例連結</a>
皮卡丘的屬性XD。
id
- 獨一無二(唯一)的身分證，是 HTML 元素的一個屬性
- 有區分大小寫、至少包含一個字元、不能以數字開頭、不能包含空格
- 可識別性：當你要對這個標籤做事情（例如改變它的樣式、內容），就可以根據
id來定位。這就像看到身分證號碼，就知道是誰。
參考網址 :
meta的作用
<meta> 是一個 HTML 元素，用於向瀏覽器傳遞有關網頁的元信息（metadata）。這些信息通常不直接顯示在網頁上，但對於 SEO（搜索引擎優化）、響應式設計、編碼設置、網頁行為控制 等有重要作用。
<meta> 的常見用途
- 設定字符編碼 : 確保網頁正確顯示文字（特別是多語言網站）。
<meta charset="UTF-8"> - 設置響應式設計 : 控制網頁在不同設備上的顯示比例。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - SEO（搜索引擎優化）相關信息 : 幫助搜索引擎理解網頁內容或用途。
<meta name="description" content="這是一個介紹前端技術的網站"> <meta name="keywords" content="HTML, CSS, JavaScript, 前端開發"> - 網頁作者或版權信息
<meta name="author" content="你的名字">
HTML 常見架構與標籤
| 標籤 | 負責的區域或角色 | 用途 |
|---|---|---|
<header> | 頁面或區塊的標題部分 | 放置網站名稱、Logo、導航選單等與頁面頂部相關的內容 |
<footer> | 頁面的底部部分 | 放置版權資訊、聯絡方式、網站地圖、社交媒體連結等 |
<body> | 頁面的主要內容區域 | 包含整個 HTML 文件的可見部分，放置網頁主體內容 |
<main> | 頁面的主要內容 | 標記頁面中最核心的內容，每個頁面應只出現一次 |
<section> | 區段或章節 | 劃分內容的邏輯部分，通常帶有標題（如 <h2>） |
<div> | 無語義的容器 | 用於分組或包裝內容，當沒有其他更語義化的標籤可用時適用 |
<article> | 獨立完整的內容單元 | 用於博客文章、新聞、評論等可單獨存在或可重用的內容 |
<aside> | 輔助性內容 | 側邊欄、提示、相關連結等非主要內容 |
<nav> | 導航部分 | 放置網站的主導航或次導航（如目錄、標籤） |
<h1> ~ <h6> | 標題（主標題到次標題） | 定義內容的層次結構，用於標示標題的層級（<h1> 最重要，<h6> 最次要） |
<p> | 段落文本 | 書寫普通文字 |
<a> | 超連結 | 用於連結其他頁面或錨點 |
<img> | 圖像嵌入 | 插入圖片，並使用 alt 提供替代文字描述 |
<form> | 表單 | 用於收集用戶輸入，並提交資料到伺服器 |
<figure> | 自包含的媒體內容（如圖片或圖表） | 用於包裝圖片、插圖等，通常與 <figcaption> 搭配使用以提供描述 |
<figcaption> | 圖片或圖表的描述 | 為 <figure> 中的內容添加標題或說明 |
| 標籤 | 效果 | 用途 |
|---|---|---|
<b> | 加粗文字 | 使文字加粗，無語義上的強調，僅用於裝飾目的。 |
<i> | 斜體文字 | 將文字顯示為斜體，無語義上的強調，僅用於裝飾目的。 |
<s> | 顯示刪除線，表示文字不再正確或已被替代，但保留原內容作參考。 | |
<u> | 底線文字 | 為文字加底線，通常用於裝飾，現代設計中較少使用，避免與超連結底線混淆。 |
<strong> | 加粗並強調文字 | 表示語義上的強調，比 <b> 更有意義，適合標示重要內容。 |
<em> | 斜體並有語義強調 | 表示語義上的重點或情感強調，通常也會顯示為斜體，比 <i> 更有意義。 |
<del> | 標示刪除的文字，用於表示內容已被刪除，但仍保留可見。 | |
<ins> | 標示插入的文字 | 標示新增或插入的文字，通常會顯示為底線文字。 |
| 標籤 | 作用 | 範例程式碼 |
|---|---|---|
<h1> ~ <h6> | 定義標題，<h1> 為最高標題，<h6> 為最低標題。 | <h1>大標題</h1> |
<p> | 段落文字，預設會自動換行。 | <p>這是一段文字。</p> |
<hr> | 水平線，用於分隔內容。 | <hr> |
<br> | 手動換行，不產生新段落。 | 這是第一行。<br>這是第二行。 |
<pre> | 預格式化文字，保留原始的空格與換行。 | <pre>這是一段<br>預格式化的文字</pre> |
<div> | 區塊級元素，前後自動換行。 | <div>這是區塊元素</div> |
<span> | 行內元素，不會自動換行，常用於設置行內樣式。 | <span>這是行內元素</span> |
<ul> | 無序清單，使用項目符號（可透過樣式更改）。 | <ul><li>項目 1</li><li>項目 2</li></ul> |
<ol> | 有序清單，可透過 type 更改編號格式，start 設定起始值。 | <ol type="A" start="3"><li>項目 A</li><li>項目 B</li></ol> |
<dl> | 描述清單，包含描述術語 <dt> 和描述內容 <dd>。 | <dl><dt>HTML</dt><dd>超文字標記語言，用於編寫網頁。</dd></dl> |
<style> | 可用來更改清單樣式，例如改變無序清單的項目符號樣式。 | <style>ul { list-style-type: square; }</style> |
參考網址 :
常見的 HTML Entities
| 符號 | 名稱實體 | 數字實體 | 說明 |
|---|---|---|---|
< | < | < | 小於號 |
> | > | > | 大於號 |
& | & | & | 和符號（Ampersand） |
" | " | " | 雙引號 |
' | ' | ' | 單引號 |
| “ | |   | 不換行空白符 |
© | © | © | 版權符號 |
® | ® | ® | 註冊商標符號 |
€ | € | € | 歐元符號 |
¥ | ¥ | ¥ | 日元或人民幣符號 |
應用與重要性
- 顯示 HTML 標籤文字
- 插入空格
- 輸入不可見字符
- 避免語法衝突
- 提高語意清晰度
- 支持多語言與特殊字符
參考網址 :
<a> 元素整理
| 類型 | 作用 | 範例程式碼 |
|---|---|---|
| 基本語法 | 建立基本超連結，連結到指定的 URL。 | <a href="URL">連結文字</a> |
| 外部連結 | 連結到其他網站。 | <a href="<https://enjoylyingflat.com>">Enjoy Lying Flat 首頁</a> |
| 外部連結（新分頁） | 在新分頁中開啟連結，使用 target="_blank"。 | <a href="<https://enjoylyingflat.com>" target="_blank">Enjoy Lying Flat 首頁 (新分頁)</a> |
| 內部連結（檔案） | 連結到網站內的檔案。 | <a href="./about.html">內部網頁檔案</a> |
| 內部連結（圖片） | 連結到網站內的圖片。 | <a href="./images/enjoylyingflat.png">Enjoy Lying Flat 圖片</a> |
| 下載檔案 | 使用 download 屬性下載檔案。 | <a href="./images/enjoylyingflat.png" download>下載 Enjoy Lying Flat 圖片</a> |
| 信箱連結 | 使用 mailto: 連結到信箱，可指定多個收件人。 | <a href="mailto:[email protected]">聯絡 Enjoy Lying Flat</a> |
| 頁面內元素連結 | 使用 #id 連結到頁面內特定元素。 | <a href="#features">探索 Enjoy Lying Flat 特點</a><h1 id="features">特點章節</h1> |
| 回到頂部功能 | 連結到網頁頂部（空的 # 代表頁面頂部）。 | <a href="#">回到最上面</a> |