從基礎建設web網頁-第四章 HTML 進階語法-部落格

17th鐵人賽

413570464

2025-09-26 02:32:26

53 瀏覽

分享至

HTML 進階語法-部落格

1.文件宣告與 HTML 根元素

<!DOCTYPE html>
<html lang="zh-Hant">

!DOCTYPE html：宣告這是一份 HTML5 文件。
html lang="zh-Hant"：告訴瀏覽器這份文件的語言是繁體中文。

2.Head-頁面資訊區

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>標題</title>
</head>

head：放置網頁的設定資訊，不會直接顯示在頁面上。
meta charset="UTF-8" :確保文字顯示正確，避免出現亂碼等情況。
meta name="viewport" :讓頁面在手機、平板等不同螢幕裝置自動調整大小。
title :設定分頁標題，會顯示在瀏覽器標籤上。

3.Header-網站頁首

<header>
  <h1>我的個人網站</h1>
  <nav>
    <ul>
      <li><a href="#intro">首頁</a></li>
      <li><a href="#blog">部落格</a></li>
      <li><a href="#portfolio">作品集</a></li>
      <li><a href="#contact">聯絡</a></li>
    </ul>
  </nav>
</header>

header：網站的頭部區域，通常會放網站名稱和導覽列。
h1：網站標題，一頁通常只會用一次。
nav：導航選單，使用 ul、li、a 組成超連結，方便跳轉到不同頁面。

4.Main-主要內容

<main>
  <!-- 首頁介紹 -->
  <section id="intro">
    <h2>關於本站</h2>
    <p>作品展示集</p>
  </section>

main：網頁核心內容。
section：用來區分不同主題。
id="intro"：簡單來說是個錨點，讓 a href="#intro" 可以直接跳轉到這裡。

4.部落格文章區

<section id="blog">
  <h2>最新文章</h2>
  <article>
    <h3>文章標題一</h3>
    <p>這是一篇文章的簡介內容。</p>
  </article>
  <article>
    <h3>文章標題二</h3>
    <p>這是另一篇文章的簡介內容。</p>
  </article>
</section>

section：一個大主題的部落格區塊。
article：獨立的內容單元，篇幅就大概是一篇的量。

5.作品集

<section id="portfolio">
  <h2>我的作品</h2>
  <figure>
    <img src="work1.jpg" alt="作品示意圖">
    <figcaption>作品的網頁設計</figcaption>
  </figure>
  <figure>
    <img src="work2.jpg" alt="作品示意圖">
    <figcaption>作品的內容專案</figcaption>
  </figure>
</section>

figure：用來包裝圖片、插圖、程式碼片段。
figcaption：將圖片增加文字說明。
img：圖片的標籤，alt 屬性提供替代文字，利於 SEO 與無障礙設計。

6.聯絡資訊

<section id="contact">
  <h2>聯絡我</h2>
  <address>
    <p>Email: <a href="mailto:test@example.com">test@example.com</a></p>
    <p>所在地：台北市</p>
  </address>
</section>

address：用來放聯絡資訊。
mailto:：點擊時會自動開啟 Email 客戶端。