Examples

HTML Inline Elements

依功能分類整理常見 HTML inline 元素，每一節都附示例 preview 與可複製程式碼。

連結 文字格式 方向與舊式標籤 圖片與輸入 Code / Kbd / Samp 引用 語意 圖片地圖

1. 連結（Links）

這是一個超連結 

<a href="#">這是一個超連結</a>

2. 文字格式（Text Formatting）

這是一段文字，包含 粗體、斜體、強調、 語氣強調、小字、 HTML。
換行示例：第一行
第二行（使用 <br>）
上標：23
下標：H2O
時間：

<b>粗體</b>
<i>斜體</i>
<strong>強調</strong>
<em>語氣強調</em>
<small>小字</small>
<abbr title="HyperText Markup Language">HTML</abbr>
<br>
2<sup>3</sup>
H<sub>2</sub>O
<time datetime="2025-01-01">日期</time>

3. 文字方向與舊式標籤（Direction & Deprecated）

文字方向右至左
WWW（已淘汰）
舊式等寬字體（已淘汰）
放大字體（不推薦）

<bdo dir="rtl">文字方向右至左</bdo>
<acronym title="World Wide Web">WWW</acronym>
<tt>舊式等寬字體</tt>
<big>放大字體</big>

4. 圖片與表單輸入（Inline Media & Inputs）

示例圖片



選擇城市：
留言：
計算結果：8
無法顯示 PDF 

<img src="images/disneyland.jpg" alt="示例">
<input type="text">
<label>姓名：<input type="text"></label>
<button>按鈕</button>
<select><option>香港</option></select>
<textarea>輸入內容</textarea>
<output>8</output>
<object data="sample.pdf" type="application/pdf">PDF</object>

5. 程式碼、鍵盤與系統輸出（Code / Kbd / Samp）

按下 Ctrl + C 複製內容。
程式碼：console.log("Hi")
系統輸出：Hello World
Script： 

<kbd>Ctrl</kbd>
<code>console.log("Hi")</code>
<samp>Hello World</samp>
<script>document.write("Script執行")</script>

6. 引用（Quotes）

短引用：人生苦短，學習 HTML
哈利波特（作品名稱） 

<q>人生苦短，學習 HTML</q>
<cite>哈利波特</cite>

7. 變數與語意（Semantics）

計算：x + y 

<var>x</var> + <var>y</var>

8. 圖片地圖（Image Map）


<img src="demo.jpg" usemap="#demoMap">
<map name="demoMap">
  <area shape="rect" coords="0,0,50,50" href="#">
</map>