HTML CSS part 1

參考講義

HTML 基本結構

一個最基本的 HTML 文件通常會包含 html、head、body，也建議在 head 中加上 meta charset="utf-8"。

<html>
  <head>
    <meta charset="utf-8">
    <title>我的第一個網頁</title>
  </head>
  <body>
    這裡是網頁內容
  </body>
</html>

charset 是字元集設定，用來告訴瀏覽器這份文件的文字要用什麼編碼方式解讀。通常會使用 utf-8，因為它能正確顯示中文、英文和大多數常見符號。如果沒加，瀏覽器可能用錯誤的編碼方式讀取，造成亂碼。

常見 HTML 標籤

div 和 span

div 和 span 常被稱為 dummy tag，也就是本身沒有特殊語意，主要拿來包內容、方便排版或套樣式。

div 通常用來包一整塊內容
span 通常用來包一小段文字

<div>
  這是一整塊區域
  <span>這是一小段文字</span>
</div>

h1 p a

下面這個例子同時示範標題、段落和連結。

<h1>我的網站</h1>
<p>
  歡迎來到我的網站，
  <a href="https://example.com">點這裡前往範例網站</a>
</p>

a 是超連結標籤，href 是它的屬性，用來指定連結目標。 HTML 很多標籤都會透過屬性提供額外資訊。

ol 和 li

ol 是有順序清單，li 是清單項目，也可以做巢狀清單。

<ol>
  <li>準備材料</li>
  <li>
    開始製作
    <ol>
      <li>打開編輯器</li>
      <li>輸入 HTML</li>
    </ol>
  </li>
  <li>完成</li>
</ol>

hr 和 br

hr 和 br 是單 tag，也就是不是成對出現的標籤。

hr 用來插入一條水平線
br 用來換行

<p>
  第一行<br>
  第二行
</p>

<hr>

img

img 用來載入圖片，是載入外部資源的例子之一。

<img src="https://example.com/cat.jpg" alt="一隻貓">

src 用來指定圖片位置
alt 用來提供圖片說明，圖片無法顯示時會看到這段文字

table

table 常見結構可以先理解成三層巢狀

table
tr
td

也就是表格裡有列，列裡有格子。

<table border="1" cellpadding="8" cellspacing="0">
  <tr>
    <td>姓名</td>
    <td>分數</td>
  </tr>
  <tr>
    <td>小明</td>
    <td>90</td>
  </tr>
</table>

cellpadding 控制儲存格內距
cellspacing 控制儲存格之間的距離

表格會自動產生整齊的排列效果。另外，邊框也可以改用 CSS 控制，不一定要寫在 HTML 屬性裡。

<style>
  table, td {
    border: 1px solid #333;
  }
</style>

style 和 script

style 用來直接在 HTML 中寫 CSS。 script 用來直接在 HTML 中寫 JavaScript。

<style>
  p {
    color: blue;
  }
</style>

<p>這段字會是藍色</p>

<script>
  alert("Hello");
</script>

使用 link 載入外部樣式

可以使用 link 載入外部 CSS，例如 loading.css。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/loadingio/[email protected]/dist/loading.min.css">

<div class="ld ld-spin ld-spinner"></div>

這裡的 class 會套用外部樣式，讓 div 顯示成旋轉中的 loading 圖示。

色碼

CSS 常見顏色寫法有三種

名稱，例如 blue
十六進位，例如 #ff0000
rgba()，可控制透明度，例如 rgba(255, 0, 0, 0.5)

color: blue;
color: #ff0000;
color: rgba(255, 0, 0, 0.5);

跳脫字元

有些符號在 HTML 裡有特殊用途，不能直接拿來當一般文字，這時就要使用跳脫字元。

例如

< 寫成 <
> 寫成 >
& 寫成 &
© 寫成 ©

<p>&lt;div&gt; 不是直接顯示標籤，而是文字</p>
<p>Tom &amp; Jerry</p>
<p>&copy; 2026</p>

也可以用 Unicode 寫法表示字元。

<p>&#169;</p>

使用跳脫字元的原因，是為了避免瀏覽器把原本想顯示的文字誤判成 HTML 語法。

CSS 基本語法

CSS 是由 selector 加上大括號內的 key value 組成。

p {
  color: blue;
}

也可以一次寫多個屬性。

p {
  color: blue;
  background: #f00;
}

color: blue 表示文字顏色是藍色
background: #f00 表示背景顏色是紅色

入門樣式

這堂課會先練習幾個最基本的屬性

color
background-color

p {
  color: blue;
  background-color: #eee;
}

CSS selector 概念

CSS selector 用來選取你要套用樣式的元素。

tag selector

直接用標籤名稱選取元素。

p {
  color: blue;
}

這會選到所有 p。

class selector

用 . 加 class 名稱選取。

.notice {
  color: red;
}

這會選到 class="notice" 的元素。

id selector

用 # 加 id 名稱選取。

#main {
  background: #eee;
}

這會選到 id="main" 的元素。通常同一頁中的 id 不應重複。

巢狀選取

空白代表選取某元素裡面的後代元素。

.box p {
  color: green;
}

這表示選取 .box 裡面的所有 p，不限中間隔幾層。

子層選取

> 代表只選取下一層子元素。

.box > p {
  color: blue;
}

這表示只選 .box 的直接子層 p。

相鄰兄弟選取

+ 代表選取緊接在後面的同層元素。

h1 + p {
  color: red;
}

這表示選取緊接在 h1 後面的第一個 p。

一般兄弟選取

~ 代表選取後面所有符合條件的同層元素。

h1 ~ p {
  color: gray;
}

這表示選取和 h1 同層，且出現在它後面的所有 p。

多組同時選取

, 可以把多個 selector 合併在一起。

h1, p, a {
  color: blue;
}

這表示同時選取 h1、p、a。

練習網站

可搭配 CSS Diner 練習 selector 的觀念。

CSS Diner

練習方向

練習建立基本 HTML 文件
熟悉常見標籤與屬性
練習清單、表格、圖片與連結
用 style 和 link 套用 CSS
認識色碼與跳脫字元
練習 CSS selector 的基本寫法