<text> 文字排版(33)
<h1> 最高層級標題
<h1>主標題</h1>常用屬性：idclass
<h2> 第二層級標題
<h2>副標題</h2>常用屬性：idclass
<h3> 第三層級標題
<h3>小標題</h3>常用屬性：idclass
<h4> 第四層級標題
<h4>段落標題</h4> <h5> 第五層級標題
<h5>子段落標題</h5> <h6> 最低層級標題
<h6>最小標題</h6> <p> 段落文字
<p>這是一段文字。</p> <span> 行內文字容器
<span class="highlight">重點文字</span>常用屬性：classstyle
<strong> 重要性強調（粗體）
<strong>非常重要</strong> <em> 語氣強調（斜體）
<em>請注意</em> <b> 粗體文字（無語意強調）
<b>粗體字</b> <i> 斜體文字（術語、外文）
<i>italic</i> <u> 底線文字
<u>標記文字</u> <s> 刪除線文字
<s>已過時的內容</s> <mark> 標記/螢光筆效果
<mark>搜尋結果高亮</mark> <small> 小字（附註、免責聲明）
<small>版權所有 2026</small> <sub> 下標文字
H<sub>2</sub>O <sup> 上標文字
E=mc<sup>2</sup> <br> 換行
第一行<br>第二行 <hr> 水平分隔線
<p>段落一</p>
<hr>
<p>段落二</p> <blockquote> 引用區塊
<blockquote cite="https://example.com">
<p>被引用的文字</p>
</blockquote>常用屬性：cite
<pre> 預格式化文字（保留空白）
<pre>
function hello() {
console.log("Hi");
}
</pre> <code> 行內程式碼
使用 <code>console.log()</code> 輸出 <kbd> 鍵盤輸入
按下 <kbd>Ctrl</kbd>+<kbd>C</kbd> 複製 <abbr> 縮寫（滑鼠懸停顯示全名）
<abbr title="HyperText Markup Language">HTML</abbr>常用屬性：title
<cite> 引用來源（書名、文章名）
<cite>深入淺出 HTML</cite> <q> 行內引用
<q>簡短的引用文字</q>常用屬性：cite
<del> 已刪除的文字
<del>舊價格 $100</del>常用屬性：citedatetime
<ins> 新插入的文字
<ins>新價格 $80</ins>常用屬性：citedatetime
<var> 變數名稱
<var>x</var> = <var>y</var> + 2 <samp> 程式輸出範例
<samp>Error: file not found</samp> <ruby> 注音/拼音標記
<ruby>漢<rt>ㄏㄢˋ</rt></ruby> <wbr> 建議換行點
supercalifragilistic<wbr>expialidocious <list> 列表(6)
<ul> 無序列表
<ul>
<li>項目 A</li>
<li>項目 B</li>
</ul> <ol> 有序列表
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>常用屬性：starttypereversed
<li> 列表項目
<li>列表項目</li>常用屬性：value
<dl> 定義列表
<dl>
<dt>HTML</dt>
<dd>超文本標記語言</dd>
</dl> <dt> 定義列表的術語
<dt>CSS</dt> <dd> 定義列表的描述
<dd>層疊樣式表</dd> <table> 表格(10)
<table> 表格
<table>
<tr>
<th>標題</th>
<td>資料</td>
</tr>
</table> <thead> 表格標題區
<thead>
<tr><th>欄位</th></tr>
</thead> <tbody> 表格主體區
<tbody>
<tr><td>資料</td></tr>
</tbody> <tfoot> 表格頁尾區
<tfoot>
<tr><td>合計</td></tr>
</tfoot> <tr> 表格列
<tr>
<td>儲存格</td>
</tr> <th> 表格標題儲存格
<th scope="col">姓名</th>常用屬性：scopecolspanrowspan
<td> 表格資料儲存格
<td>內容</td>常用屬性：colspanrowspan
<caption> 表格標題說明
<caption>使用者列表</caption> <colgroup> 欄位群組
<colgroup>
<col span="2" style="background: #eee">
</colgroup> <col> 欄位屬性定義
<col span="1" style="width: 200px">常用屬性：span
<form> 表單(14)
<form> 表單容器
<form action="/submit" method="post">
<!-- 表單欄位 -->
</form>常用屬性：actionmethodenctypenovalidate
<input> 輸入欄位（多種類型）
<input type="text" name="username"
placeholder="輸入使用者名稱">常用屬性：typenamevalueplaceholderrequireddisabledreadonlypatternminmax
<textarea> 多行文字輸入
<textarea rows="4" cols="50"
placeholder="輸入內容..."></textarea>常用屬性：rowscolsplaceholdermaxlength
<select> 下拉選單
<select name="color">
<option value="red">紅色</option>
<option value="blue">藍色</option>
</select>常用屬性：namemultiplesize
<option> 選項
<option value="tw" selected>台灣</option>常用屬性：valueselecteddisabled
<optgroup> 選項群組
<optgroup label="亞洲">
<option>台灣</option>
<option>日本</option>
</optgroup>常用屬性：label
<button> 按鈕
<button type="submit">送出</button>常用屬性：typedisablednamevalue
<label> 欄位標籤
<label for="email">電子信箱</label>
<input id="email" type="email">常用屬性：for
<fieldset> 表單欄位群組
<fieldset>
<legend>個人資訊</legend>
<!-- 欄位 -->
</fieldset> <legend> fieldset 的標題
<legend>聯絡方式</legend> <datalist> 輸入建議列表
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>常用屬性：id
<output> 計算結果輸出
<output name="result">42</output>常用屬性：forname
<progress> 進度條
<progress value="70" max="100">70%</progress>常用屬性：valuemax
<meter> 度量衡/計量表
<meter value="0.7" min="0" max="1">70%</meter>常用屬性：valueminmaxlowhighoptimum
<media> 多媒體(10)
<img> 圖片
<img src="photo.jpg" alt="風景照片"
width="300" height="200">常用屬性：srcaltwidthheightloadingsrcsetsizes
<video> 影片播放器
<video src="movie.mp4" controls
width="640" height="360">
您的瀏覽器不支援影片
</video>常用屬性：srccontrolsautoplayloopmutedposterpreloadwidthheight
<audio> 音訊播放器
<audio src="song.mp3" controls>
您的瀏覽器不支援音訊
</audio>常用屬性：srccontrolsautoplayloopmutedpreload
<source> 媒體來源（多格式）
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
</video>常用屬性：srctypesrcsetsizesmedia
<track> 字幕/文字軌道
<track src="subtitles.vtt" kind="subtitles"
srclang="zh" label="中文">常用屬性：srckindsrclanglabeldefault
<picture> 響應式圖片容器
<picture>
<source media="(min-width: 800px)"
srcset="large.jpg">
<img src="small.jpg" alt="響應式圖片">
</picture> <canvas> 繪圖畫布
<canvas id="myCanvas" width="400"
height="300"></canvas>常用屬性：widthheight
<svg> 可縮放向量圖形
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
fill="green" />
</svg>常用屬性：widthheightviewBoxxmlns
<map> 圖片地圖（可點擊區域）
<img src="world.jpg" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="0,0,100,100"
href="/asia">
</map>常用屬性：name
<area> 圖片地圖的可點擊區域
<area shape="circle" coords="50,50,30"
href="/link" alt="區域說明">常用屬性：shapecoordshrefalttarget
<semantic> 語意結構(12)
<header> 頁面或區段的頁首
<header>
<h1>網站名稱</h1>
<nav><!-- 導覽 --></nav>
</header> <footer> 頁面或區段的頁尾
<footer>
<p>© 2026 公司名稱</p>
</footer> <main> 頁面主要內容（每頁僅一個）
<main>
<h1>文章標題</h1>
<p>主要內容...</p>
</main> <nav> 導覽連結區
<nav>
<a href="/">首頁</a>
<a href="/about">關於</a>
</nav> <article> 獨立的文章/內容
<article>
<h2>文章標題</h2>
<p>文章內容...</p>
</article> <section> 主題性內容區段
<section>
<h2>章節標題</h2>
<p>章節內容...</p>
</section> <aside> 側邊欄/附加內容
<aside>
<h3>相關連結</h3>
<ul><!-- 連結列表 --></ul>
</aside> <figure> 圖表/插圖容器
<figure>
<img src="chart.png" alt="統計圖">
<figcaption>2026 年銷售統計</figcaption>
</figure> <figcaption> figure 的說明文字
<figcaption>圖 1：架構示意圖</figcaption> <address> 聯絡資訊
<address>
作者：<a href="mailto:[email protected]">Ray</a>
</address> <time> 日期/時間
<time datetime="2026-02-07">2026 年 2 月 7 日</time>常用屬性：datetime
<search> 搜尋區塊（HTML5.2+）
<search>
<form action="/search">
<input type="search" name="q">
</form>
</search> <embed> 嵌入(4)
<iframe> 嵌入外部頁面
<iframe src="https://example.com"
width="600" height="400"
title="範例網站"></iframe>常用屬性：srcwidthheighttitlesandboxallowloading
<embed> 嵌入外部資源
<embed src="file.pdf" type="application/pdf"
width="600" height="400">常用屬性：srctypewidthheight
<object> 嵌入物件
<object data="movie.swf"
type="application/x-shockwave-flash"
width="400" height="300">
<p>替代內容</p>
</object>常用屬性：datatypewidthheight
<portal> 嵌入預覽頁面（實驗性）
<portal src="https://example.com"></portal>常用屬性：src
<interactive> 互動(3)
<details> 可展開/收合的內容
<details>
<summary>點擊查看更多</summary>
<p>這裡是隱藏的詳細內容。</p>
</details>常用屬性：open
<summary> details 的摘要/標題
<summary>常見問題</summary> <dialog> 對話框/彈出視窗
<dialog id="myDialog">
<h2>提示</h2>
<p>確定要刪除嗎？</p>
<button>確定</button>
</dialog>常用屬性：open
<metadata> 元資料(9)
<html> HTML 文件根元素
<!DOCTYPE html>
<html lang="zh-TW">
<!-- 文件內容 -->
</html>常用屬性：lang
<head> 文件元資料容器
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head> <title> 文件標題
<title>我的網站 - 首頁</title> <meta> 元資料
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta name="description"
content="網站描述">常用屬性：charsetnamecontenthttp-equiv
<link> 外部資源連結
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">常用屬性：relhreftypemedia
<style> 內嵌樣式
<style>
body { margin: 0; }
h1 { color: blue; }
</style>常用屬性：media
<script> 腳本程式
<script src="app.js"></script>
<script>
console.log("Hello!");
</script>常用屬性：srctypeasyncdefermodule
<base> 基準 URL
<base href="https://example.com/" target="_blank">常用屬性：hreftarget
<noscript> 無腳本時的替代內容
<noscript>
<p>請啟用 JavaScript 以正常瀏覽</p>
</noscript> <other> 其他(4)
<div> 通用區塊容器
<div class="container">
<p>區塊內容</p>
</div>常用屬性：classidstyle
<template> 內容模板（不顯示）
<template id="card-tpl">
<div class="card">
<h3></h3>
<p></p>
</div>
</template> <slot> Web Component 插槽
<slot name="header">預設標題</slot>常用屬性：name
<data> 機器可讀的資料
<data value="398">NT$398</data>常用屬性：value