<u>: 未明確註釋(下劃線)元素

基線 廣泛可用

此功能已完善,可在許多裝置和瀏覽器版本上執行。它自 2015 年 7 月.

<u> HTML 元素表示一段應以某種方式呈現的內聯文字,以表明它具有非文字註釋。預設情況下,它呈現為簡單的實線,但可以使用 CSS 更改其樣式。

警告:此元素在較早版本的 HTML 中稱為“下劃線”元素,有時仍會被錯誤地用作此目的。要對文字新增下劃線,應使用包含 CSS text-decoration 屬性(設定為 underline)的樣式。

試試看

請參閱使用說明部分,以瞭解何時適合使用 <u>,以及何時不適合。

屬性

此元素僅包含全域性屬性

使用說明

與其他純粹的樣式元素一樣,原始 HTML 下劃線 (<u>) 元素在 HTML 4 中已棄用;但是,<u> 在 HTML 5 中恢復了,並賦予了新的語義含義:將文字標記為已應用某種形式的非文字註釋。

注意:避免使用<u>元素及其預設樣式(下劃線文字)的方式,以免與預設情況下也帶下劃線的超連結混淆。

用例

<u>元素的有效用例包括標註拼寫錯誤,對中文文字中的專有名詞應用專有名詞標記,以及其他形式的標註。

不應該使用<u>來為演示目的或表示書籍標題而對文字進行下劃線。

其他要考慮使用的元素

在大多數情況下,您應該使用<u>以外的元素,例如

  • <em> 表示強調
  • <b> 吸引對文字的注意
  • <mark> 標記關鍵詞或短語
  • <strong> 表示文字具有重要意義
  • <cite> 標記書籍或其他出版物的標題
  • <i> 表示西方文字中的專業術語、音譯、想法或船舶名稱

要提供文字註釋(與使用<u>建立的非文字註釋相反),請使用<ruby> 元素。

要應用帶下劃線的樣式而沒有任何語義意義,請使用text-decoration 屬性的值underline

示例

指示拼寫錯誤

此示例使用<u>元素和一些 CSS 來顯示包含拼寫錯誤的段落,錯誤以紅色波浪下劃線樣式顯示,這在該目的中相當常見。

HTML

html
<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>

在 HTML 中,我們看到使用了<u>以及一個類spelling,它用於表示單詞“wrongly”的拼寫錯誤。

CSS

css
u.spelling {
  text-decoration: red wavy underline;
}

此 CSS 指示,當<u>元素使用類spelling進行樣式設定時,其文字下方應該有一個紅色波浪下劃線。這是拼寫錯誤的常見樣式。另一個常見的樣式可以使用red dashed underline來呈現。

結果

結果應該對任何使用過當今流行的文字處理器的使用者都很熟悉。

避免<u>

大多數情況下,您實際上不希望使用<u>。以下是一些示例,展示了在幾種情況下應該做什麼。

非語義下劃線

要對文字進行下劃線而沒有暗示任何語義意義,請使用一個<span> 元素,將text-decoration 屬性設定為"underline",如下所示。

HTML
html
<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots
CSS
css
.underline {
  text-decoration: underline;
}
結果

展示書籍標題

書籍標題應該使用<cite> 元素來表示,而不是使用<u>甚至<i>

使用 cite 元素
html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
設定 cite 元素的樣式

<cite>元素的預設樣式會以斜體形式呈現文字。您可以使用 CSS 覆蓋它。

html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
css
cite {
  font-style: normal;
  text-decoration: underline;
}

技術摘要

內容類別 流內容短語內容、可感知內容。
允許的內容 短語內容.
標籤省略 無,起始和結束標籤都是必需的。
允許的父級 任何接受短語內容的元素。
隱式 ARIA 角色 generic
允許的 ARIA 角色 任何
DOM 介面 HTMLElement

規範

規範
HTML 標準
# the-u-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱