HTML 文本格式化
文本格式化是指给文字添加加粗、斜体、删除线、上下标等特殊效果。HTML 为此提供了一组专用标签。值得注意的是,格式化标签分两类:一类只管"长相"(如 <b>),一类还带有"语气、语义"(如 <strong>)。推荐优先使用带语义的标签,这对阅读器和 SEO 都更友好。
加粗:b 与 strong
<b>(bold)只让文字变粗;<strong> 表示"内容很重要",浏览器同样默认加粗显示,但多了一层语义:
<p><b>这只是加粗</b>,而<strong>这是强调</strong>。</p>
在浏览器中显示为:两处文字都是粗体,肉眼几乎看不出差别,但屏幕阅读器会重读 <strong> 里的内容。
斜体:i 与 em
<i>(italic)只管斜体外观,常用于书名、术语;<em>(emphasis)表示语气上的强调,默认也是斜体:
<p><i>这是一段斜体文字</i></p>
<p>今天<em>必须</em>完成作业。</p>
删除线 del 与下划线 ins
<del> 给文字加删除线(表示已删除、过期),<ins> 加下划线(表示新插入的内容):
<p>原价<del>¥199</del>,现价¥99。</p>
<p><ins>今日新增:支持夜间模式。</ins></p>
在浏览器中显示为:"¥199" 上有一条删除线,第二行的新内容下方有下划线。
上下标 sub 与 sup
<sub>(下标)把文字缩小并放到底部,<sup>(上标)把文字缩小放到顶部,数学公式、化学式常用:
<p>水的化学式是 H<sub>2</sub>O</p>
<p>勾股定理:a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
在浏览器中显示为:H₂O 中的 2 位于右下角小字;等式中的 2 都是右上角的小号上标。
小号字与高亮
<small> 表示小号字(常用来放版权、注释),<mark> 给文字加高亮背景:
<p>本教程仅供学习参考。<small>© 2024 示例站点</small></p>
<p>请重点复习<mark>本章节</mark>的内容。</p>
在浏览器中显示为:版权信息字体变小;"本章节"三个字带有醒目的黄色高亮底纹。
小结
格式化标签让文字重点突出、层次分明:strong/em 带语义,b/i 只管外观,del/ins 表示增删,sub/sup 用于上下标。记住"能用语义标签就不用纯外观标签",你的页面会更有内涵。