iT邦幫忙

30dayshtml相關文章
共有 15 則文章
鐵人賽 Modern Web DAY 20

技術 Day 20 - CSS 顏色與背景

學習目標 認識 CSS 顏色的不同表示方式(色名、十六進位、RGB、HSL) 學會調整文字與背景顏色,確保對比度與可讀性 掌握 background-imag...

鐵人賽 Modern Web DAY 19

技術 Day 19 - CSS 盒模型的魔法

學習目標 理解 CSS 盒模型(Box Model)的四個層次:content、padding、border、margin 學會設定元素的大小與間距 認識 b...

鐵人賽 Modern Web DAY 18

技術 Day 18 - CSS 入門:顏色與文字樣式

學習目標 理解 CSS 的三種引入方式:行內樣式、內部樣式、外部樣式 學會使用選擇器鎖定元素 熟悉顏色的表示法(名稱、HEX、RGB、HSL) 認識文字相關屬...

鐵人賽 Modern Web DAY 17

技術 Day 17 - 表格進階與合併的魔法

學習目標 學會表格的進階結構 理解 rowspan 與 colspan 的用法 熟悉 <caption>、<thead>、<tb...

鐵人賽 Modern Web DAY 14

技術 Day 14 - 語意化標籤的魔法

學習目標 認識 HTML5 語意化標籤 熟悉 <header>、<nav>、<main>、<article>、...

鐵人賽 Modern Web DAY 13

技術 Day 13 - iframe 與嵌入內容的魔法

學習目標 理解 <iframe> 的用途與限制 學會嵌入其他網站內容(如 Google Map、YouTube) 認識 width、height、...

鐵人賽 Modern Web DAY 12

技術 Day 12 - 多媒體元素的魔法

學習目標 學會使用 <img>、<audio>、<video> 理解屬性:controls、autoplay、loop、...

鐵人賽 Modern Web DAY 10

技術 Day 10 - 表單進階魔法

學習目標 熟悉更多表單輸入型態:radio、checkbox、select、file 學會分組:使用 <fieldset> 與 <lege...

鐵人賽 Modern Web DAY 9

技術 Day 9 - 表單的魔法

學習目標 學會建立基本表單 <form> 熟悉輸入元件 <input>、<textarea>、<button&gt...

鐵人賽 Modern Web DAY 8

技術 Day 8 - 清單與表格的魔法

學習目標 熟悉三種清單:有序清單 <ol>、無序清單 <ul>、描述清單 <dl> 能靈活使用 <li> 條...

鐵人賽 Modern Web DAY 6

技術 Day 6 - CSS 選擇器的魔法圈

學習目標 熟悉元素、類別、ID、群組、子元素、後代等選擇器 了解常見偽類(:hover, :focus, :nth-child())的使用 建立選擇器優先度與...

鐵人賽 Modern Web DAY 5

技術 Day 5 - 頁面架構拼起來 🧩

為什麼學這些? 建立「頁面骨架」:讓內容有清楚區塊 可近性更友善:螢幕報讀器可直接跳到主要區塊 對 SEO 友善:搜尋引擎能理解頁面結構與主題 後續加 CSS...

鐵人賽 Modern Web DAY 4

技術 Day 4 - 各式各樣清單元素

為什麼先學清單? 條列重點(功能、規格、條件) 步驟流程(有順序) 詞彙解釋、FAQ(名詞 → 說明) 導覽列骨架(之後用 CSS 做外觀) 無序清單:&...

鐵人賽 Modern Web DAY 2

技術 Day 2 - 標題與段落的排版(進階版)

學習目標 -正確使用 h1 ~ h6 建立內容層級(每頁僅一個 h1)-用 <p> 表示段落,不用 <br> 堆疊空行-了解 <b...

鐵人賽 Modern Web DAY 1

技術 Day 1 - 踏入 HTML:從零開始

為什麼從 HTML 開始? 很多人第一次接觸網頁時,腦中會浮現: 五顏六色的排版 會動的動畫 互動按鈕 但如果直接跳到 CSS 或 JavaScript,會...