<strong>替代execCommand('bold'),语义化加粗且无障碍友好;<em>替代斜体,强调语义;<u>慎用,装饰性下划线应改用CSS;<ins>/<del>表插入删除,带语义与时间属性;<sub>/<sup>专用于上下标,不可被<span>+CSS替代。

document.execCommand 已弃用,但 HTML 原生标签格式化完全可用、稳定、无兼容性风险。直接用语义化标签,比调 execCommand 更可靠、更易维护。
哪些标签能替代 execCommand('bold') 这类操作
不用 JavaScript 操作 DOM,纯 HTML 就能实现加粗、斜体、下划线等效果,关键是选对语义标签:
-
<strong>:表示内容重要,浏览器默认加粗;比<b>更推荐,尤其对可访问性(如屏幕阅读器)友好 -
<em>:表示强调,浏览器默认斜体;比<i>语义更清晰 -
<u>:带下划线,但注意它在 HTML5 中已恢复语义(表示非文本标注,如拼写错误),慎用于装饰性下划线;若仅需样式,用 CSStext-decoration: underline更可控 -
<ins>和<del>:分别表示插入和删除,浏览器默认带下划线/删除线,且自带语义和时间属性(可配datetime) -
<sub>/<sup>:专用于下标、上标,数学或化学式必备,<span>+ CSS 无法替代其语义和排版精度
formatBlock 的等效 HTML 写法
execCommand 的 'formatBlock' 命令(如转成 <h2>)本质是改变块级容器结构。HTML 中直接写对应标签即可:
- 标题层级:
<h1>到<h6>,必须成对闭合,不能嵌套其他块级元素(如<p>) - 段落:
<p>是最安全的默认块容器;不要用<div>替代,除非明确需要无语义分组 - 引用块:
<blockquote>表示长引用,<q>表示行内短引用 - 预格式化文本:
<pre>保留空格与换行,内部可嵌<code>,但注意它不支持execCommand的任何格式化命令
为什么别混用 <b>/<i> 和 <strong>/<em>
表面看都加粗/斜体,但行为差异实际影响渲染与工具链:
立即学习“前端免费学习笔记(深入)”;
- 搜索引擎和辅助技术依赖语义:用
<strong>而非<b>,能让语音朗读器加重语气,SEO 工具可能赋予更高权重 - CSS 重置时容易误伤:
b { font-weight: normal }会干掉所有<b>,但不影响<strong>—— 后者靠语义驱动样式,更健壮 -
<i>在 HTML5 中被重新定义为“外文、术语、船名等”,不是通用斜体;若只是想让文字斜一点,<em>或 CSSfont-style: italic更准确
移动端和无障碍容易忽略的细节
纯 HTML 格式化在 iOS Safari 或读屏软件中表现稳定,但有三个硬约束必须遵守:
- 所有格式化标签必须闭合:
<strong>text</strong>,不能写成<strong>text(XHTML 风格自闭合在 HTML5 中无效) - 避免在
<pre>或<code>内部使用<strong>等——它们是“原始内容容器”,嵌套语义标签会破坏其预格式化意图,且部分读屏器跳过内部格式 - 颜色不可单独依赖:
<span style="color:red">不传达语义;如需警示,用<strong class="error">+ CSS,并配 ARIA 属性如aria-live="polite"
真正麻烦的从来不是“怎么加粗”,而是“加粗之后,机器是否理解这是重点”。用对标签,比调对 execCommand 参数重要得多。



















