多选标签栏必须用data-category绑定语义，用set管理激活项，form包裹筛选栏并禁用默认提交，移动端须用checkbox替代select multiple。
多选标签栏必须用 data-category 绑定语义，不能靠 class
HTML 本身不识别“标签筛选”，所有点击过滤行为都靠 JS 驱动。如果用 class="tag-js-frontend" 或 class="active" 来标记状态，后续一改样式名、加新维度（比如按状态 + 分类组合），就容易误匹配或覆盖。正确做法是统一用 data-category（或你自定义的 data- 属性）存关键词：
✅ <button data-category="react">React</button>
✅ <div data-category="react" data-status="published">…</div>
❌ 避免 id="react-tag"——ID 必须唯一，但多个内容可能同属一个标签；也别混用 class="react js"，会污染语义、干扰 CSS 选择器。
多选时用 Set 管理激活项，别反复 toggle classList
用户 Ctrl/Cmd + 点击多个标签时，需要累加/取消，而不是单点即重置。用 Set 存当前激活值最稳妥：
• 初始化：const selected = new Set();
• 点击时：if (selected.has(cat)) selected.delete(cat); else selected.add(cat);
• 过滤逻辑：Array.from(items).filter(item => selected.has(item.dataset.category))
别在循环里对每个节点调 node.classList.toggle("hidden")——这会触发多次重排，卡顿明显。推荐统一先设所有项 display: none（CSS 或 JS 初始化时批量设），再只对匹配项设 display: block。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
form 结构包裹筛选栏，但禁用默认提交
即使不跳转页面，也要用 <form></form> 包裹整个筛选栏。它提供开箱即用的能力：
• form.elements 可直接遍历所有控件
• new FormData(form) 一键采集全部值（包括 checkbox、select multiple、input[type=number]）
• form.checkValidity() 支持校验（如价格区间合法性）
必须加 event.preventDefault() 拦住 submit，但千万别删掉 <form></form> 改成 <div>——否则这些能力全丢。品牌筛选用 <code><input type="checkbox" name="brand" value="apple">，价格用两个 name="price_min" 和 name="price_max"，分类用 <select multiple name="category"></select>，所有 name 必须和后端 API 参数名严格一致。
移动端必须放弃原生 select multiple，改用 checkbox 模拟
iOS Safari 完全忽略 multiple 属性，点开仍是单选弹窗；安卓各厂商浏览器支持也不稳定，有些没视觉反馈、无法取消已选项。这不是 bug，是浏览器主动降级体验。如果你的页面面向公众（尤其含 App 内嵌页或响应式官网），必须换方案：
• 用一组 <input type="checkbox" name="tag"> + <label></label> 模拟下拉展开
• 或引入轻量库如 Choices.js（初始化时传 multiple: true）
• 如果坚持用原生 <select multiple></select>，至少加提示文字：<div class="hint">PC 端按 Ctrl/Cmd 多选</div>，避免用户困惑。另外，size 属性不是可选——不设 size="4"，多数浏览器默认只显示 2 行，用户得拖动才能看到全部选项，极易漏选。
