1 文字修饰标签

HTML 提供了多组文字修饰标签,每组都有旧版语义化版两种写法,推荐使用语义化版本。

1.1 各组标签说明

  • 加粗<b><strong> 效果相同,推荐用 <strong>,语义更明确(表示”重要内容”)。
  • 斜体<i><em> 效果相同,推荐用 <em>,语义更明确(表示”强调内容”)。
  • 删除线<s><del> 效果相同,推荐用 <del>,语义表示”被删除的内容”。
  • 下划线<u><ins> 效果相同,推荐用 <ins>,语义表示”新插入的内容”。

1.2 为什么优先用语义化标签

语义化标签让浏览器和搜索引擎更好地理解内容的含义,而不只是描述外观样式。

2 标签总结

效果旧版写法推荐写法
加粗<b><strong>
斜体<i><em>
删除线<s><del>
下划线<u><ins>

3 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>✔️ 文字修饰标签</title>
</head>
<body>
    
    <h1>1. 文字加粗</h1>
    我是正经文字 <br>
    <b>我是加粗的文字</b> <br>
    <strong>我也可以加粗显示【建议使用它】</strong>
 
    <h1>2. 斜体</h1>
    我是正经文字 <br>
    <i>我是斜体的文字</i> <br>
    <em>我也是斜体文字【建议使用它】</em> <br>
 
    <h1>3. 删除线</h1>
    我是正经文字,没有删除线 <br>
    <s>我被删除了😄 </s> <br>
    <del>我也被删除了</del>
 
    <h1>4. 下划线</h1>
    我是正经文字,没有下划线 <br>
    <u>有下划线</u> <br>
    <ins>我也有下划线</ins>
</body>
</html>