WEEK2 – DAY1 – 總是學不會

雖然聽得懂但實作真的是個大問題，當DEBUG卡住時，課程還是會一直進行。下午的時候老師提到，下個月需要完成一個小專題。其實我已經開始構思主題，因為只剩一個月的時間。考慮到下週才會學到 JavaScript，真正能用來實作的時間大約只有兩到三週。

這段時間，我需要思考小專題的功能與呈現，包括整個設計的線稿、實際呈現的樣子，以及如何實現互動功能，這些都需要仔細計劃。今天我看了很多相關的工具，例如 Figma、Bootstrap，還有一些可能會用到的工具，也開始嘗試研究它們的使用方法。

同時，我意識到自己面臨的一些問題。首先，我跟不上課程，CSS 的基礎不穩，未來在 CSS 和 SCSS 上可能會有困難。其次，我的 debug 速度太慢，對於很長的程式碼，常常難以看懂或整理成清晰的流程。此外，對於一些工具，例如 Node.js、Vite 和 Bootstrap，我都還不熟悉。甚至還需要思考是否要重新繪製設計稿，或是如何理解現有的 Figma 設計稿，因此也必須學習如何使用 Figma。

在基礎知識、工具操作以及實現想法的過程中，我可能都會遇到挑戰。不過，這次的專題我已經有了一個題目，這題目源於我個人一段失敗的記憶，雖然已經過去了一段時間，但我希望現在能努力完成它。

今天的心情很複雜，有一種「無能者的狂怒」，因為覺得有很多東西不會，但卻要做出一個完整的作品，壓力很大。回想起當初會報名這個班，其實有點倉促。原本計劃報下個月甚至更晚的課程，但因為選擇有限，也擔心拖延下去對未來也不知道好不好，所以毅然決然地報名了這次課程。

但在時間分配上，我感到非常被動。一天有很長的時間都綁在課程上，卻無法用自己想要的方式學習或嘗試。這不是說課程不好，而是覺得它不太適合我，但我又必須花很多時間在上面，導致回家學習和實作的時間非常緊湊。雖然我不確定，如果多給我一個月的時間是否真的能做好，但或許不會像現在一樣被動。

下午使用Figma，發現有很多ai可直接把設計稿轉成程式碼，我想試試看，結果Figma要轉dev模式，但dev要團隊付費版?免費的不給用，所以我的躺平計畫又遠了一些，無奈啊!

問題整理

• 為什麼使用 <nav> 作為導覽列的標籤比 <div> 更好？
• 當我們需要設置一個標題時，應如何選擇 <h1> 到 <h6> 的適合層級？
• HTML 的語意化元素對 SEO 有什麼幫助？
• 如何利用 CSS 偽類選擇器為表格中的第一欄與最後一欄設置不同的樣式？
• 如何使用 :nth-child(n) 為特定行設置樣式？
• 在什麼情況下應使用屬性選擇器（如 ^=、= 和 $=）？
• :hover 和 :focus 的應用場景有什麼不同？
• 偽類選擇器和偽元素的差別是什麼？可以一起使用嗎？
• 如何使用 ::before 和 ::after 在不改變 HTML 結構的情況下添加內容？
• 如何利用 HTML 的 pattern 屬性設置台灣手機格式的驗證？
• 當驗證失敗時，如何利用 CSS 為輸入框自動顯示錯誤符號（如 ✖）？
• 如何確保導覽列在不同的螢幕大小下都能良好顯示？是否需要額外的 CSS 技術（例如 Media Query）？
• 如果一個導覽列需要有多層次的結構（如下拉選單），應如何設計 HTML 與 CSS？
• 如何針對 Email 格式進行前端與後端的雙重驗證？
• 請設計一個表單，限制使用者輸入特定格式的身分證字號，並解釋如何設定驗證規則。
• 使用屬性選擇器設計多個連結樣式，並解釋每個樣式如何根據屬性值應用。
• 如何設計一個超連結，當滑鼠懸停時背景顏色改變，當點擊時去除底線？

實作題目

1. 建立導覽列
   • 使用 <nav> 包裹 <ul> 和 <li>。
   • 點擊各選項導向：
     • HTML：https://www.w3schools.com/html/default.asp
     • CSS：https://www.w3schools.com/css/default.asp
     • JavaScript：https://www.w3schools.com/js/default.asp
2. 設計驗證表單
   • 請建立以下輸入框並添加對應的驗證：
     1. Email 格式驗證。
     2. 限制大小寫英文輸入。
     3. 台灣手機格式驗證。
     4. 身分證字號驗證。
3. 應用屬性選擇器
   • 撰寫包含多個超連結的段落，依據屬性值（^=, =, $=）設置不同的樣式。

HTML Semantic Elements

• 定義語意化的標籤，使代碼更易讀且有助於 SEO。
• 例子：<header>, <nav>, <footer>, <article>, <section>。
• 參考資料：HTML5 Semantic Elements

表格製作

• 使用 <table>, <tr>, <td> 建立表格。
• 使用 CSS 設定樣式，如 border-collapse: collapse; 簡化邊框顯示。
• 利用偽類選擇器設置樣式：
  • :first-child：設置第一欄文字為紅色且粗體。
  • :last-child：設置最後一欄文字為藍色且粗體。
  • :not()：設置非第一列背景色為淺綠。
  • :nth-child(n)：特定列背景色為淺藍。

CSS 選擇器與屬性

• 屬性選擇器：
  • ^=：選擇 href 屬性以 http 開頭的連結，字體大小調整為 2rem。
  • =：選擇 href 屬性包含 pseudo 的連結，文字顏色設定為 tomato。
  • $=：選擇 href 屬性以 selectors.asp 結尾的連結，背景色設為 lightblue。
• 特殊狀態：
  • :hover：設定滑鼠經過的樣式。
  • :focus：輸入框取得焦點時背景色改為 greenyellow。
  • :valid / :invalid：輸入框驗證通過與不通過的樣式。

1. 偽元素
   • ::before：在元素前面加上內容。
   • ::after：在元素後面加上內容，例如表單驗證通過加上 ✓，不通過加上 ✖。

表單驗證與互動樣式

1. 單選按鈕：
   • 利用偽類調整滑鼠經過的樣式。
2. 輸入框限制：
   • Email：只能接受 Email 格式。
   • 文字輸入框：限制輸入大小寫英文。
   • 電話：台灣手機格式（09xxxxxxxx）。
   • 身分證字號：符合格式（英文字母 + 數字）。

---

整理後的表格展示

功能	HTML 標籤/屬性	CSS 偽類/偽元素	範例
表格樣式設定	<table>, <tr>, <td>	:first-child, :nth-child	每列第一欄文字設置紅色粗體，特定列背景為淺藍色
表單驗證	<input type="email">, <input pattern>	:valid, :invalid	驗證通過加上 ✓，驗證失敗加上 ✖
屬性選擇器	href^=, href*=, href$=	無	篩選 href 屬性開頭、包含或結尾的文字進行樣式設定
偽元素	無	::before, ::after	在內容前後加上符號或文字，表單驗證狀態提示

偽類 (Pseudo-classes)

定義

偽類用於選擇元素的「特定狀態」或「特定位置」。它不創建新的 DOM 元素，而是針對已有的 HTML 元素在特定情況下應用樣式。

常見特性

• 基於元素的「狀態」或「結構」。
• 偽類名稱以單個冒號 (:) 開始。
• 不會影響 DOM 結構，只影響樣式。

常見偽類範例

以下是常用的偽類：

偽類	描述	範例
:hover	滑鼠懸停在元素上時應用樣式	a:hover { color: red; }
:focus	元素獲得焦點時應用樣式	input:focus { outline: blue; }
:nth-child(n)	選擇父元素中第 n 個子元素	li:nth-child(2) { color: green; }
:first-child	選擇父元素中的第一個子元素	p:first-child { font-weight: bold; }
:not(selector)	選擇不符合指定條件的元素	div:not(.active) { opacity: 0.5; }

---

偽元素 (Pseudo-elements)

定義

偽元素用於選擇元素的「部分內容」或在元素內創建一個虛擬的區塊。它通常是用來裝飾特定部分的元素，或者插入樣式上的內容。

常見特性

• 通常用於操作元素的「特定部分」，如文字的首字母、第一行，或額外插入的內容。
• 偽元素名稱以雙冒號 (::) 開始（CSS3 中引入）。
• 會在渲染時創建「虛擬元素」，但不改變實際 DOM 結構。

常見偽元素範例

以下是常用的偽元素：

偽元素	描述	範例
::before	在元素的內容前插入虛擬內容	p::before { content: '👉 '; }
::after	在元素的內容後插入虛擬內容	p::after { content: ' 👈'; }
::first-letter	選擇元素中的第一個字母	p::first-letter { font-size: 2em; }
::first-line	選擇元素中的第一行文字	p::first-line { font-weight: bold; }

主要差別對比

特性	偽類 (Pseudo-classes)	偽元素 (Pseudo-elements)
作用對象	操作整個元素的「狀態」或「結構中的位置」	操作元素內的「特定部分」或「新增內容」
語法	使用單冒號 (:)	使用雙冒號 (::)
範例	a:hover（滑鼠懸停時）	p::before（在段落前插入內容）
對 DOM 的影響	不會新增任何內容或元素	虛擬創建內容，但不影響實際 DOM
應用場景	互動效果、結構定位	首字母樣式、插入虛擬裝飾內容

課程內容並不全，但沒辦法，只能以後回來複習時再補東西。