何时最好使用HTML演示标签或CSS来样式化元素？

Question

在 HTML 中使用 class="pro" 方法与直接使用 CSS 有何区别？

<p>a <u>pro</u>grammar</p> 

in HTML?

HTML using a class...

<p>a <span class="pro">pro</span>programmer.</p>

CSS类

.pro {text-decoration: underline;}

结果相同，但我想知道为什么应该使用一个而不是另一个。

- Samadhi808

Answer 1

<u>标签

---

HTML中的Unarticulated Annotation element (<u>) 表示一段应该以某种方式呈现的内联文本，以指示它具有非文本注释。默认情况下，这将呈现为简单的实线下划线，但可以使用CSS进行修改。

避免使用 <u>

非语义下划线

为了在不意味任何语义意义的情况下划线文本，请使用一个带有 text-decoration 属性设置为 "underline" 的 <span> 元素。

注意:

除其他纯样式元素外，原始的HTML下划线 (<u>) 元素被弃用于 HTML 4；然而，在 HTML 5 中恢复了 <u> 元素并具有新的语义含义：将文本标记为应用了某种形式的非文本注释。

重要提示：

请小心避免以将被误解为超链接的方式使用默认样式（下划线文本）的 <u> 元素。

<span>标签

---

HTML <span>元素是一个通用的内联容器，用于实现内容排版，并不代表任何东西。

.pro {text-decoration: underline;}

<p>a <u>pro</u>grammar</p> 
<p>a <span class="pro">pro</span>programmer.</p>

- Rayees AC

Answer 2

这两种方式都可以很好地强调您的文本，但我建议您使用HTML u标签，因为它会使您的HTML看起来不那么混乱，更有组织性。 编码愉快！

- Abhishek

Answer 3

尽管 span 用于样式目的，u 标签是语义上正确的。

- Mac Limlengco

Answer 4

如果您的目标是强调一段文字，您可以使用两种方法。HTML 标签已被弃用，但在 HTML5 中重新启用，因此可能会存在不兼容性问题。style 属性的使用会覆盖全局设置的样式。它将覆盖在 HTML 标签或外部样式表中设置的任何样式，如代码片段中的第一个短语所示。

.override{
text-decoration: overline;
}

.underline{
text-decoration: underline;
}
.line-through{
text-decoration:line-through;
}
.overline{
text-decoration:overline;
}

<p>This is my <u class="override">first</u> phrase</p>
<p >This is my <span class="underline">second</span> phrase</p>
<p >This is my <span class="line-through">third</span> phrase</p>
<p >This is my <span class ="overline">fourth</span> phrase</p>

- Sam