html仅负责展示权重规则表格，计算逻辑必须由外部javascript或后端实现；应使用语义化table结构，添加caption标注版本，禁止在html中嵌入可执行逻辑。
HTML里没法直接实现贡献值计算规则
HTML 是纯标记语言，不处理逻辑，document.write 或内联 <script></script> 也不是推荐做法。所谓“HTML发帖/解答权重表”，本质是后端或前端 JS 控制的业务逻辑，HTML 只负责展示结果或结构。
常见错误现象：Uncaught ReferenceError: calculateScore is not defined —— 把计算函数写在 HTML 里但没加载 JS，或作用域不对；或者用 <input onchange="calc()"> 硬绑逻辑，导致维护困难、无法测试。
- 真正该放 HTML 的只有：表格结构（
<table>）、字段说明（如“发帖+5分”）、权重分类标题<li>计算逻辑必须抽离到外部 <code><script src="score.js"></script>或模块化 JS 中 - 如果只是静态说明文档，就老老实实写 HTML 表格 + 文字解释，别硬塞“可运行”假象
- 不要给分数列加
class="score"并幻想 CSS 能自动求和——CSS 不会算数 - 移动端注意加
overflow-x: auto容器，防止表格溢出
用 HTML 表格呈现权重规则最稳妥
用户要的是“看得懂、查得快”，不是“能算”。用语义化 <table> 搭配 <code><thead>/<code><tbody>，比 div 布局更易读、更利于屏幕阅读器和 SEO。<p>示例片段：</p>
<pre class="brush:php;toolbar:false;"></pre>
<table>
<thead><tr>
<th>行为</th>
<th>基础分</th>
<th>附加条件</th>
</tr></thead>
<tbody>
<tr>
<td>发布技术帖</td>
<td>+5</td>
<td>需含代码块且无错别字</td>
</tr>
<tr>
<td>被采纳为最佳答案</td>
<td>+20</td>
<td>同一问题仅计1次</td>
</tr>
</tbody>
</table>
<ul>
<li>避免用 <code>colspan/rowspan 过度合并单元格，影响可访问性
前端动态计算得分必须用 JavaScript，且要防篡改
如果页面真要实时显示用户当前预估分（比如编辑框旁显示“本次提交预计+8分”），就得用 JS 监听输入、匹配规则、调用 calculateScore()。但关键点在于：这个分数只是提示，最终以服务端校验为准。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
容易踩的坑：
- 把规则写死在前端（如
if (text.length > 100) score += 2），用户 F12 改 JS 就能刷分 - 用
innerHTML拼接分数，没做 XSS 过滤，输入<img src="x" onerror="alert(1)">就执行脚本 - 没考虑时区、日期格式差异，比如“7天内首次回答”在 UTC 和本地时间下判断不一致
正确姿势：前端只做轻量级提示，核心规则和校验放在后端 API，例如调用 /api/calculate-score 提交内容摘要，返回可信分值。
权重表需要版本控制和更新留痕
规则会变。今天“带截图+3”，明天可能改成“带复现步骤+5”。HTML 文件本身不记录变更，直接覆盖就丢历史。
- 在表格底部加一行：
<caption>v2.1（2024-06-15 生效）</caption> - 把权重表存为独立 Markdown 或 JSON，用构建工具生成 HTML，方便 Git 追踪 diff
- 别在
<!-- 注释 -->里写“上一版是+2分”，Git 里看不见注释变更
最常被忽略的其实是权限——谁有权修改这个 HTML？如果运营同学直接 FTP 覆盖，出错没法回滚。规则文档和执行代码，得走同一套发布流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
