enjoylyingflat的部落格

昨天想太多，所以沒有睡多少，文章還沒寫+沒看新內容，也不知道今天前端列車會飆車到哪裡。到了上課地方，到附近的早餐店，隨便點就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）

表單、表格、路經與嵌入

//media ├── lyingflat.jpg (圖片檔) ├── lyingflat.mp4 (影片檔) ├── lyingflat_poster.jpg (影片封面圖)

路徑

相對路徑 (Relative Path) : 依據當前檔案位置尋找目標。

• ./：當前資料夾。
• ../：上一層資料夾。
• ../../：上上層資料夾。

絕對路徑 (Absolute Path) : 包含完整的 URL 或磁碟路徑，例如 C:\\images\\lyingflat.jpg

為何使用相對路徑？

相對路徑更靈活，適合網站部署於不同伺服器或目錄時的管理需求。

今天教的內容不多，檔案位置則是觀念問題，要理解檔案的位置。