HTML交互属性指用表单原生状态配合CSS伪类与兄弟选择器实现无JS响应；操作台中checkbox+~是汉堡菜单最稳起点，因零依赖且兼容IE9+；data-*属性可驱动模块条件渲染，但复杂逻辑仍需JS。
纯 HTML 本身不提供交互逻辑，所谓“HTML 交互属性”实际是指利用表单控件的原生状态（如 checked、disabled、required）配合 CSS 伪类与兄弟选择器，实现无 JS 的基础响应行为；真正在操作台这类复杂 UI 中落地，必须明确哪些交互能靠 HTML/CSS 驱动，哪些必须交由 JavaScript 处理。
为什么 checkbox + ~ 选择器是操作台汉堡菜单最稳的起点
操作台常需在低带宽、JS 加载失败或企业内网禁用脚本的场景下仍可展开导航。此时 <input type="checkbox" id="nav-toggle"> 是唯一 IE9+ 全平台零依赖的开关机制：
-
id必须唯一且与label[for]严格匹配，否则点击无响应 - 不能对
input设display: none—— 否则键盘用户无法Tab切入、屏幕阅读器不可读 - 菜单容器（如
.sidebar）必须紧随input后，才能用#nav-toggle:checked ~ .sidebar触发显隐 - 移动端激活时，建议设
max-height: 500px而非auto，避免 CSS 动画无法过渡
data-* 属性如何驱动操作台模块的条件渲染
操作台中“监控面板”“日志视图”“配置编辑器”等模块切换，若全靠 JS 控制 DOM 显隐，会增加耦合；用 data-module 可解耦结构与逻辑：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在主容器上写
<div class="workspace" data-module="logs">，CSS 中写[data-module="logs"] .log-view { display: block; } - 切换时仅需 JS 修改
element.dataset.module = "metrics"，无需手动增删 class 或操作子元素 - 注意：
dataset会自动将data-panel-type转为panelType，别直接访问data-panel-type字符串 - 该方式不适用于需要动画、异步加载或权限校验的模块——那些仍得走 JS 生命周期控制
form 元素原生验证在操作台表单中的真实约束力
操作台大量使用配置表单（如 API 密钥录入、告警阈值设置），required、min、pattern 等属性能拦截明显错误，但别高估其能力：
立即学习“前端免费学习笔记（深入）”；
-
type="number"在 Safari 和部分安卓 WebView 中会忽略step="any"，导致小数输入被截断，应改用type="text" inputmode="decimal" -
pattern正则不支持 \uXXXX Unicode 写法，中文校验需用[一-龥]或[\u4e00-\u9fa5] -
:valid/:invalid伪类只响应原生验证，对自定义规则（如“密码需含大小写字母”）无效，必须用setCustomValidity() - 提交前仍需 JS 调用
form.checkValidity()并阻止默认行为，否则绕过前端验证极容易
操作台里最易被忽略的点：所有基于 :hover 的交互（比如工具栏图标悬停提示）在触屏设备上根本不会触发，而 :focus-within 又不兼容 IE；真正跨设备可用的状态反馈，必须同时覆盖 :hover、:focus、:active 三者，并为触屏加一层 JS 的 touchstart 模拟 focus。这不是锦上添花，是操作台可用性的底线。
