HTML5 基礎入門教程 2026 | 零基礎小白學網頁

HTML5 基礎入門教程

如果你想學做網頁，HTML 是你邁出的第一步。HTML 不需要編程基礎，它就是一種「給內容貼標籤」的語言。這篇教程會用最通俗的大白話，帶你從零開始搞懂 HTML。

一、HTML 是什麼？

1.1 通俗理解

想象你在寫一篇 Word 文檔：

你選中一段文字，點「標題」→ 它就變大了
你選中一段文字，點「加粗」→ 它就變粗了
你插入一張圖片 → 圖片就顯示出來了

HTML 做的事一模一樣，只不過你不是用鼠標點按鈕，而是用「標籤」來告訴瀏覽器：「這段是標題」「這段是段落」「這裡放一張圖片」。

一句話總結：HTML 就是給網頁內容「貼標籤」的語言。

1.2 HTML 長什麼樣？

html

<h1>這是一個標題</h1>
<p>這是一個段落</p>
<img src="photo.jpg" alt="一張照片">

<h1> 叫「開始標籤」
</h1> 叫「結束標籤」
中間的內容就是被標記的文字
標籤都是用尖括號 < > 包起來的

1.3 寫第一個網頁

你只需要一個文本編輯器（甚至記事本都行），新建一個 .html 文件，寫入以下內容：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一個網頁</title>
</head>
<body>
  <h1>你好，世界！</h1>
  <p>這是我做的第一個網頁。</p>
</body>
</html>

保存後雙擊打開，你就能在瀏覽器裡看到你的第一個網頁了！

1.4 網頁骨架解釋

把網頁想象成一封「信」：

<!DOCTYPE html>     ← 信的格式聲明（告訴瀏覽器這是 HTML5）
<html>              ← 信封（整個網頁）
  <head>            ← 信封背面（看不見的信息）
    <title>         ← 信的標題（顯示在瀏覽器標籤頁上）
  </head>
  <body>            ← 信的內容（用戶看到的所有東西）
    <h1>            ← 大標題
    <p>             ← 段落
  </body>
</html>

💡 記憶技巧：
<head> 是「幕後工作」，用戶看不到
<body> 是「臺前表演」，用戶能看到

二、常用文本標籤

2.1 標題標籤 h1 ~ h6

HTML 提供了 6 級標題，數字越大，字體越小：

html

<h1>一級標題（最大）</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題（最小）</h6>

效果大概是：

# 一級標題（最大）
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題（最小）

💡 注意事項：
一個頁面只用一個 <h1>（通常是主標題）
標籤要按層級使用，不要為了字體大小而用標題標籤

2.2 段落和換行

html

<p>這是一個段落。段落之間會自動有空隙。</p>
<p>這是另一個段落。</p>

<p>這是一段文字，<br>這裡換行了。</p>

💡 區別：
<p> 是段落，段落之間有間距
<br> 是換行，只是簡單換一行，沒有間距
<br> 是自閉合標籤，沒有結束標籤

2.3 文本格式化

html

<strong>加粗文字（表示重要）</strong>
<b>也是加粗（純樣式）</b>

<em>斜體文字（表示強調）</em>
<i>也是斜體（純樣式）</i>

<u>下劃線文字</u>
<s>刪除線文字</s>
<mark>高亮標記文字</mark>

<small>小號文字</small>

💡 實際開發建議：優先用 <strong> 和 <em>，因為它們有「語義」（表示重要和強調），對搜索引擎和屏幕閱讀器更友好。

2.4 水平分割線

html

<p>上面的內容</p>
<hr>
<p>下面的內容</p>

<hr> 會在兩個段落之間畫一條水平線，用來分隔內容。

三、鏈接和圖片

3.1 超鏈接 a

鏈接是網頁最重要的功能之一——點擊跳轉到另一個頁面：

html

<!-- 基本鏈接 -->
<a href="https://www.google.com">點擊去谷歌</a>

<!-- 在新窗口打開 -->
<a href="https://www.google.com" target="_blank">在新窗口打開谷歌</a>

<!-- 鏈接到本站的其他頁面 -->
<a href="/tw/about.html">關於我們</a>

<!-- 鏈接到郵箱（點擊打開郵件應用） -->
<a href="mailto:hello@example.com">發郵件給我</a>

<!-- 鏈接到電話（手機上點擊撥號） -->
<a href="tel:10086">撥打 10086</a>

💡 target 屬性：
target="_self"：在當前窗口打開（默認）
target="_blank"：在新窗口打開
用 _blank 時建議加上 rel="noopener noreferrer" 更安全

3.2 圖片 img

html

<!-- 基本用法 -->
<img src="photo.jpg" alt="描述文字">

<!-- 寬高設置 -->
<img src="logo.png" alt="網站Logo" width="200" height="50">

<!-- 網絡圖片 -->
<img src="https://example.com/image.jpg" alt="網絡圖片">

💡 重要屬性：
src：圖片地址（必須）
alt：圖片描述（必須！圖片加載失敗時顯示，也供盲人閱讀器使用）
width / height：寬高（建議用 CSS 設置）

3.3 圖文鏈接

把圖片放在鏈接標籤裡面，就變成了「點擊圖片跳轉」：

html

<a href="https://example.com">
  <img src="banner.jpg" alt="點擊跳轉">
</a>

四、列表

4.1 無序列表 ul

就是用圓點排列的列表：

html

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

效果：

蘋果
香蕉
橘子

4.2 有序列表 ol

自動帶編號的列表：

html

<ol>
  <li>打開冰箱門</li>
  <li>把大象放進去</li>
  <li>關上冰箱門</li>
</ol>

效果：

打開冰箱門
把大象放進去
關上冰箱門

4.3 嵌套列表

列表可以嵌套，做多級菜單：

html

<ul>
  <li>前端
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>後端
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

💡 記憶技巧：
<ul> = Unordered List = 無序列表
<ol> = Ordered List = 有序列表
<li> = List Item = 列表項

五、表格

5.1 基本表格

html

<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小紅</td>
    <td>22</td>
    <td>上海</td>
  </tr>
</table>

效果：

姓名	年齡	城市
小明	25	北京
小紅	22	上海

💡 標籤含義：
<table> = 表格
<tr> = Table Row = 一行
<th> = Table Header = 表頭（自動加粗居中）
<td> = Table Data = 單元格

5.2 合併單元格

html

<table border="1">
  <tr>
    <td colspan="2">橫向合併2列</td>
    <td>第三列</td>
  </tr>
  <tr>
    <td>第一列</td>
    <td>第二列</td>
    <td rowspan="2">縱向合併2行</td>
  </tr>
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
</table>

💡 記憶技巧：
colspan = column span = 跨列（橫向合併）
rowspan = row span = 跨行（縱向合併）

5.3 完整表格結構

html

<table>
  <caption>員工信息表</caption>  <!-- 表格標題 -->
  <thead>
    <tr>
      <th>姓名</th>
      <th>部門</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>張三</td>
      <td>技術部</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td>1人</td>
    </tr>
  </tfoot>
</table>

💡 thead/tbody/tfoot 不是必須的，但加上後代碼更清晰，也方便 CSS 樣式控制。

六、表單（用戶輸入）

6.1 基本表單

表單用來收集用戶輸入的信息：

html

<form action="/submit" method="POST">
  <!-- 文本輸入 -->
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username" placeholder="請輸入用戶名">

  <!-- 密碼輸入 -->
  <label for="password">密碼：</label>
  <input type="password" id="password" name="password" placeholder="請輸入密碼">

  <!-- 提交按鈕 -->
  <button type="submit">登錄</button>
</form>

💡 重要概念：
action：表單數據提交到哪裡
method：提交方式（GET 或 POST）
name：提交數據時用的名字（後端靠這個識別）
<label for="id">：點擊文字也能選中輸入框（無障礙必備）

6.2 各種輸入類型

html

<!-- 文本 -->
<input type="text" placeholder="普通文本">

<!-- 密碼（輸入顯示為圓點） -->
<input type="password" placeholder="密碼">

<!-- 郵箱（移動端彈出@鍵盤） -->
<input type="email" placeholder="郵箱">

<!-- 數字 -->
<input type="number" min="0" max="100" value="50">

<!-- 日期 -->
<input type="date">

<!-- 時間 -->
<input type="time">

<!-- 顏色選擇器 -->
<input type="color" value="#ff0000">

<!-- 文件上傳 -->
<input type="file">

<!-- 範圍滑塊 -->
<input type="range" min="0" max="100" value="50">

6.3 單選和複選

html

<!-- 單選按鈕 -->
<p>性別：</p>
<label><input type="radio" name="gender" value="male" checked> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>

<!-- 複選框 -->
<p>興趣愛好：</p>
<label><input type="checkbox" name="hobby" value="reading"> 讀書</label>
<label><input type="checkbox" name="hobby" value="music"> 音樂</label>
<label><input type="checkbox" name="hobby" value="sports"> 運動</label>

💡 關鍵點：
單選按鈕的 name 必須相同，才能實現「多選一」
checked 屬性表示默認選中
複選框的 name 可以相同，也可以不同

6.4 下拉選擇

html

<select name="city">
  <option value="">請選擇城市</option>
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option>
  <option value="guangzhou">廣州</option>
</select>

💡 selected 表示默認選中某一項。

6.5 文本域

html

<textarea name="message" rows="5" cols="40" placeholder="請輸入留言..."></textarea>

💡 <input> 是單行文本，<textarea> 是多行文本。

七、語義化標籤

7.1 什麼是語義化？

「語義化」就是用有意義的標籤代替到處都用 <div>：

html

<!-- 不好：全是 div，看不出結構 -->
<div class="header">導航欄</div>
<div class="main">主內容</div>
<div class="footer">底部</div>

<!-- 好：用語義化標籤，一目瞭然 -->
<header>導航欄</header>
<main>主內容</main>
<footer>底部</footer>

7.2 常用語義化標籤

html

<header>   <!-- 頁面或區塊的頭部 -->
<nav>      <!-- 導航欄 -->
<main>     <!-- 主要內容 -->
<article>  <!-- 一篇獨立文章 -->
<section>  <!-- 一個區塊 -->
<aside>    <!-- 側邊欄 -->
<footer>   <!-- 底部 -->
<figure>   <!-- 圖片+說明 -->
<figcaption> <!-- 圖片標題 -->
<time>     <!-- 時間 -->

7.3 完整頁面結構示例

html

<body>
  <header>
    <h1>我的博客</h1>
    <nav>
      <a href="/tw/">首頁</a>
      <a href="/about">關於</a>
      <a href="/tw/contact">聯繫</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>文章標題</h2>
      <time datetime="2026-08-01">2026年8月1日</time>
      <p>文章內容...</p>
    </article>

    <aside>
      <h3>熱門文章</h3>
      <ul>
        <li>文章1</li>
        <li>文章2</li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2026 我的博客. 保留所有權利。</p>
  </footer>
</body>

💡 語義化的好處：
代碼更易讀（開發者看了就懂）
搜索引擎更好理解（SEO 更友好）
屏幕閱讀器更好支持（無障礙訪問）

八、div 和 span

8.1 塊級元素 div

<div> 是一個「盒子」，用來把內容分組，獨佔一行：

html

<div class="card">
  <h3>卡片標題</h3>
  <p>卡片內容</p>
</div>

<div class="card">
  <h3>另一個卡片</h3>
  <p>另一個內容</p>
</div>

💡 <div> 沒有任何語義，純粹用來分組和佈局。它是塊級元素，獨佔一行。

8.2 行內元素 span

<span> 也是無語義的，但它不換行，只包裹一小段文字：

html

<p>今天天氣<span style="color: red;">非常熱</span>，注意防暑。</p>

💡 <span> 是行內元素，不會換行，適合給一小段文字加樣式。

8.3 塊級 vs 行內

特性	塊級元素	行內元素
是否換行	獨佔一行	不會換行
寬高	可以設置	不能設置
代表標籤	div, p, h1, ul	span, a, strong, em

九、多媒體標籤

9.1 視頻 video

html

<video controls width="640">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  你的瀏覽器不支持視頻播放。
</video>

💡 屬性：
controls：顯示播放控制條
autoplay：自動播放（瀏覽器可能阻止）
loop：循環播放
muted：靜音
poster="cover.jpg"：封面圖

9.2 音頻 audio

html

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  你的瀏覽器不支持音頻播放。
</audio>

9.3 iframe 嵌入

html

<!-- 嵌入 YouTube 視頻 -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video"
  frameborder="0"
  allowfullscreen>
</iframe>

<!-- 嵌入地圖 -->
<iframe
  src="https://maps.google.com/maps?q=Beijing&output=embed"
  width="600"
  height="450">
</iframe>

十、HTML 屬性詳解

10.1 通用屬性

所有標籤都可以用的屬性：

html

<div
  id="main-content"          <!-- 唯一標識 -->
  class="container card"     <!-- 類名（可以多個） -->
  style="color: red;"        <!-- 行內樣式 -->
  title="鼠標懸停提示文字"    <!-- 懸停提示 -->
  data-user-id="123"         <!-- 自定義數據屬性 -->
  hidden                     <!-- 隱藏元素 -->
>
  內容
</div>

10.2 id vs class

特性	id	class
唯一性	頁面中唯一	可以重複
數量	一個元素只能一個	可以多個
分隔符	直接用	空格分隔
CSS 選擇器	`#main`	`.card`
JS 獲取	`getElementById`	`getElementsByClassName`

💡 經驗法則：默認用 class，需要唯一標識時才用 id。

十一、實戰練習

11.1 練習一：個人簡歷頁

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的簡歷</title>
</head>
<body>
  <header>
    <h1>張三的簡歷</h1>
    <nav>
      <a href="#info">基本信息</a>
      <a href="#skills">技能</a>
      <a href="#experience">經歷</a>
    </nav>
  </header>

  <main>
    <section id="info">
      <h2>基本信息</h2>
      <p>姓名：張三</p>
      <p>郵箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
      <p>電話：<a href="tel:13800138000">13800138000</a></p>
      <img src="avatar.jpg" alt="頭像" width="150">
    </section>

    <section id="skills">
      <h2>技能清單</h2>
      <ul>
        <li>HTML5 / CSS3</li>
        <li>JavaScript / TypeScript</li>
        <li>Vue 3 / React</li>
        <li>Node.js</li>
      </ul>
    </section>

    <section id="experience">
      <h2>工作經歷</h2>
      <article>
        <h3>前端工程師 - ABC公司</h3>
        <time>2024.07 - 至今</time>
        <p>負責公司官網和後臺管理系統的開發。</p>
      </article>
    </section>
  </main>

  <footer>
    <p>© 2026 張三. 保留所有權利。</p>
  </footer>
</body>
</html>

11.2 練習二：註冊表單

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>註冊賬號</title>
</head>
<body>
  <main style="max-width: 400px; margin: 40px auto;">
    <h1>註冊賬號</h1>

    <form action="/register" method="POST">
      <div>
        <label for="name">暱稱：</label><br>
        <input type="text" id="name" name="name" placeholder="2-20個字符" required>
      </div>

      <div>
        <label for="email">郵箱：</label><br>
        <input type="email" id="email" name="email" placeholder="請輸入郵箱" required>
      </div>

      <div>
        <label for="pwd">密碼：</label><br>
        <input type="password" id="pwd" name="password" placeholder="至少6位" required>
      </div>

      <div>
        <label>性別：</label>
        <label><input type="radio" name="gender" value="m"> 男</label>
        <label><input type="radio" name="gender" value="f"> 女</label>
        <label><input type="radio" name="gender" value="o" checked> 保密</label>
      </div>

      <div>
        <label>興趣：</label>
        <label><input type="checkbox" name="hobby" value="code"> 編程</label>
        <label><input type="checkbox" name="hobby" value="music"> 音樂</label>
        <label><input type="checkbox" name="hobby" value="game"> 遊戲</label>
      </div>

      <div>
        <label for="city">城市：</label>
        <select id="city" name="city">
          <option value="">請選擇</option>
          <option value="bj">北京</option>
          <option value="sh">上海</option>
          <option value="gz">廣州</option>
        </select>
      </div>

      <div>
        <label for="bio">個人簡介：</label><br>
        <textarea id="bio" name="bio" rows="3" placeholder="簡單介紹一下自己..."></textarea>
      </div>

      <div>
        <label>
          <input type="checkbox" name="agree" required>
          我已閱讀並同意<a href="/tw/terms">用戶協議</a>
        </label>
      </div>

      <button type="submit">註冊</button>
    </form>
  </main>
</body>
</html>

十二、常見問題

12.1 標籤必須小寫嗎？

HTML 不區分大小寫，<DIV> 和 <div> 效果一樣。但約定俗成用小寫，這是行業規範。

12.2 標籤必須閉合嗎？

大部分標籤需要閉合 <p></p>，但有些是自閉合的：<br>、<hr>、<img>、<input>。

12.3 HTML 文件必須有什麼？

html

<!DOCTYPE html>      <!-- 必須有，聲明文檔類型 -->
<html>               <!-- 必須有，根元素 -->
<head>               <!-- 必須有，頭部信息 -->
  <meta charset="UTF-8">  <!-- 必須有，字符編碼 -->
  <title>標題</title>     <!-- 必須有，頁面標題 -->
</head>
<body>               <!-- 必須有，頁面內容 -->
</body>
</html>

12.4 `<!DOCTYPE html>` 是什麼？

它不是 HTML 標籤，而是一個「聲明」，告訴瀏覽器用 HTML5 標準來解析頁面。每個 HTML 文件第一行都必須有它。

十三、HTML 速查表

13.1 常用標籤速查

標籤	用途	示例
`<h1>~<h6>`	標題	`<h1>大標題</h1>`
`<p>`	段落	`<p>一段文字</p>`
`<br>`	換行	`第一行<br>第二行`
`<hr>`	分割線	`<hr>`
`<strong>`	加粗	`<strong>重要</strong>`
`<em>`	斜體	`<em>強調</em>`
`<a>`	鏈接	`<a href="url">鏈接</a>`
`<img>`	圖片	`<img src="x.jpg" alt="圖">`
`<ul>`	無序列表	`<ul><li>項</li></ul>`
`<ol>`	有序列表	`<ol><li>項</li></ol>`
`<table>`	表格	`<table><tr><td>格</td></tr></table>`
`<form>`	表單	`<form action="/x">...</form>`
`<input>`	輸入框	`<input type="text">`
`<button>`	按鈕	`<button>點擊</button>`
`<div>`	塊容器	`<div class="box">...</div>`
`<span>`	行內容器	`<span style="color:red">紅字</span>`

13.2 語義化標籤速查

標籤	用途
`<header>`	頁頭/區頭
`<nav>`	導航欄
`<main>`	主內容區
`<article>`	獨立文章
`<section>`	內容區塊
`<aside>`	側邊欄
`<footer>`	頁腳/區腳

十四、總結

回顧本教程的要點：

HTML 就是給內容貼標籤，告訴瀏覽器每個內容是什麼
網頁骨架：<!DOCTYPE> → <html> → <head> + <body>
文本標籤：<h1> 標題、<p> 段落、<strong> 加粗、<em> 斜體
鏈接用 <a href>，圖片用 <img src alt>
列表分無序 <ul> 和有序 <ol>，每項用 <li>
表格：<table> → <tr> 行 → <th> 表頭 / <td> 單元格
表單：<form> 包含各種 <input> 輸入框
語義化標籤讓代碼更清晰、SEO 更友好
<div> 是塊級容器，<span> 是行內容器
每個標籤都可以有 id、class、style 等屬性

學會了 HTML，你就能搭建網頁的「骨架」。接下來學習 CSS 來美化它，再用 JavaScript 讓它動起來！

相關閱讀：

HTML5 基礎入門教程 2026 | 零基礎小白學網頁 ​

一、HTML 是什麼？ ​

1.1 通俗理解 ​

1.2 HTML 長什麼樣？ ​

1.3 寫第一個網頁 ​

1.4 網頁骨架解釋 ​

二、常用文本標籤 ​

2.1 標題標籤 h1 ~ h6 ​

2.2 段落和換行 ​

2.3 文本格式化 ​

2.4 水平分割線 ​

三、鏈接和圖片 ​

3.1 超鏈接 a ​

3.2 圖片 img ​

3.3 圖文鏈接 ​

四、列表 ​

4.1 無序列表 ul ​

4.2 有序列表 ol ​

4.3 嵌套列表 ​

五、表格 ​

5.1 基本表格 ​

5.2 合併單元格 ​

5.3 完整表格結構 ​

六、表單（用戶輸入） ​

6.1 基本表單 ​

6.2 各種輸入類型 ​

6.3 單選和複選 ​

6.4 下拉選擇 ​

6.5 文本域 ​

七、語義化標籤 ​

7.1 什麼是語義化？ ​

7.2 常用語義化標籤 ​

7.3 完整頁面結構示例 ​

八、div 和 span ​

8.1 塊級元素 div ​

8.2 行內元素 span ​

8.3 塊級 vs 行內 ​

九、多媒體標籤 ​

9.1 視頻 video ​

9.2 音頻 audio ​

9.3 iframe 嵌入 ​

十、HTML 屬性詳解 ​

10.1 通用屬性 ​

10.2 id vs class ​

十一、實戰練習 ​

11.1 練習一：個人簡歷頁 ​

11.2 練習二：註冊表單 ​

十二、常見問題 ​

12.1 標籤必須小寫嗎？ ​

12.2 標籤必須閉合嗎？ ​

12.3 HTML 文件必須有什麼？ ​

12.4 <!DOCTYPE html> 是什麼？ ​

十三、HTML 速查表 ​

13.1 常用標籤速查 ​

13.2 語義化標籤速查 ​

十四、總結 ​

HTML5 基礎入門教程 2026 | 零基礎小白學網頁

一、HTML 是什麼？

1.1 通俗理解

1.2 HTML 長什麼樣？

1.3 寫第一個網頁

1.4 網頁骨架解釋

二、常用文本標籤

2.1 標題標籤 h1 ~ h6

2.2 段落和換行

2.3 文本格式化

2.4 水平分割線

三、鏈接和圖片

3.1 超鏈接 a

3.2 圖片 img

3.3 圖文鏈接

四、列表

4.1 無序列表 ul

4.2 有序列表 ol

4.3 嵌套列表

五、表格

5.1 基本表格

5.2 合併單元格

5.3 完整表格結構

六、表單（用戶輸入）

6.1 基本表單

6.2 各種輸入類型

6.3 單選和複選

6.4 下拉選擇

6.5 文本域

七、語義化標籤

7.1 什麼是語義化？

7.2 常用語義化標籤

7.3 完整頁面結構示例

八、div 和 span

8.1 塊級元素 div

8.2 行內元素 span

8.3 塊級 vs 行內

九、多媒體標籤

9.1 視頻 video

9.2 音頻 audio

9.3 iframe 嵌入

十、HTML 屬性詳解

10.1 通用屬性

10.2 id vs class

十一、實戰練習

11.1 練習一：個人簡歷頁

11.2 練習二：註冊表單

十二、常見問題

12.1 標籤必須小寫嗎？

12.2 標籤必須閉合嗎？

12.3 HTML 文件必須有什麼？

12.4 `<!DOCTYPE html>` 是什麼？

十三、HTML 速查表

13.1 常用標籤速查

13.2 語義化標籤速查

十四、總結