鐵人檔案
是一場把前端學習化為奇幻冒險的挑戰紀錄。每天的程式錯誤都像潛伏的惡靈，透過不斷練習 HTML、CSS、JavaScript 等技能，就像鍛造魔法道具與煉金法術，一步步驅逐 Bug。文章風格不只是技術筆記，而是結合故事感與實戰心得，讓學習過程更有趣、更有畫面感。這不僅是前端技能的整理，也是成長旅程的冒險日誌，陪伴自己從新手到能揮舞驅魔杖的開發者，見證「寫程式其實也能很中二」的快樂過程。
為什麼從 HTML 開始？ 很多人第一次接觸網頁時，腦中會浮現： 五顏六色的排版 會動的動畫 互動按鈕 但如果直接跳到 CSS 或 JavaScript，會...
學習目標 -正確使用 h1 ~ h6 建立內容層級（每頁僅一個 h1）-用 <p> 表示段落，不用 <br> 堆疊空行-了解 <b...
為什麼先學超連結與圖片？ 超連結 (<a>) 讓使用者可以在頁面間移動、跳到同頁章節，或啟動動作（寄信、打電話、下載）。 圖片 (<im...
為什麼先學清單？ 條列重點（功能、規格、條件） 步驟流程（有順序） 詞彙解釋、FAQ（名詞 → 說明） 導覽列骨架（之後用 CSS 做外觀） 無序清單：&...
為什麼學這些？ 建立「頁面骨架」：讓內容有清楚區塊 可近性更友善：螢幕報讀器可直接跳到主要區塊 對 SEO 友善：搜尋引擎能理解頁面結構與主題 後續加 CSS...
學習目標 熟悉元素、類別、ID、群組、子元素、後代等選擇器 了解常見偽類（:hover, :focus, :nth-child()）的使用 建立選擇器優先度與...
學習目標 學會使用 <a> 標籤建立超連結 熟悉 href、target、title 等常見屬性 能正確插入圖片 <img>，理解 s...
學習目標 熟悉三種清單：有序清單 <ol>、無序清單 <ul>、描述清單 <dl> 能靈活使用 <li> 條...
學習目標 學會建立基本表單 <form> 熟悉輸入元件 <input>、<textarea>、<button>...
學習目標 熟悉更多表單輸入型態：radio、checkbox、select、file 學會分組：使用 <fieldset> 與 <lege...
