---
title: <u>
slug: Web/HTML/Element/u
translation_of: Web/HTML/Element/u
---
<div>{{HTMLRef}}</div>

<div>
<p><strong>HTML <code>&lt;u&gt;</code> 元素（表意不清标注元素）</strong>表示一个需要标注为非文本化（non-textual）的内联文本域。默认情况下渲染为一个实线下划线，可以用 CSS 替换。</p>
</div>

<div class="warning">
<p>此元素以前在旧版本的 HTML 中称为 “下划线” 元素，但有时仍会以这种方式被滥用。要为文本加下划线，您应该应用包含 CSS {{cssxref("text-decoration")}}属性设置为 <code>underline</code> 的样式。</p>
</div>

<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div>



<p>有关何时适合使用 <code>&lt;u&gt;</code> 以及何时不使用 <code>&lt;u&gt;</code> 的详细信息，请参阅{{anch("Usage notes")}} 部分。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容类别</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式内容</a>，<a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">短语内容</a>，palpable 内容。</td>
  </tr>
  <tr>
   <th scope="row">允许的内容</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">短语内容</a></td>
  </tr>
  <tr>
   <th scope="row">标签省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">允许的父元素</th>
   <td>任何接受<a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">短语内容</a>的元素。</td>
  </tr>
  <tr>
   <th scope="row">允许的 ARIA 角色</th>
   <td>任意</td>
  </tr>
  <tr>
   <th scope="row">DOM 接口</th>
   <td>{{domxref("HTMLElement")}} Gecko 1.9.2 (Firefox 4) 之前（包含）, Firefox 为这个元素实现了 {{domxref("HTMLSpanElement")}}  接口。</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>这个元素仅包含<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p>

<h2 id="使用说明">使用说明</h2>

<p>就像所有排版元素那样， {{ HTMLElement("u") }} 在 HTML 4 中废弃，但是在 HTML 5 中恢复了一个新的语义，意思是：将文本标记为应用了某种形式的非文本注释。</p>

<div class="blockIndicator note">
<p><strong>提示：</strong> 在可能和超链接混淆的地方，避免使用 {{ HTMLElement("u") }}。</p>
</div>

<h3 id="用例">用例</h3>

<p><code>&lt;u&gt;</code>元素的有效用例包括注释拼写错误，应用 {{interwiki("wikipedia", "proper name mark")}} 来表示中文文本中的专有名称以及其他形式的注释。</p>

<p>您不应该使用<code>&lt;u&gt;</code>简单地为文字加下划线，或者表示书籍的标题。</p>

<h3 id="要考虑使用的其他要素">要考虑使用的其他要素</h3>

<p>在大多数情况下，您应该使用&lt;u&gt;以外的元素，例如：</p>

<ul>
 <li>{{HTMLElement("em")}} 表示强调重点</li>
 <li>{{HTMLElement("b")}} 提示注意文字</li>
 <li>{{HTMLElement("mark")}} 标记关键词或短语</li>
 <li>{{HTMLElement("strong")}} 表明文本具有重要意义</li>
 <li>{{HTMLElement("cite")}} 标记书籍或其他出版物的标题</li>
 <li>{{HTMLElement("i")}} 表示西方文本中的技术术语，音译，思想或船名</li>
</ul>

<p>要提供文本注释（与使用<code>&lt;u&gt;</code>创建的非文本注释相对），请使用 {{HTMLElement("ruby")}} 元素。</p>

<p>要应用带下划线的外观而没有任何语义含义，请使用 {{cssxref("text-decoration")}} 属性的值 <code>underline</code>。</p>

<h2 id="示例">示例</h2>

<h3 id="表示拼写错误">表示拼写错误</h3>

<p>此示例使用<code>&lt;u&gt;</code>元素和一些 CSS 来显示包含拼写错误的段落，其中错误以红色波浪下划线样式表示，这种情况通常用于此目的。</p>

<h4 id="HTML">HTML</h4>

<pre class="notranslate"><code>&lt;p&gt;This paragraph includes a &lt;u class="spelling"&gt;wrnogly&lt;/u&gt;
spelled word.&lt;/p&gt;</code></pre>

<p>在 HTML 中，我们看到 <code>&lt;u&gt;</code> 使用了一个类 <code>spelling</code>，用于表示 “wrongly” 一词的拼写错误。</p>

<h4 id="CSS">CSS</h4>

<pre class="notranslate"><code>u.spelling {
  text-decoration: red wavy underline;
}</code></pre>

<p>这个 CSS 表示当 <code>&lt;u&gt;</code> 元素使用类 <code>spelling</code> 进行样式化时，它的文本下面应该有一个红色的波浪下划线。这是拼写错误的常见样式。也可以使用另一种常见样式  <code>red dashed underline</code>.。</p>

<h4 id="结果">结果</h4>

<p>任何使用过今天比较流行的文字处理器的人都应该熟悉结果。</p>

<p>{{EmbedLiveSample("Indicating_a_spelling_error", 650, 80)}}</p>

<h3 id="避免使用_&lt;u>">避免使用 &lt;u&gt;</h3>

<p>大多数情况下，您实际上不想使用 <code>&lt;u&gt;</code>。以下是一些示例，显示在几种情况下您应该做什么。</p>

<h4 id="非语义下划线">非语义下划线</h4>

<p>要在不暗示任何语义含义的情况下为文本加下划线，请使用 {{HTMLElement("span")}} 元素并将 {{cssxref("text-decoration")}} 属性设置为 <code>"underline"</code>，如下所示。</p>

<h5 id="HTML_2">HTML</h5>

<pre class="notranslate"><code>&lt;span class="underline"&gt;Today's Special&lt;/span&gt;
&lt;br&gt;
Chicken Noodle Soup With Carrots</code></pre>

<h5 id="CSS_2">CSS</h5>

<pre class="notranslate"><code>.underline {
  text-decoration: underline;
}</code></pre>

<h5 id="结果_2">结果</h5>

<p>{{EmbedLiveSample("Non-semantic_underlines", 650, 80)}}</p>

<h4 id="表示书名">表示书名</h4>

<p>书籍标题应使用 {{HTMLElement("cite")}} 元素而不是 <code>&lt;u&gt;</code> 甚至 <code>&lt;i&gt;</code> 来呈现。</p>

<h5 id="HTML_3">HTML</h5>

<pre class="notranslate"><code>&lt;p&gt;The class read &lt;cite&gt;Moby Dick&lt;/cite&gt; in the first term.&lt;/p&gt;</code></pre>

<h5 id="默认样式的结果">默认样式的结果</h5>

<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p>

<p>请注意， <code>&lt;cite&gt;</code> 元素的默认样式会以斜体显示文本。如果您愿意，可以使用 CSS 覆盖它：</p>

<pre class="notranslate"><code>cite {
  font-style: normal;
  text-decoration: underline;
}</code></pre>

<h5 id="定制样式的结果">定制样式的结果</h5>

<p>{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-u-element', '&lt;u&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '&lt;u&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("html.elements.u")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>{{ HTMLElement("span") }}，{{ HTMLElement("i") }}，{{ HTMLElement("em") }}，和 {{ HTMLElement("cite") }} 元素，取决于情况，可以替代使用。</li>
 <li>CSS {{ cssxref("text-decoration") }} 属性可以用于完成 {{ HTMLElement("u") }} 元素的前面的视觉效果。</li>
</ul>