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>