前端 HTML 常用 Tag 說明與範例

本篇整理常見 HTML 標籤的用途與語法範例，適合初學者快速查閱與學習。

1. 標題與段落

  • <h1> ~ <h6>：標題，數字越小字體越大。
  • <p>：段落。
<h1>主標題</h1>
<h2>次標題</h2>
<p>這是一段文字。</p>

2. 連結與圖片

  • <a>：超連結。
  • <img>：圖片。
<a href="https://www.google.com">Google</a>
<img src="/static/image/hugocover.png" alt="封面圖" />

3. 清單

  • <ul>：無序清單。
  • <ol>：有序清單。
  • <li>：清單項目。
<ul>
  <li>項目一</li>
  <li>項目二</li>
</ul>
<ol>
  <li>步驟一</li>
  <li>步驟二</li>
</ol>

4. 表格

  • <table>：表格。
  • <tr>：表格列。
  • <th>：表頭。
  • <td>：儲存格。
<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
  </tr>
</table>

5. 表單

  • <form>：表單。
  • <input>：輸入欄位。
  • <label>：欄位標籤。
  • <button>：按鈕。
<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" />
  <button type="submit">送出</button>
</form>

6. 其他常用標籤

  • <div>：區塊元素，常用於版面切割。
  • <span>：行內元素，常用於文字標記。
  • <br>：換行。
  • <hr>：水平線。
<div>這是一個區塊</div>
<span>這是行內文字</span>
<br />
<hr />

7. 區塊語意標籤（HTML5 Semantic Tags）

  • <header>：頁首區域，通常放 logo、主選單。
  • <nav>：導覽列。
  • <main>：主要內容區。
  • <section>：章節區塊。
  • <article>：獨立內容（如一篇文章）。
  • <aside>：側邊欄。
  • <footer>：頁尾。
<header>網站標題</header>
<nav>主選單</nav>
<main>
  <section>
    <article>
      <h2>文章標題</h2>
      <p>文章內容...</p>
    </article>
  </section>
  <aside>相關連結</aside>
</main>
<footer>版權資訊</footer>

8. 媒體標籤

  • <audio>：音訊播放。
  • <video>：影片播放。
  • <source>：多媒體來源。
  • <iframe>：嵌入其他網頁。
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  您的瀏覽器不支援 audio 標籤。
</audio>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的瀏覽器不支援 video 標籤。
</video>
<iframe src="https://www.example.com" width="300" height="200"></iframe>

9. 輸入控制與互動元素

  • <select>：下拉選單。
  • <option>：選項。
  • <textarea>：多行文字輸入。
  • <fieldset>：表單群組。
  • <legend>：群組標題。
  • <progress>：進度條。
  • <meter>：計量器。
<form>
  <fieldset>
    <legend>個人資訊</legend>
    <label for="gender">性別：</label>
    <select id="gender" name="gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <br />
    <label for="desc">自我介紹：</label>
    <textarea id="desc" name="desc"></textarea>
    <br />
    <progress value="70" max="100">70%</progress>
    <meter value="0.6">60%</meter>
  </fieldset>
</form>

10. 其他輔助標籤

  • <mark>：標記重點文字。
  • <code>：程式碼片段。
  • <pre>：保留格式的文字。
  • <sup>：上標。
  • <sub>：下標。
  • <abbr>：縮寫。
  • <time>：時間。
<p>這是<mark>重點</mark>說明。</p>
<pre><code>let x = 10;</code></pre>
<p>水的化學式是 H<sub>2</sub>O。</p>
<p>平方：x<sup>2</sup></p>
<abbr title="HyperText Markup Language">HTML</abbr>
<time datetime="2025-05-19">2025年5月19日</time>

以上為 HTML 常用標籤與語法範例，建議多加練習並搭配 CSS 美化，讓網頁更具延展性與互動性！