纯html讨论页需正确使用和：form须有action与method，textarea须有name，按钮须type="submit"；details实现折叠需遵循结构规范；无障碍需用article、label、aria-label等语义化标签；csp须配置form-action指令。
用 <form></form> 和 <textarea></textarea> 实现基础发帖功能，别碰 JS 就能跑
纯 HTML 能撑起一个可提交的讨论页，关键不是“多炫”，而是表单控件是否被正确包裹和命名。很多人写完 <textarea></textarea> 发现按回车没反应、提交后内容为空，问题往往出在 <form></form> 缺失或 name 属性漏掉。
-
<form></form>必须有action（哪怕填#）和method="POST"或"GET"，否则浏览器不识别为可提交单元 -
<textarea></textarea>必须带name="content"（或其他合法名），后端靠这个键取值；没name就等于没数据 - 按钮要用
<button type="submit"></button>，别只写<button></button>——默认是type="button"，点了也不触发表单提交 - 如果想支持回车提交，
<textarea></textarea>得在<form></form>内且表单里**只有一个**可提交控件（比如没其他<input type="submit">干扰），否则行为不一致
用 <details></details> + <summary></summary> 做折叠楼层，零 JS 也能交互
老式社区常见的“点击展开回复”效果，不需要 JS 监听 click，HTML5 原生 <details></details> 就够用。但很多人直接套用，结果点不开、样式错乱，其实是忽略了默认行为和 CSS 干预点。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<details></details>默认关闭，open属性让它初始展开；不要试图用 class 控制显隐——它有自己的状态逻辑 -
<summary></summary>必须是<details></details>的第一个子元素，否则点击无效；里面可以放文字、<span></span>，甚至小图标，但不能嵌套<div> <li>Chrome/Firefox 支持良好，但 Safari 对 <code><details></details>的:focus样式支持弱，如果加了 outline，建议用<summary>::-webkit-details-marker</summary>隐藏原生箭头再自定义 - 想让多个
<details></details>互斥（一次只开一个）？HTML 没原生机制，得靠 JS；纯 HTML 场景下就接受它各自独立开关 - 每条帖子用
<article role="article"></article>包裹，比单纯<div> 明确告诉辅助技术：“这是独立内容单元” <li> <code><textarea></textarea>必须配<label for="xxx"></label>，且id和for值一致；若视觉上不便放 label 文字，用aria-label="请输入讨论内容"替代，但别两者都缺 - 时间戳写成
<time datetime="2024-05-20T14:30">2024-05-20 14:30</time>，读屏会自动读出日期语义，比纯文本强得多 - “删除”“编辑”这类操作按钮，必须加
aria-label，例如<button aria-label="删除这条回复">×</button>，否则读屏只会说“按钮”，用户根本不知道作用 - 表单提交触发的是
form-action指令，不是default-src或script-src；如果 CSP 里没显式允许form-action 'self'，现代浏览器会直接阻断 - 若
action指向外部域名（比如提交到 Disqus 后端），必须在 CSP 中写明，如form-action https://disqus.com - 开发期可临时加
Header set Content-Security-Policy "form-action 'self';"测试，上线前确认是否需放宽其他指令（如connect-src若走 AJAX 补充） - 注意：CSP 是响应头，不是 meta 标签；
<meta http-equiv="Content-Security-Policy">在部分场景（如 form 提交）不生效，优先配服务端头
用 aria-label 和 role="article" 让屏幕阅读器真正读懂讨论流
无障碍不是加几个属性就完事。没语义结构的“div 堆叠”对键盘用户和读屏软件就是灾难——焦点乱跳、内容无上下文、发帖按钮被读成“按钮”而不是“发布新话题”。
部署时 Content-Security-Policy 头别乱设，否则 <form></form> 提交直接 403
本地测试好好的页面，一上 Nginx/Apache 就提交失败，控制台报 Refused to send form data——大概率是服务端加了过于严格的 CSP 策略，把表单提交当成了“不安全请求”拦截。
<form></form> 不只是容器，<details></details> 不只是动效，aria-label 不是装饰，CSP 也不是摆设。
