HTML & CSS 教學

HTML 基礎

HTML（HyperText Markup Language）是網頁的骨架。它負責定義網頁的內容和結構，例如標題、段落、圖片和連結。HTML 透過標籤（tags）來組織內容。

基本的 HTML 內容結構

<!-- 網頁內容 -->
<h1>哈囉，世界！</h1>
<p>這是一個簡單的段落。</p>
<div>
    <p>使用 <div> 來分組內容。</p>
</div>

基本文字與連結標籤

<h1> 到 <h6>：標題標籤，定義不同層級的標題。
<p>：段落標籤。
<a>：超連結標籤，用於連結到其他頁面，`href` 屬性定義目標 URL。
<strong> 或 <b>：加粗文字，強調重要性。
<em> 或 <i>：斜體文字，用於強調或表達不同語氣。

圖片與連結

<!-- 圖片標籤：src 指定圖片來源，alt 提供替代文字 -->
<img src="https://placehold.co/400x200" alt="一個範例圖片" class="rounded-lg shadow-md">

<!-- 連結到外部網站 -->
<p class="mt-4">
    點擊這裡前往
    <a href="https://www.google.com" class="text-blue-600 hover:text-blue-800 underline" target="_blank">Google</a>
</p>

列表標籤

列表是組織相關項目內容的常見方式，分為無序列表（`ul`）、有序列表（`ol`）和定義列表（`dl`）。

<h4>無序列表</h4>
<ul>
    <li>項目一</li>
    <li>項目二</li>
</ul>

<h4>有序列表</h4>
<ol>
    <li>第一個項目</li>
    <li>第二個項目</li>
</ol>

區塊與行內元素

div 是一個區塊元素，通常用來分組內容並建立佈局。span 則是一個行內元素，用來標記或樣式化一小段文字。

<!-- 區塊元素範例 -->
<div class="p-4 bg-gray-100 rounded-md">
    <h4>這個是分組的區塊</h4>
    <p>div 會佔據整行的寬度。</p>
</div>

<!-- 行內元素範例 -->
<p class="mt-4">
    這句話中的
    <span class="bg-yellow-200 font-bold">一部分文字</span>
    使用了 span 標籤。
</p>

表格標籤

表格用於呈現有結構的二維數據。

<table class="w-full border-collapse">
    <thead class="bg-gray-200">
        <tr>
            <th class="p-2 border">標題一</th>
            <th class="p-2 border">標題二</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="p-2 border">數據 A</td>
            <td class="p-2 border">數據 B</td>
        </tr>
        <tr>
            <td class="p-2 border">數據 C</td>
            <td class="p-2 border">數據 D</td>
        </tr>
    </tbody>
</table>

表單與輸入標籤

表單是收集使用者輸入的關鍵，例如註冊帳號或提交資訊。

<form>
    <div class="mb-4">
        <label for="username">使用者名稱：</label>
        <input type="text" id="username" name="username" class="border p-2 rounded-md w-full">
    </div>
    <div class="mb-4">
        <label for="color">選擇顏色：</label>
        <select id="color" name="color" class="border p-2 rounded-md w-full">
            <option value="red">紅色</option>
            <option value="blue">藍色</option>
            <option value="green">綠色</option>
        </select>
    </div>
    <button type="submit" class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full">
        提交
    </button>
</form>

HTML 進階功能

除了基礎標籤，HTML5 也引入了許多進階功能，幫助你建立更具結構性、互動性和多樣化的網頁。

語義化標籤 (Semantic Tags)

這些標籤能讓網頁結構更具意義，有利於搜尋引擎最佳化（SEO）和無障礙設計。

<!-- 網站的頁首 -->
<header>
    <h1>網站標題</h1>
    <nav>
        <!-- 導航連結 -->
    </nav>
</header>

<!-- 主要內容區塊 -->
<main>
    <article>
        <!-- 一篇獨立的文章內容 -->
    </article>
    <section>
        <!-- 一個主題相關的內容區塊 -->
    </section>
</main>

<!-- 側邊欄內容 -->
<aside>
    <!-- 廣告、相關連結等 -->
</aside>

<!-- 網站的頁尾 -->
<footer>
    <p>版權所有 &copy; 2024</p>
</footer>

多媒體標籤 (Multimedia Tags)

HTML5 讓嵌入影音內容變得簡單，無需使用第三方插件。

<h4>嵌入影片</h4>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    您的瀏覽器不支援影片標籤。
</video>

<h4>嵌入音訊</h4>
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的瀏覽器不支援音訊標籤。
</audio>

表單進階

除了基本的 `input` 類型，還有多種表單元素可以收集不同類型的使用者資料。

<form class="space-y-4">
    <!-- 帶有 `for` 的標籤，提升可訪問性 -->
    <label for="email" class="block">電子郵件：</label>
    <input type="email" id="email" name="email" class="border p-2 rounded-md w-full" placeholder="name@example.com">

    <!-- 密碼輸入框 -->
    <label for="password" class="block">密碼：</label>
    <input type="password" id="password" name="password" class="border p-2 rounded-md w-full">

    <!-- 多行文字輸入框 -->
    <label for="message" class="block">留言：</label>
    <textarea id="message" name="message" rows="4" class="border p-2 rounded-md w-full"></textarea>
</form>

嵌入外部內容與資料屬性

`iframe` 用於在網頁中嵌入另一個網頁；`data-*` 屬性則用於儲存自定義資料，方便 JavaScript 存取。

<h4>嵌入外部網站</h4>
<iframe src="https://example.com" width="600" height="400" title="範例網站" class="border rounded-xl"></iframe>

<h4>資料屬性範例</h4>
<p data-user-id="12345" data-user-name="JohnDoe">這是帶有資料屬性的段落。</p>

註解與實體

HTML 註解用來在程式碼中添加備註，不會顯示在網頁上。實體則是用來顯示特殊字元，例如 `<` 或 `>`。

<!-- 這是 HTML 註解，使用者看不到 -->
<p>這是一個段落。</p>

<!-- HTML 實體範例 -->
<p>在 HTML 中，小於符號是 &lt; ，大於符號是 &gt; ，
    而空格可以使用 &nbsp; 來呈現。
</p>

CSS 基礎

CSS（Cascading Style Sheets）負責網頁的美化。它讓您可以控制網頁的顏色、字體、排版和佈局，將您的網頁設計得更具吸引力。

CSS 語法

CSS 規則由選擇器、屬性和值組成。

選擇器 {
  屬性: 值;
  屬性: 值;
}

常用的 CSS 屬性

每個 CSS 屬性都有其特定功能，讓您能精準控制網頁的視覺效果。以下是一些最常用的屬性：

color: 設定文字的顏色。
background-color: 設定元素的背景顏色。
font-size: 設定文字的大小。
font-family: 設定字體類型（例如：宋體、黑體）。
padding: 設定元素內容與邊框之間的內邊距。
margin: 設定元素邊框與其他元素之間的外邊距。
border: 設定元素的邊框樣式、寬度和顏色。
text-align: 設定文字在元素中的水平對齊方式。
display: 定義元素如何顯示（例如：區塊、行內、彈性）。

實作範例

您可以將 CSS 放在 HTML 檔案的 <head> 標籤內的 <style> 標籤裡。

<style>
    h1 {
        color: #2563eb;
        font-family: 'Georgia', serif;
    }

    .highlight {
        background-color: #fde68a;
        padding: 5px;
        border-radius: 8px;
    }
</style>

<h1>這是一個藍色的標題</h1>
<p class="highlight">這個段落有黃色的背景。</p>

CSS 屬性互動調整器

試著改變下面的屬性值，觀察下方文字的即時變化。

文字顏色 (color)

背景顏色 (background-color)

字體大小 (font-size)

內邊距 (padding)

外邊距 (margin)

邊框 (border)

對齊方式 (text-align)

寬度 (width)

圓角 (border-radius)

陰影 (box-shadow)

透明度 (opacity): 1.0

旋轉 (rotate): 0°

這段文字會隨著你的調整而改變樣式！

試著組合不同的屬性來看看效果。

生成的 CSS 程式碼

生成的 HTML 程式碼

實時編輯器

在下方編輯器中輸入 HTML 或 CSS 程式碼，然後點擊「運行」按鈕即可立即看到結果。**強烈建議先點擊「基本結構」按鈕來載入標準的 HTML 模板。**

例1 例2 例3 例4 例5 例6 例7 例8 例9 例10

常用的程式碼範例

這些是學生們最常使用的範例，可以直接複製到上面的編輯器中運行。

1. 帶有懸停效果的按鈕

這是一個簡單的按鈕，當你將滑鼠懸停在上面時，它的顏色會改變。

<style>
  .hover-button {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .hover-button:hover {
    background-color: #0056b3;
  }
</style>
<button class="hover-button">懸停我</button>

2. 基本的卡片元件

這個範例展示了一個常見的UI卡片，包含圖片、標題和描述文字。

<style>
  .card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
    width: 300px;
    font-family: Arial, sans-serif;
  }
  .card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  .card-content {
    padding: 20px;
  }
  .card-title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 0;
  }
  .card-text {
    font-size: 14px;
    color: #555;
  }
</style>
<div class="card">
  <img src="https://placehold.co/400x200" alt="Placeholder image" class="card-image">
  <div class="card-content">
    <h3 class="card-title">卡片標題</h3>
    <p class="card-text">這是一段描述文字，展示了卡片的內容。</p>
  </div>
</div>

這是一個簡單的水平導航列，常用於網站的頂部，連結可以點擊。

<style>
  .navbar {
    background-color: #333;
    overflow: hidden;
    border-radius: 5px;
  }
  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  .navbar a:hover {
    background-color: #575757;
  }
</style>
<div class="navbar">
  <a href="#home">首頁</a>
  <a href="#about">關於我們</a>
  <a href="#services">服務</a>
  <a href="#contact">聯絡我們</a>
</div>

4. 響應式圖片庫 (使用 Grid)

這個範例展示了如何使用CSS Grid來建立一個響應式的圖片庫。

<style>
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 10px;
  }
  .gallery-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
</style>
<div class="gallery-grid">
  <img src="https://placehold.co/200x200" alt="圖片 1">
  <img src="https://placehold.co/200x200" alt="圖片 2">
  <img src="https://placehold.co/200x200" alt="圖片 3">
  <img src="https://placehold.co/200x200" alt="圖片 4">
</div>

5. 聯絡表單

這是一個樣式化的聯絡表單，包含輸入框和一個提交按鈕。

<style>
  .form-container {
    width: 350px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-family: Arial, sans-serif;
  }
  .form-container input[type=text], .form-container textarea {
    width: 95%;
    padding: 10px;
    margin: 8px 0;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .form-container input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>
<div class="form-container">
  <form action="/action_page.php">
    <label for="fname">姓名</label>
    <input type="text" id="fname" name="firstname" placeholder="你的名字..">
    <label for="subject">訊息</label>
    <textarea id="subject" name="subject" placeholder="寫下你的訊息.." style="height:100px"></textarea>
    <input type="submit" value="提交">
  </form>
</div>

6. 使用 Flexbox 的彈性佈局

這個範例展示了如何使用CSS Flexbox將元素排列成一列，並均勻分佈。

<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    gap: 10px;
  }
  .flex-item {
    background-color: #f1f1f1;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
  }
</style>
<div class="flex-container">
  <div class="flex-item">項目 1</div>
  <div class="flex-item">項目 2</div>
  <div class="flex-item">項目 3</div>
</div>

7. 漸變背景

這個程式碼會為一個區塊添加一個美麗的從藍色到紫色的漸變背景。

<style>
  .gradient-box {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
  }
</style>
<div class="gradient-box">漸變背景</div>

8. 3D 轉換效果

這個範例展示了一個簡單的3D轉換，當你將滑鼠懸停在方塊上時，它會旋轉。

<style>
  .transform-container {
    perspective: 1000px; /* 設置透視效果 */
    width: 200px;
    height: 200px;
    margin: 50px auto;
  }
  .transform-box {
    width: 100%;
    height: 100%;
    background-color: #FF5733;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    transition: transform 0.5s ease;
  }
  .transform-container:hover .transform-box {
    transform: rotateY(180deg);
  }
</style>
<div class="transform-container">
  <div class="transform-box">懸停我</div>
</div>

9. 簡單的加載動畫

這個範例使用 CSS 關鍵幀動畫來創建一個循環的加載圓點。

<style>
  .loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>
<div class="loader"></div>

當你將滑鼠懸停在文字上時，會顯示一個工具提示。

<style>
  .tooltip-container {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 虛線 */
    cursor: pointer;
  }
  .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
</style>
<div class="tooltip-container">
  懸停此處
  <span class="tooltip-text">這是一個工具提示！</span>
</div>

HTML & CSS 入門教學