網頁設計 HTML 範例怎麼用？免費模板教你做出手機版網站

網頁設計 HTML 範例：從可直接開啟的單頁網站開始

製作第一個網頁，只要將 HTML 程式碼存成 index.html，再用瀏覽器開啟，就能看到結果。HTML 負責內容結構，CSS 控制顏色與排版；只有需要互動功能時，才另外加入 JavaScript，不必一開始就安裝複雜的開發工具。

適合初學者的網頁設計 HTML 範例，應包含網站導覽、主要標題、內容區塊與頁尾，並能適應手機螢幕。先完成一個可閱讀、可操作的頁面，再逐步增加圖片、表單或其他功能，比直接修改大型網站模板更容易掌握。

可直接使用的網頁模板程式碼

這份範例將 HTML 與 CSS 放在同一個檔案，不依賴外部套件，適合作為個人介紹或工作室網站的起點。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>青禾工作室｜網站設計</title>

  <style>
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      line-height: 1.7;
      color: #243142;
      background: #f5f7fa;
    }

    .container {
      width: min(1080px, 92%);
      margin-inline: auto;
    }

    header,
    footer {
      background: #fff;
    }

    .header-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding-block: 20px;
    }

    nav {
      display: flex;
      gap: 20px;
    }

    a {
      color: #174ea6;
    }

    a:focus-visible {
      outline: 3px solid #174ea6;
      outline-offset: 4px;
    }

    section {
      padding-block: 40px;
    }

    h1 {
      font-size: clamp(2rem, 5vw, 3rem);
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }

    .card {
      padding: 24px;
      background: #fff;
      border-radius: 12px;
    }

    .button {
      display: inline-block;
      padding: 12px 20px;
      background: #174ea6;
      color: #fff;
      border-radius: 6px;
    }

    footer {
      padding-block: 20px;
    }

    @media (max-width: 640px) {
      .header-inner {
        flex-direction: column;
      }

      .cards {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>

  <header>
    <div class="container header-inner">
      <a href="#">青禾工作室</a>

      <nav aria-label="主要導覽">
        <a href="#services">服務項目</a>
        <a href="#contact">聯絡方式</a>
      </nav>
    </div>
  </header>

  <main class="container">

    <section>
      <h1>讓品牌資訊清楚呈現</h1>
      <p>從內容規劃到版面設計，建立容易閱讀的品牌網站。</p>
      <a class="button" href="#contact">洽詢網站需求</a>
    </section>

    <section id="services">
      <h2>服務項目</h2>

      <div class="cards">
        <article class="card">
          <h3>網站內容規劃</h3>
          <p>整理品牌介紹、服務特色與聯絡資訊。</p>
        </article>

        <article class="card">
          <h3>響應式版面設計</h3>
          <p>依照不同螢幕寬度調整內容排列。</p>
        </article>
      </div>
    </section>

    <section id="contact">
      <h2>聯絡方式</h2>
      <p>請將下方示範信箱替換為實際使用的地址。</p>
      <a href="mailto:[email protected]">寄信洽詢</a>
    </section>

  </main>

  <footer>
    <div class="container">
      青禾工作室｜網站設計示範頁面
    </div>
  </footer>

</body>
</html>

如何把 HTML 轉成網頁

HTML 本身就是瀏覽器能解析的文件，通常不需要額外轉檔。建立純文字檔案、貼上程式碼，以 UTF-8 編碼儲存為 index.html，接著用瀏覽器開啟即可。

若開啟後只看到原始碼，先檢查檔案是否誤存為 index.html.txt。修改內容後，記得儲存並重新整理瀏覽器。

這時完成的是本機預覽；要讓其他人透過網址瀏覽，還需要將檔案部署到網站主機或靜態網站託管服務。

HTML 網頁設計基礎：看懂標籤、屬性與頁面結構

HTML 是一種標記語言，不是用來描述運算邏輯的一般程式設計語言。它透過元素標示標題、段落、連結等內容，讓瀏覽器理解文件結構。

元素與屬性如何組成

以 <p>這是一段介紹文字。</p> 為例，<p> 是起始標籤，中間是內容，</p> 是結束標籤。

屬性則提供額外資訊，例如 <a href="#contact">聯絡我們</a> 的 href 指定連結目的地。範例中的 id="contact"，就是頁內連結要前往的位置。

並非每個元素都有結束標籤；例如 <meta>、<img> 屬於空元素，不應另外補上結束標籤。

head 與 header 有什麼不同

<head> 放置網頁標題、編碼、描述與樣式等資訊，不是畫面上的頁首。<header> 則是可見內容的一部分，常用來放品牌名稱與導覽。

範例以 <main> 包住主要內容，使用 <section> 區分主題，再以 <footer> 放置頁尾資訊。這類語意化標籤有助於表達結構，但仍須搭配合理的標題層級與清楚的文字。

現代版面配置宜使用 Flexbox 或 Grid；<table> 應用來呈現資料，而不是製作側欄、橫幅或整頁排版。

HTML 網頁編輯器怎麼選？先確認學習與修改需求

初學階段最重要的是能辨識語法、快速預覽並管理檔案，不必為了工具功能而增加學習負擔。

常見編輯方式比較

線上工具適合測試單一區塊；需要修改多頁網站、圖片路徑與共用樣式時，本機編輯器通常比較容易管理。不要將密碼、金鑰或私人資料貼進公開分享的範例。

免費網頁設計模板去哪裡找？下載前先看授權與檔案

免費網頁設計模板能節省初始排版時間，但「免費使用」不一定等於「可任意修改、轉售或移除署名」。挑選時，應同時確認授權、檔案內容與後續維護成本。

HTML5 網頁模板下載來源與挑選方向

HTML5 UP、Start Bootstrap 等網站提供可取得原始碼的模板資源，可作為挑選起點；各模板的授權、附帶素材與使用條件，仍以下載頁面及授權檔為準。

HTML5 並不代表模板一定支援手機，也不保證載入快速。應實際操作預覽頁，確認導覽、文字尺寸與內容排列是否符合需求。

只有 PSD 或其他設計稿的資源，不能直接當成網站開啟，還需要將視覺稿製作成 HTML 與 CSS。拖放平台中的免費版型，也不一定能下載到自己的主機使用。

HTML 模板免費下載前的檢查清單

• 授權範圍：是否允許商業使用、修改與移除頁尾署名。
• 素材權利：照片、圖示、字型是否有獨立授權。
• 檔案完整性：是否包含 HTML、CSS、JavaScript 及必要資源。
• 使用門檻：能否直接開啟，或必須先安裝套件並執行建置。
• 外部依賴：是否載入不必要的追蹤碼、過時套件或不明腳本。

若只是需要 HTML 範例下載練習，也可以將前面的完整程式碼存為 HTML 檔。先熟悉沒有外部依賴的版本，再接觸多檔案模板，較容易找出問題來源。

網頁模板套用流程：從替換內容到正式上線

模板套用不只是更換品牌名稱。內容、路徑、互動與手機版配置，都需要逐一確認。

第一步：保留原檔並確認資料夾結構

先備份下載的壓縮檔，再檢查首頁與資源位置。常見結構會將樣式放在 css、圖片放在 images、腳本放在 js，但實際名稱以模板為準。

若 HTML 引用 css/style.css，就必須維持對應路徑。任意移動檔案或重新命名資料夾，可能造成版面失效。

第二步：替換文字、連結與識別資訊

除了畫面上的標題，也要修改 <title>、網頁描述、導覽連結、聯絡資訊與頁尾。新增圖片時，應依用途提供適當的替代文字；純裝飾圖片可使用空的 alt。

將重複出現的色彩集中管理，比逐段修改更方便。頁面增加後，也可以把共用 CSS 移到獨立檔案，減少重複維護。

第三步：確認表單與按鈕真的有效

模板中的聯絡表單可能只有外觀，沒有接收資料的功能。要寄送或儲存資料，需要串接後端或表單服務，並處理驗證與錯誤提示。

本範例的 mailto: 連結會嘗試開啟訪客設定的郵件程式，不是直接從網站寄信。

第四步：部署後重新檢查

上傳時應保留資源目錄，並確認託管服務的首頁設定。正式網址開啟後，再測試圖片、連結與手機排版；部分主機會區分檔名大小寫，本機能開啟不代表上線後一定正常。

HTML 網站的 SEO 與手機版檢查重點

HTML 結構是網站基礎，但不會單靠幾個標籤就保證排名。真正需要做到的是讓頁面內容清楚、可存取，並符合讀者需求。

標題與內容保持一致

每頁使用能概括主題的 <title>，主要內容以清楚的 H1 開始，再用 H2、H3 建立層次。網頁描述應準確摘要內容，不必反覆堆疊相同詞彙；搜尋結果也不保證完整採用設定的描述。

單頁網站適合內容集中的介紹頁。若服務主題差異很大，拆成獨立頁面，通常更方便讀者直接找到所需資訊。

響應式設計不只設定 viewport

viewport 是手機顯示的重要設定，但仍需搭配彈性寬度、可換行文字與媒體查詢。檢查窄螢幕是否出現水平捲動，按鈕是否容易點擊，以及導覽是否遮住內容。

圖片應依顯示需求調整尺寸，避免載入過大的原始照片。也要用鍵盤測試連結與按鈕，確認焦點清楚可見，不只依賴滑鼠操作。

結論：先完成能運作的頁面，再擴充模板功能

學習網頁設計，最有效的起點是將範例存成 HTML 檔、實際開啟並修改內容。掌握標籤、CSS 與檔案路徑後，再選擇符合授權及功能需求的模板。上線前完成手機版、連結與表單檢查，才能把漂亮版型變成真正可用的網站。

常見問題（FAQ）

1. HTML 檔案一定要命名為 index.html 嗎？

不一定，本機練習可以使用其他名稱。許多主機會將 index.html 視為預設首頁，但仍應以託管服務的設定為準。

2. 完全不會 JavaScript，也能做網站嗎？

可以。個人簡介、服務說明與作品介紹等靜態頁面，通常能先用 HTML 與 CSS 完成。需要複雜互動或資料處理時，再導入其他技術。

3. 為什麼下載的模板開啟後沒有樣式？

常見原因是沒有完整解壓縮、CSS 路徑錯誤，或只複製了 HTML 檔。先確認樣式檔存在，再用瀏覽器開發者工具檢查資源是否載入失敗。

4. 免費模板可以拿來做客戶網站嗎？

要看授權是否允許商業使用，以及是否要求保留署名。網站程式碼與附帶照片可能適用不同授權，應分開確認並保留授權紀錄。

5. 手機可以編輯 HTML 網頁嗎？

可以使用支援純文字的編輯工具或線上編輯器。不過，管理多個檔案與除錯時，電腦通常較方便；手機則適合檢查實際顯示與觸控操作。

6. 網站上線後，搜尋引擎會立刻顯示嗎？

不會保證立即收錄。頁面需要能被公開存取，且未被設定禁止索引；可透過 Google Search Console 提交網站地圖或請求建立索引，但收錄時間與結果仍由搜尋引擎決定。