和 标签需按行级粒度包裹代码、配合结构与data-line-number属性实现精准定位；通过css强化视觉区分，javascript支持点击详情、折叠展开及快捷评论；兼顾aria属性与旧浏览器兼容性以保障可访问性。
用 <del></del> 和 <ins></ins> 标签可直观标记代码评审中被删除和新增的行，但需配合语义结构、样式控制与DOM操作才能真正支撑评审场景。
语义化标注差异行
HTML5 的 <del></del> 表示已移除内容，<ins></ins> 表示新插入内容，天然契合 diff 逻辑。关键不是简单包裹文本，而是按“行级粒度”组织，确保每行差异独立可定位：
- 将整行代码包裹在
<del></del>或<ins></ins>中，而非只包变动字符（避免语义混乱） - 保留原始换行结构，用
<pre class="brush:php;toolbar:false;"><code></code> 包裹整个差异块，维持缩进与空格</pre> - 为每个差异行添加
data-line-number属性，便于点击跳转或关联源码位置
样式增强可读性
默认样式（删线+下划线）在代码场景中辨识度低，需 CSS 强化视觉区分：
-
<del></del>设为浅红背景 + 灰色删线，加opacity: 0.85保留可读性 -
<ins></ins>用浅绿背景 + 无下划线，右侧加竖条装饰（border-left: 3px solid #4caf50） - 同一逻辑块内相邻的
<del></del>和<ins></ins>可用margin-top: -1px微调贴合，模拟 diff 工具的“替换”效果
动态渲染与交互支持
评审工具需响应用户操作，不能只静态展示。结合 JavaScript 实现基础交互：
- 监听点击
<del></del>或<ins></ins>元素，触发弹出详情（如修改人、时间、关联 commit ID） - 提供“折叠/展开”按钮，对连续多行
<del></del>或<ins></ins>进行分组收起，避免长 diff 冲突屏 - 支持键盘快捷键（如
Ctrl+Enter）快速在当前差异行插入评审评论，评论 DOM 插入到该行父容器旁
兼容性与可访问性注意点
虽为 HTML5 标签，但在评审工具中需兼顾辅助技术与旧环境：
- 为
<del></del>添加aria-label="已删除：原第X行"，<ins></ins>添加aria-label="已添加：新第Y行" - 避免仅靠颜色传达状态，删/增区域必须有形状或纹理差异（如删线 + 背景斜纹 SVG）
- 在 IE11 等旧浏览器中，用
document.createElement('del')主动注册标签，再通过 CSS 模拟样式
不复杂但容易忽略：真正的评审体验取决于差异是否可定位、可评论、可追溯。<del></del> 和 <ins></ins> 是语义锚点，围绕它组织 DOM 结构、样式规则和事件流，才能让代码变更“说话”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
