HTML&CSS筆記

列表模板

HTML 相關

HTML 標題教學

標題的定義

在HTML中，<h1> 到 <h6> 標籤用於定義標題，數字越小代表標題層級越高。

HTML

<h1>這是一個主標題</h1>
<p>這是一段描述文字。</p>
<h1> 標籤是用來定義最重要的主標題。
<p> 標籤則用於包裹一般的段落文字。

CSS 樣式教學

CSS 的定義

使用CSS來設計標題和段落的樣式，讓網頁更加美觀。

CSS

h1 {
    color: #00796b;
    font-size: 28px;
}

p {
    color: #555;
    font-size: 16px;
}
h1 標籤設定為深綠色，字體大小為28px。
p 標籤設定為灰色，字體大小為16px。

Info / Summary 列表

  • 若子元素為行內元素或行內塊元素，給父元素加上: text-align: center;。
  • 若子元素為塊元素，給父元素加上: margin: auto;。
  • font、background、border 需要遵守順序。
  • list-style、flex 的順序可以變動，但值必須有效。
  • 如果不確定縮寫順序，建議拆成單獨屬性，確保正確性。

正確示範/錯誤示範模板

✅ 正確範例

div {
    background: #f00 url("bg.jpg") no-repeat center/cover fixed;
}

❌ 錯誤範例

div {
    background: center/cover #f00 fixed url("bg.jpg") no-repeat;
}

優點/缺點模板

單行

✅ 優點： 符合標準行為，清楚直覺，不影響其他 CSS 行為。

❌ 缺點： 會佔用內部空間（但 1px 幾乎無感）。

多行列表

✅ 優點

  • 語義清晰，專門為清除浮動設計。
  • 兼容性好，在大多數瀏覽器中都能正確運作。
  • 不會隱藏超出內容（相比 overflow: hidden 更靈活）。

❌ 缺點

  • 內容溢出會被裁剪，不適合需要顯示超出內容的情況。
  • 如果有陰影或下拉選單，可能會被截斷。
  • 對於某些情況下的滾動或絕對定位元素，可能導致意料之外的結果。

表格模板

項目 描述 範例 備註
HTML 超文本標記語言 <div></div> 結構化網頁內容
CSS 層疊樣式表 color: red; 設計網頁樣式
JavaScript 網頁互動性 alert('Hello'); 增加動態效果
Python 後端程式語言 print("Hello") 伺服器開發

列表模板

HTML 相關

CSS 相關

JavaScript 相關