纯HTML无法实现同步冲突解决，仅能构建对比界面结构：用div+pre+button预留容器，通过data-*属性标记版本与设备，由JS填充内容并处理选择逻辑。
怎么用 HTML 实现多设备同步冲突时的对比选择界面
纯 HTML 无法直接检测或解决同步冲突——它没有访问本地存储状态、监听多端变更、或触发合并逻辑的能力。所谓“冲突解决界面”，本质是前端渲染层，背后必须依赖 JavaScript 处理冲突数据，并由后端或同步协议（如 CRDT、Operational Transformation）提供差异元信息。
所以你要做的不是“用 HTML 创建冲突解决”，而是：用 HTML + input、details、data-* 属性搭出可交互的对比容器，让 JS 能把不同版本的内容、时间戳、设备标识等塞进去。
-
data-version-id和data-device必须加在每个候选区块上，否则 JS 拿不到上下文 - 避免用
id硬编码多个版本（比如content-v1、content-v2），改用 class + 动态 data 属性更易维护 - 别用
textarea直接展示富文本冲突——换行、缩进、HTML 实体会错乱；先用textContent渲染再转义，或走pre+code语义化显示原始结构
为什么 diff 不能只靠 HTML/CSS 实现
HTML 是声明式标记语言，不执行比较逻辑。你看到的“左右对比”“高亮差异”全是 JS 在跑字符串 diff（比如 diff-match-patch 库）或 DOM diff（比如 MutationObserver 监听变化后比对），然后把结果注入到 HTML 结构里。
CSS 只能做静态样式控制：比如用 .conflict-added 标红新增段落，用 .conflict-removed 加删除线。但“哪段是新增”这个判断，必须由 JS 输出 class，不能靠 CSS 自己猜。
立即学习“前端免费学习笔记（深入）”；
- 浏览器原生不提供
String.diff()或Node.compareVersions()这类 API - 用
contenteditable做实时编辑反馈？小心光标跳变和输入法兼容性问题，尤其中文 IME 下input事件可能漏触发 - 移动端 Safari 对
details/summary的折叠动画支持弱，别依赖它做核心操作流
localStorage 冲突时如何用 HTML 显示多版本快照
当两个设备各自修改了同一份 localStorage 数据（比如都存了 userPrefs 对象），再次同步前，你需要把它们并排呈现。HTML 本身不读取 localStorage，但可以预留结构：
<div class="version-group"> <h4>设备 A（2024-05-20 14:32）</h4> <pre class="version-content" data-version="a">
JS 拿到 localStorage.getItem('userPrefs-a') 和 userPrefs-b 后，填充进对应 pre 元素，并绑定点击事件。关键点：
- 不要用
JSON.stringify(obj, null, 2)直接塞进innerHTML——XSS 风险；用textContent更安全 - 如果对象含函数、undefined、Date 实例，
JSON.stringify会丢字段；同步前应统一序列化协议（比如只存 plain object） - 时间戳必须来自服务端或可信时钟，客户端
Date.now()在多设备间不可比
移动端适配冲突选择界面的几个硬约束
小屏下强行左右分栏（display: flex）会导致文字过小、按钮难点。真实做法是垂直堆叠 + 手动切换：
- 默认只显示当前设备版本，加一个“查看其他版本”按钮，点击展开
details区块 - 用
scrollIntoView({ behavior: 'smooth' })定位到被选中的版本，避免用户手动滚动 - 禁用
user-select: none在对比区域——否则用户无法复制冲突文本去查证 - iOS 上
font-size: 16px是最小可点击尺寸下限，按钮文字别小于这个值
最常被忽略的是：没给每个版本加唯一 data-conflict-id。一旦用户快速点两次“采用”，或者网络延迟导致重复提交，后端没法幂等处理——这个 ID 得从冲突生成时就带上，不是 UI 渲染时随便 Math.random() 出来。
