HTML 核心標簽全解析：從文本排版到媒體嵌入

在網頁開發中，HTML（超文本標記語言）是構建頁面結構的基石。掌握各類核心標簽的用法，是實現頁面內容有序呈現、提升用戶體驗的關鍵。本文將系統講解 HTML 中最常用的幾類標簽 —— 段落標簽、文本格式標簽、列表標簽、表格（table）標簽、媒體標簽及超鏈接標簽，結合實例代碼與效果說明，幫助初學者快速上手。

一、段落標簽：實現文本結構化排版

段落標簽是 HTML 中用于定義文本段落的基礎標簽，核心作用是將文本內容分割為邏輯獨立的區塊，讓頁面布局更清晰。

1. 核心段落標簽：``

標簽是定義段落的標準標簽，瀏覽器會自動在標簽包裹的內容前后添加空白（默認 margin），區分不同段落。

<p>這是一個完整的段落內容，瀏覽器會自動為段落添加上下間距。</p>
<p>這是第二個段落，通過<p>標簽可以輕松實現文本的分段展示，提升可讀性。</p>

效果說明：兩個段落之間會有明顯的垂直間距，避免文本堆積。

2. 換行標簽：` `

當需要在段落內部強制換行（而非新建段落）時，使用 標簽。它是單標簽（無需閉合），僅表示 “此處換行”。

<p>床前明月光，<br>疑是地上霜。<br>舉頭望明月，<br>低頭思故鄉。</p>

效果說明：詩句每句后會強制換行，呈現古詩的分行格式，且整體仍屬于一個段落（無段落間的大間距）。

3. 水平線標簽：`<hr>`

<hr>標簽用于在頁面中插入一條水平線，常用于分隔不同主題的內容（如章節分割），同樣是單標簽。

<p>以上是第一章節內容</p>
<hr>
<p>以下是第二章節內容</p>

效果說明：兩段文本之間會顯示一條橫貫頁面的水平線，視覺上劃分內容模塊。

二、文本格式標簽：美化與強調文本

文本格式標簽用于調整文本的樣式（如粗細、斜體）或賦予文本特殊含義（如強調、引用），讓內容更具層次感。

1. 常用文本格式標簽匯總

下表整理了 HTML 中最常用的文本格式標簽，包含標簽功能、語法及實例：

標簽	功能描述	語法示例	效果預覽
`<b>`	文本加粗（僅視覺效果）	`<b>這是加粗文本</b>`	這是加粗文本
`<strong>`	文本加粗（強調語義，推薦）	`<strong>這是強調的加粗文本</strong>`	這是強調的加粗文本
`<i>`	文本斜體（僅視覺效果）	`<i>這是斜體文本</i>`	這是斜體文本
`<em>`	文本斜體（強調語義，推薦）	`<em>這是強調的斜體文本</em>`	這是強調的斜體文本
`<u>`	文本下劃線	`<u>這是帶下劃線的文本</u>`	這是帶下劃線的文本
`<s>`	文本刪除線	`<s>這是帶刪除線的文本</s>`	<s>這是帶刪除線的文本</s>
`<sup>`	上標文本（如公式、注釋）	`x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup>`	x2 + y2 = r2
`<sub>`	下標文本（如化學公式）	`H<sub>2</sub>O`	H?O
`<code>`	代碼片段（等寬字體）	`<code>console.log("Hello HTML")</code>`	`console.log("Hello HTML")`

2. 語義化建議

優先使用和而非和：前者不僅有視覺效果，還能向搜索引擎、屏幕閱讀器傳遞 “強調” 的語義，提升頁面可訪問性。

<code>標簽通常配合<pre>標簽使用（<pre>保留文本中的空格和換行），用于展示多行代碼：

<pre><code>// 計算兩數之和function add(a, b) {return a + b;}</code>
</pre>

三、列表標簽：有序與無序列表的應用

列表標簽用于將相關內容以 “列表” 形式呈現，分為無序列表（內容無先后順序）和有序列表（內容有明確順序）兩類，此外還有用于定義術語的定義列表。

1. 無序列表：`<ul>`?+?`<li>`

無序列表由<ul>（unordered list）作為容器，內部每個列表項用<li>（list item）包裹，默認以 “圓點” 作為列表項標記（可通過 CSS 修改）。

實例：網頁導航菜單（無序列表常見場景）

<!-- 導航菜單 -->
<ul style="list-style-type: none; display: flex; gap: 20px;"><li><a href="#home">首頁</a></li><li><a href="#news">新聞</a></li><li><a href="#about">關于我們</a></li><li><a href="#contact">聯系我們</a></li>
</ul>

說明：

list-style-type: none：取消默認圓點標記；

display: flex：將列表項橫向排列（默認縱向），實現導航欄效果。

2. 有序列表：`<ol>`?+?`<li>`

有序列表由<ol>（ordered list）作為容器，列表項同樣用<li>包裹，默認以 “數字” 作為標記（可修改為字母、羅馬數字等）。

實例：步驟說明（有序列表常見場景）

<!-- 泡茶步驟 -->
<ol start="1" type="1"><li>燒開水至80℃（綠茶）或95℃（紅茶）；</li><li>將茶葉放入茶壺或茶杯中；</li><li>倒入熱水，浸泡3-5分鐘；</li><li>待茶湯變色后即可飲用。</ol>

關鍵屬性：

?start：指定列表起始數字（如start="3"表示從 3 開始）；

?type：指定標記類型（1：數字，A：大寫字母，a：小寫字母，I：大寫羅馬數字，i：小寫羅馬數字）。

3. 定義列表：`<dl>`?+?`<dt>`?+?`<dd>`

定義列表用于 “術語 - 解釋” 場景，由<dl>（definition list）作為容器，<dt>（definition term）定義術語，<dd>（definition description）定義術語解釋。

實例：HTML 術語解釋

<dl><dt>HTML</dt><dd>超文本標記語言（HyperText Markup Language），用于構建網頁結構。</dd><dt>CSS</dt><dd>層疊樣式表（Cascading Style Sheets），用于美化網頁樣式。</dd><dt>JavaScript</dt><dd>一種腳本語言，用于實現網頁交互功能（如點擊事件、表單驗證）。</dd>
</dl>

效果說明：<dd>內容會默認縮進，與<dt>術語形成視覺區分。

四、表格標簽（table）：結構化展示數據

表格標簽用于以 “行 - 列” 形式展示結構化數據（如報表、課程表、商品屬性），核心標簽包括<table>（表格容器）、<tr>（表格行）、<td>（表格單元格），以及用于表頭的<th>標簽。

1. 表格基礎結構

一個完整的表格通常包含 “表頭” 和 “表體”，基礎語法如下：

<table border="1" width="600" align="center"><!-- 表頭行 --><tr><th>姓名</th><th>年齡</th><th>職業</th><th>所在城市</th></tr><!-- 表體行1 --><tr><td>張三</td><td>28</td><td>前端開發工程師</td><td>北京</td></tr><!-- 表體行2 --><tr><td>李四</td><td>32</td><td>產品經理</td><td>上海</td></tr>
</table>

核心標簽說明：

?<table>：表格容器，border="1"表示顯示表格邊框（默認無邊框）；

?<tr>：定義表格的一行（table row），每個<tr>包含若干<td>或<th>；

?<th>：表頭單元格（table header），默認文本居中、加粗；

?<td>：普通單元格（table data），默認文本左對齊。

2. 表格進階：單元格合并

當需要合并多行或多列單元格時，使用rowspan（跨行合并）和colspan（跨列合并）屬性。

實例：帶合并單元格的課程表

<table border="1" width="800" align="center"><tr><th colspan="2">時間/日期</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td rowspan="2">上午</td><td>9:00-10:30</td><td>HTML</td><td>CSS</td><td>JavaScript</td><td>HTML</td><td>CSS</td></tr><tr><td>10:50-12:20</td><td>CSS</td><td>JavaScript</td><td>HTML</td><td>CSS</td><td>JavaScript</td></tr><tr><td colspan="7" align="center">下午：自由練習（14:00-17:00）</td></tr>
</table>

屬性說明：

?colspan="2"：表示當前單元格跨 2 列；

?rowspan="2"：表示當前單元格跨 2 行；

?align="center"：設置單元格內容水平居中（建議后續用 CSS 替代）。

五、媒體標簽：嵌入圖片、音頻與視頻

HTML5 新增了原生媒體標簽，支持無需插件直接嵌入圖片、音頻和視頻，極大簡化了媒體內容的展示流程。

1. 圖片標簽：`<img>`

<img>標簽用于在頁面中插入圖片，是單標簽，核心屬性包括src（圖片路徑）和alt（圖片加載失敗時的替代文本）。

語法格式與實例：

<!-- 插入本地圖片（相對路徑） -->
<img src="./images/flower.jpg" alt="一朵紅色的花" width="400" height="300" title="花朵"><!-- 插入網絡圖片（絕對路徑） -->
<img src="https://example.com/animal/dog.jpg" alt="一只可愛的小狗" width="400">

核心屬性說明：

?src：必填屬性，指定圖片的路徑（相對路徑：相對于當前 HTML 文件的位置；絕對路徑：完整的 URL 地址）；

?alt：必填屬性，圖片加載失敗或屏幕閱讀器訪問時顯示的文本，提升可訪問性；

?width/height：可選屬性，設置圖片寬度 / 高度（單位：像素 px），僅設置一個屬性時，圖片會按比例縮放；

?title：可選屬性，鼠標懸停在圖片上時顯示的提示文本。

2. 音頻標簽：`<audio>`

<audio>標簽用于嵌入音頻文件（如 MP3、WAV），支持控制播放、暫停等功能，需配合<source>標簽指定不同格式的音頻文件（兼容不同瀏覽器）。

實例：嵌入音頻并顯示控制欄

<audio controls autoplay loop preload="auto"><source src="./audio/music.mp3" type="audio/mpeg"><source src="./audio/music.wav" type="audio/wav">您的瀏覽器不支持音頻播放，請升級瀏覽器。
</audio>

核心屬性說明：

?controls：顯示音頻控制欄（播放 / 暫停、音量、進度條）；

?autoplay：頁面加載完成后自動播放（部分瀏覽器需用戶交互后才生效，避免擾民）；

?loop：音頻播放完畢后自動循環；

?preload：指定音頻預加載方式（auto：自動預加載；none：不預加載；metadata：僅預加載音頻信息，如時長）；

?<source>：指定多個音頻格式，瀏覽器會選擇第一個支持的格式播放；

? ?標簽內部的文本：瀏覽器不支持<audio>標簽時顯示的提示信息。

3. 視頻標簽：`<video>`

<video>標簽用于嵌入視頻文件（如 MP4、WebM），用法與<audio>類似，支持控制播放、全屏等功能。

實例：嵌入視頻并設置尺寸

<video controls width="800" height="450" poster="./images/video-cover.jpg"><source src="./video/movie.mp4" type="video/mp4"><source src="./video/movie.webm" type="video/webm">您的瀏覽器不支持視頻播放，請升級瀏覽器。
</video>

核心屬性補充：

?poster：視頻加載前顯示的封面圖片（如視頻第一幀截圖）；

?width/height：設置視頻播放器的寬度 / 高度，視頻會按比例縮放；

? ?其他屬性（controls/autoplay/loop/preload）與<audio>標簽一致。

六、超鏈接標簽：實現頁面跳轉與資源鏈接

超鏈接（<a>標簽）是 HTML “超文本” 特性的核心，用于實現頁面內跳轉、跨頁面跳轉、下載資源等功能，是連接不同網頁的橋梁。

1. 超鏈接基礎語法

<a>標簽通過href屬性指定鏈接目標，標簽內部的文本或圖片即為 “可點擊的鏈接載體”。

語法格式：

<a href="目標地址" target="打開方式">鏈接文本/圖片</a>

2. 常見鏈接類型與實例

（1）跨頁面跳轉（外部鏈接）

鏈接到其他網站或同一網站的其他頁面，href為目標頁面的 URL 或相對路徑。

<!-- 鏈接到外部網站（絕對路徑） -->
<a href="https://www.csdn.net" target="_blank">訪問CSDN（新窗口打開）</a><!-- 鏈接到同一網站的其他頁面（相對路徑） -->
<a href="./about.html" target="_self">查看“關于我們”頁面（當前窗口打開）</a>

（2）頁面內跳轉（錨點鏈接）

用于跳轉到當前頁面的指定位置（如長文檔的章節導航），需先定義 “錨點”，再通過href="#錨點名稱"鏈接到錨點。

<!-- 1. 定義錨點（兩種方式） -->
<!-- 方式1：使用id屬性（推薦，支持所有標簽） -->
<h2 id="chapter1">第一章：HTML基礎</h2><!-- 方式2：使用<a name="錨點名稱">（舊方式，僅支持<a>標簽） -->
<a name="chapter2"></a>
<h2>第二章：CSS樣式</h2><!-- 2. 鏈接到錨點 -->
<a href="#chapter1">跳轉到第一章</a>
<a href="#chapter2">跳轉到第二章</a><!-- 3. 從其他頁面跳轉到當前頁面的錨點 -->
<a href="./index.html#chapter1">從首頁跳轉到第一章</a>

（3）下載鏈接

當href指向的是文件（如 ZIP、PDF）且瀏覽器無法直接解析時，點擊鏈接會觸發文件下載；若需強制下載，可添加download屬性。

<!-- 瀏覽器無法解析的文件，自動觸發下載 -->
<a href="./files/HTML教程.zip">下載HTML教程（ZIP）</a><!-- 強制下載（即使瀏覽器可解析，如PDF） -->
<a href="./files/簡歷.pdf" download="我的簡歷.pdf">下載簡歷（PDF）</a>

說明：download屬性的值為下載文件的默認名稱（可選，若不指定則使用原文件名）。

（4）空鏈接與郵件鏈接

????????空鏈接：暫時未確定目標地址時，用href="#"（點擊后會回到頁面頂部）或href="javascript:;"（點擊后無任何動作）。

<a href="#">暫未開放（點擊回到頂部）</a>
<a href="javascript:;">暫未開放（點擊無動作）</a>

????????郵件鏈接：href以mailto:開頭，點擊后會調用系統默認郵件客戶端，發送郵件到指定地址

<a href="mailto:example@csdn.net">發送郵件到example@csdn.net</a>
<!-- 帶默認主題和內容 -->
<a href="mailto:example@csdn.net?subject=咨詢HTML問題&body=您好，我想咨詢關于...">發送咨詢郵件</a>

3.?`target`屬性詳解

target屬性用于指定鏈接的打開方式，常用值如下：

target 值	功能描述
`_self`	默認值，在當前窗口 / 標簽頁打開目標頁面
`_blank`	在新窗口 / 標簽頁打開目標頁面（推薦添加`rel="noopener noreferrer"`提升安全性）
`_parent`	在父框架中打開目標頁面（用于框架頁面）
`_top`	在頂層框架中打開目標頁面（打破框架嵌套）
自定義名稱	在指定名稱的框架 / 窗口中打開目標頁面

安全建議：使用target="_blank"時，建議添加rel="noopener noreferrer"，防止新頁面通過window.opener獲取原頁面的控制權，避免安全風險。

<a href="https://www.csdn.net" target="_blank" rel="noopener noreferrer">訪問CSDN（安全新窗口打開）</a>

總結

本文詳細講解了 HTML 中 6 類核心標簽的用法，從文本排版（段落、文本格式）到結構化數據（列表、表格），再到媒體嵌入（圖片、音頻、視頻）和頁面連接（超鏈接），覆蓋了網頁開發的基礎場景。

學習 HTML 的關鍵在于理解標簽的語義（如強調語義而非僅加粗）和實用性（如表格用于數據展示，列表用于導航），后續結合 CSS（樣式）和 JavaScript（交互），可進一步實現更豐富的網頁效果。建議通過 “編寫代碼 + 瀏覽器預覽” 的方式反復練習，逐步掌握標簽的靈活應用。