唯一合法方案是用<span>包裹目标文字并用class或style控制样式，因其专为行内无语义文本设计，不换行、不干扰布局，且不可被<div><strong>等替代；需注意其inline特性导致width/margin-top无效，须改display类型。
直接结论：用 <span> 包裹目标文字，再通过 class 或 style 控制样式或行为——这是唯一合法、轻量且不破坏行流的方案。
为什么必须用 <span> 而不是其他标签
它专为“一句话里某几个字”设计：不换行、无语义、不干扰布局。你不能用 <div> 插进段落中间（会强制换行），也不能用 <strong> 替代（它有强调语义，可能被屏幕阅读器重读，且样式不可撤回）。<span> 是 HTML 中唯一允许你安全切开一段文本、只动其中几个字符的容器。
- 错误做法：
<p>价格：<code><div>¥99.00</div>(限时折扣)</p> → 浏览器自动补全、渲染错乱 - 正确做法：
<p>价格：<code><span class="price">¥99.00</span><span class="discount">(限时折扣)</span></p> - 注意：如果这段文字本身有明确语义（如时间、缩写、引用），优先用
<time>、<abbr>、<cite>——<span>是兜底，不是首选
<span> 不能设 width 和 margin-top 的真实原因
它默认是 display: inline，浏览器按“文本字符流”规则渲染：宽度由字数和字体决定，垂直方向的 margin、padding、height、width 全部被忽略——这不是 bug，是规范行为。
- 常见错误现象：写了
style="width: 100px; margin-top: 10px;"却没效果，反复检查 CSS 拼写，其实问题在 display 类型 - 真要撑空间或加上下距？必须显式改显示模式：
display: inline-block或display: inline-flex - 小心
inline-block的副作用：HTML 中的换行符和空格会被渲染成约 4px 间隙，可用font-size: 0父级压制，或把标签写成一行
实际开发中最常踩的三个坑
很多问题不是不会写，而是没意识到 <span> 的“无语义性”带来的连锁影响。
-
无障碍陷阱：纯视觉高亮（比如只靠红色）对色觉障碍用户无效；若
<span>承载关键信息（如错误提示），必须配合role="alert"或aria-live="polite" -
嵌套失控：三层以上
<span>嵌套（如<span><span><span>xxx</span></span></span>）会让 CSS 选择器脆弱、调试困难；能用伪元素::before/::after实现的装饰，别堆 DOM -
框架陷阱：Vue/React 模板中插值表达式（如
{{ item.label }}）常被自动包裹<span>，若你没留意它的inline特性，后续加margin或背景色时就会布局错位
动态插入关键词高亮的最小可行代码
后端返回纯文本，前端需高亮搜索词？别用正则替换整个 innerHTML，用 document.createElement('span') 安全插入。
function highlightText(node, keyword) {
if (!keyword || !node.textContent.includes(keyword)) return;
const html = node.innerHTML.replace(
new RegExp(`(${keyword})`, 'g'),
'<span class="highlight">$1</span>'
);
node.innerHTML = html;
}
// 使用：highlightText(document.getElementById('content'), '搜索词');
注意：此写法仅适用于纯文本节点；若内容含表单、链接等交互元素，应遍历 text nodes 并用 splitText() + appendChild() 更安全处理。
真正难的从来不是怎么包一个 <span>，而是每次敲下 <span 时，你是否确认过：这段文字确实需要独立样式？有没有更语义化的替代？屏幕阅读器用户能否感知它的意义？没有答案，就先别提交。
