HTML: HTML 文本格式化
格式标签使文本不仅仅是简单的文字——有加粗、斜体、删除线、上标、引号等样式。每种格式都有相应的语义标签，既能改变外观，又能传达意义。
1. 粗体与斜体
<b> 让文字加粗，<i> 让文字倾斜。但 HTML5 更推荐使用有语义的 <strong>（表示重要内容）和 <em>（表示强调），因为浏览器和搜索引擎能理解它们的含义，而不仅仅是改变样式。
▶ 示例
HTML
<p><b>这是粗体</b>，<i>这是斜体</i></p>
<p><strong>这是重要的内容</strong>（语义上重要，不止是样式）</p>
<p><em>这是需要强调的文字</em>（朗读时会加重语气）</p>
💡 最佳实践：
除非你只是单纯想要视觉上的粗体或斜体（比如图标字体），否则优先用
<strong> 和 <em>。屏幕阅读器会对它们做特殊处理，对无障碍更友好。
2. 删除、插入与标记
<del> 显示删除线，表示内容已被删除；<ins> 显示下划线，表示新插入的内容。注意 <u> 也能产生下划线效果，但 <ins> 带有"新增"的语义，<u> 仅仅改变外观。除此之外，<mark> 像荧光笔一样高亮文字；<small> 表示小号字体的附加说明，常用来放免责声明或版权信息。
▶ 示例
HTML
<p>原价：<del>¥199</del> <ins>¥129</ins></p>
<p>别忘了 <mark>明天下午 3 点</mark> 开会。</p>
<p><small>* 本活动最终解释权归主办方所有</small></p>
3. <pre> 预格式化文本标记
此外，<pre> 标签（预格式化文本）可以保留代码中的空格和换行，非常适合展示代码片段或简单的字符画（ASCII Art）：
▶ 示例
HTML
<pre>
+-------------------------+
| Web-Tutorial.com |
| HTML·CSS·JavaScr. |
+-------------------------+
</pre>
4. 上标与下标
<sub> 将文字显示为下标（底部），<sup> 显示为上标（顶部）。化学式、数学公式、脚注里很常见。
▶ 示例
HTML
<p>水的化学式是 H<sub>2</sub>O</p>
<p>爱因斯坦的质能方程：E=mc<sup>2</sup></p>
<p>这篇文章的脚注<sup>[1]</sup>在页面底部。</p>
5. 引用与特殊文本
这类标签专门用来表示引用、缩写、联系信息等特殊内容的：
▶ 示例
HTML
<!-- 长引用 -->
<blockquote>
生活就像一盒巧克力，你永远不知道下一颗是什么味道。
<cite>— 《阿甘正传》</cite>
</blockquote>
<!-- 短引用 -->
<p>孔子说：<q>学而不思则罔，思而不学则殆。</q></p>
<!-- 缩写 -->
<p><abbr title="World Wide Web">WWW</abbr> 改变了世界。</p>
<!-- 联系信息 -->
<address>
作者：张三<br>
邮箱：zhangsan@example.com
</address>
<!-- 文字方向 -->
<p><bdo dir="rtl">这段文字从右向左显示</bdo></p>
📌 注意：
<blockquote> 是块级元素，浏览器会为它添加缩进；<q> 是行内元素，浏览器自动加引号。<abbr> 配合 title 属性使用时，鼠标悬停会显示完整内容。<bdo dir="rtl"> 可以让文字从右向左书写，适合阿拉伯语等场景。
❓ 常见问题
Q
<strong>和<b>都是加粗，<em>和<i>都是斜体，有什么区别？A 区别在于"语义"。
<strong>表示"这段文字很重要"，<em>表示"这段文字需要强调"——它们传达的是内容的重要性；而<b>只是"把文字加粗"，<i>只是"把文字斜体"——它们只管视觉样式。搜索引擎和屏幕阅读器会识别<strong>和<em>的语义，但会忽略<b>和<i>。简单说：强调内容含义用<strong>/<em>，纯视觉效果用<b>/<i>或CSS。Q
<del>、<ins>和<u>有什么区别？A
<del>显示删除线，表示内容已被删除或过时，有明确的语义；<ins>显示下划线，表示新插入的内容，带有"新增"的语义；<u>只是给文字加下划线，纯粹是视觉效果。HTML5中<u>的用途被限制了，因为它容易和链接混淆（链接默认也有下划线）。建议：表示删除用<del>，表示新增用<ins>，不要用<u>。Q 什么时候用
<blockquote>，什么时候用<q>？A
<blockquote>是块级元素，用于长引用（通常是一个独立的段落或多个段落），浏览器会自动添加缩进；<q>是行内元素，用于短引用（一句话或几个词），浏览器会自动添加引号。简单说：长引用用<blockquote>，短引用用<q>。如果引用有明确的出处，可以在<blockquote>内用<cite>标注来源。📖 小节
<strong>表示重要，<em>表示强调——比<b>和<i>更有语义<del>删除线、<ins>语义下划线、<u>样式下划线、<mark>高亮、<small>小字说明<sub>下标、<sup>上标、<pre>保留空格和换行<blockquote>长引用、<q>短引用、<abbr>缩写、<address>联系信息、<cite>作品标题、<bdo>文字方向
📝 作业
- 格式化一段文字：写一段商品促销信息，包含原价（删除线）、现价（下划线插入）、打折说明（小字），以及一个高亮的"限时优惠"标记。
- 化学公式与上标：用
<sub>和<sup>写出CO₂和x² + y² = z²。 - 自查：在你浏览器中打开一个新闻网站，右键"检查"看看文章中的引号、强调文字、脚注分别用了哪些 HTML 标签。你能分辨出哪些用了
<strong>，哪些用了<b>吗？
