昨天想太多，所以沒有睡多少，文章還沒寫+沒看新內容，也不知道今天前端列車會飆車到哪裡。到了上課地方，到附近的早餐店，隨便點就80塊，經過麥當勞才意識到，原來麥當勞的早餐可能比我吃的早餐還便宜，這究竟是什麼巫術!
下午遇到chatgpt鬼打牆(給出一大堆子虛烏有的內容)，花了好幾個小時在釐清與嘗試問題。
我用 WordPress 架站的目的之一，是希望能夠方便地將文章上傳到網站。那麼為什麼我一開始會這麼積極地想要改進 WordPress 呢？原因是我希望除了能放上自己的文章外，還能增加一些有趣的小元件，或者我想呈現的內容，例如小清單、跳轉畫面，甚至可以互動的 GIF 等。不過我知道在 WordPress 上很難簡單自定義這些東西，所以後來也明白，或許不應該嘗試用 WordPress 來實做這些功能。
但是，我看到很多技術類的部落格，內容非常完整。比如說，當我瀏覽一個技術博客時，會注意到它的程式碼部分可能有以下特點：像 Notion 一樣可以自動偵測程式語言，並針對程式碼進行語法高亮，甚至可以做更多的格式調整。我覺得這些功能很重要。然而，之前推薦的幾個外掛，我試過後發現效果都不太理想，有些甚至根本沒有任何變化。所以，我一直在想，問題是不是出在我這邊。結果都是chatgpt的鍋。
最後，我想我應該從零開始建置一個網站，這可能才是最好的選擇。
另外，今天下午我傳給chatgpt一個老師課堂上的練習題，是關於如何用 HTML 表格實現表格+圖片。這題目其實是讓我們練習 HTML 表格功能。chatgpt給出的解答輸出過很多次，但每次都不對。chatgpt使用的格式往往是基於自己的預設，但其實根本不需要那麼多 CSS 樣式。比如說，這題只是讓新手建立正確的觀念不是追求視覺上的華麗，使用簡單的 HTML 表格，再加一些類別選擇器的 CSS 就能解決，根本不複雜，但chatgpt無關內容，反而不符合題目的要求。
問題整理
<ul>和<ol>有什麼差別？<dl>、<dt>、<dd>各自的用途是什麼？- 怎麼用
<li>來定義清單項目？ - 相對路徑與絕對路徑有什麼差別？
./和../分別代表什麼？- 如何從相對路徑中存取圖片
./media/cat.jpg？ - 絕對路徑為什麼不建議在專案中使用？
<img>標籤有哪些屬性？各自有什麼作用？- 如何利用
alt提供替代文字？它的作用是什麼？ - 高度設定為百分比時，為什麼有時會失效？
<th>和<td>有什麼不同？- 如何透過
rowspan與colspan合併儲存格？ - 如何利用
<iframe>嵌入 YouTube 或 Google 地圖？ <iframe>的allowfullscreen和referrerpolicy有什麼作用？- 如何使用
<video>標籤，讓影片播放時有控制面板並能循環播放？ - 父子元素的 CSS 屬性如何繼承？哪些屬性不會繼承？
- 給父元素設定
margin和padding，子元素的大小會受到影響嗎？ border、padding、margin的功能與差異是什麼？- 如何用 CSS 設定邊框樣式為
solid，並加上間距？ px、em和%這些單位有什麼差異？什麼時候該用它們？rem的相對參考對象是什麼？- 當 HTML 檔案使用 Live Server 開啟時，路徑會如何處理？
- 使用
file://開啟時，為什麼絕對路徑會有效？ - 使用
<figure>包裝圖片和<figcaption>描述有什麼好處？ <div>是否可以代替<figure>？為什麼？- 如何設計目錄結構來管理專案中的圖片與 CSS 檔案？
- 為什麼好的目錄結構能提升維護性？
- 表格的設計應該考慮哪些語意化與可讀性原則？
- 在響應式設計中，如何處理表格過於寬大的問題？
- 如果同時使用 HTML 屬性（如
width="200"）和 CSS 設定（如style="width:100%"），哪一個會優先作用？為什麼？ - 當嵌入
<iframe>或<video>時，如何處理不同螢幕尺寸的適配問題？ - 在使用
rowspan和colspan時，怎麼確保表格結構的正確性？
實做練習題
建立一個個人簡介頁面，包含以下功能與結構：
- 使用清單 (
ul和dl) 表示個人興趣與技能。 - 嵌入圖片，並用相對路徑管理圖片的不同位置。
- 使用表格呈現時間表，包含跨欄與跨列的合併。
- 使用 CSS 調整頁面排版，並套用盒模型樣式。
建立一個展示頁面，結合圖片、影片、多媒體內容，以及不同 CSS 單位的使用。
- 使用無序清單列出三個作品名稱，為每個作品使用描述清單解釋。
- 使用
<figure>嵌入三張作品圖片，並添加<figcaption>。 - 嵌入一段本地影片，添加控制面板。
- 使用
<iframe>嵌入 Google 地圖顯示你喜歡的地點。 - 調整圖片、影片與地圖的大小，使用固定單位（如
px）相對單位（如%和rem）
表單、表格、路經與嵌入
| 標籤或屬性 | 功能與用法 | 範例程式碼 |
|---|---|---|
<ul> / <ol> | 無序/有序清單，用於列出項目。 | <ul><li>項目一</li></ul> / <ol><li>第一項</li></ol> |
<dl>, <dt>, <dd> | 描述清單，用於名詞與描述的對應。 | <dl><dt>HTML</dt><dd>超文本標記語言</dd></dl> |
<img> | 嵌入圖片，src 設定圖片來源，alt 提供替代文字。 | <img src="./media/lyingflat.jpg" alt="躺平圖片"> |
| 相對/絕對路徑 | 指定目標檔案位置，推薦用相對路徑以保持靈活性。 | 相對路徑: <img src="./media/lyingflat.jpg">絕對路徑: <img src="C:/images/lyingflat.jpg"> |
<table> / <td> | 表格的基本單位：表格容器與儲存格。 | <table><tr><td>內容</td></tr></table> |
colspan / rowspan | 合併儲存格：橫向 (colspan) 或縱向 (rowspan)。 | <td colspan="2">跨兩欄</td> / <td rowspan="2">跨兩列</td> |
<iframe> | 嵌入外部內容，例如 YouTube 或 Google 地圖。 | <iframe src="<https://www.youtube.com/embed/lyingflat>"></iframe> |
<video> | 嵌入本地影片，支援屬性如 controls、loop、poster。 | <video src="./media/lyingflat.mp4" controls loop poster="./media/lyingflat_poster.jpg"></video> |
/media
├── lyingflat.jpg (圖片檔)
├── lyingflat.mp4 (影片檔)
├── lyingflat_poster.jpg (影片封面圖)
路徑
相對路徑 (Relative Path) : 依據當前檔案位置尋找目標。
./：當前資料夾。../：上一層資料夾。../../：上上層資料夾。
絕對路徑 (Absolute Path) : 包含完整的 URL 或磁碟路徑，例如 C:\\images\\lyingflat.jpg
為何使用相對路徑？
相對路徑更靈活，適合網站部署於不同伺服器或目錄時的管理需求。
今天教的內容不多，檔案位置則是觀念問題，要理解檔案的位置。