HTML怎么在文字下面添加下劃線

# HTML怎么在文字下面添加下劃線

在網頁設計中，下劃線是常見的文本裝飾效果，用于強調內容或模擬超鏈接樣式。HTML提供了多種實現方式，本文將詳細介紹5種主流方法及其適用場景。

## 一、使用`<u>`標簽（語義化下劃線）

```html
<p>這是<u>帶下劃線</u>的文字</p>

特點： - HTML4原生語義化標簽 - 表示”非文本注釋”內容（如拼寫錯誤） - 默認樣式為單線下劃線

注意：HTML5中<u>的語義已改為”非文本注釋”，建議優先使用CSS實現裝飾性下劃線。

二、CSS的text-decoration屬性（推薦方案）

<style>
  .underline {
    text-decoration: underline;
  }
</style>
<p>這是<span class="underline">CSS下劃線</span>效果</p>

優勢： - 支持樣式定制（顏色/樣式/粗細） - 可通過:hover添加交互效果 - 符合內容與樣式分離原則

擴展樣式：

.fancy-underline {
  text-decoration: underline wavy #ff5722;
  text-underline-offset: 4px;
}

三、<span>+邊框模擬（自定義下劃線）

<style>
  .border-underline {
    border-bottom: 2px dotted #3f51b5;
    padding-bottom: 2px;
  }
</style>
<p>這是<span class="border-underline">邊框模擬</span>的下劃線</p>

適用場景： - 需要虛線/雙線等特殊樣式 - 控制下劃線位置（通過padding-bottom） - 實現漸變/圖片下劃線

四、偽元素實現（高級效果）

.hover-underline::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #4caf50;
  transition: width 0.3s;
}

.hover-underline:hover::after {
  width: 100%;
}

動態效果： - 懸停動畫下劃線 - 可配合transform實現更多動效 - 不占用DOM節點

五、HTML特殊屬性（已廢棄方法）

<font style="text-decoration: underline">舊式寫法</font>

注意： - <font>標簽已在HTML5廢棄 - 行內樣式不利于維護 - 僅作歷史了解，不建議使用

最佳實踐建議

1. 語義優先：內容強調優先考慮<strong>/<em>
2. 樣式控制：
   • 簡單下劃線：text-decoration
   • 復雜效果：偽元素方案
3. 可訪問性：
   • 避免與鏈接樣式混淆
   • 確保顏色對比度達標（WCAG 2.1標準）

瀏覽器兼容性

通過合理選擇這些方法，開發者可以靈活實現從簡單到復雜的各種下劃線效果，同時保證代碼的可維護性和語義正確性。 “`

注：實際字符數約650字（含代碼示例），可根據需要增減示例或調整說明細節。