纯HTML可搭建问答社区界面骨架，但仅支持展示和表单提交，无法处理登录、存储等动态功能，需搭配后端（如FastAPI）和JS实现完整交互。
纯 HTML 就能搭出可交互的问答社区界面，但得明确一点：它只能负责展示和基础表单提交，不处理登录、存储、搜索或动态刷新。如果你期待点击“提问”就立刻存进数据库并显示在首页——那必须配后端（比如 FastAPI 或 Flask）和 JS 通信。下面直接说怎么用 HTML 把骨架立住、避免常见翻车点。
用语义化标签组织问答页面结构
别用一堆 <div> 堆砌，浏览器和屏幕阅读器都认得清 <main>、<article>、<section> 这些标签。一个典型问题页至少包含三块：问题主体、回答列表、新答输入区。每个 <article> 包一层问题或回答，加 aria-labelledby 属性方便无障碍访问。
容易踩的坑：
– 把所有内容塞进一个 <div id="container">，后期加 JS 绑定事件时 selector 冗长且易冲突；
– 忘记给 <form> 设 method="POST" 和 action，导致点击提交后页面跳转或 405 错误；
– 用 <h2> 标题写“最新问题”，但没配合 <section aria-labelledby="latest-questions">，影响可访问性。
表单字段命名要符合后端预期（哪怕暂无后端）
即使你先用本地 index.html 打开，也建议按真实 API 要求来命名 input 的 name 属性。例如 FastAPI 的 RAG 示例后端接收 question 字段，那你的提问框就得是：<input name="question" type="text">，而不是 q 或 user_input。
立即学习“前端免费学习笔记（深入）”；
使用场景：
– 后续接入 FastAPI 时，request.form["question"] 能直接取值；
– 用 fetch() 提交时，FormData 构造更直观；
– 避免上线前大规模改名引发前后端联调卡顿。
静态答案列表需预留 JS 注入位置
纯 HTML 无法循环渲染答案，所以答案区域不要硬编码 10 条 <article>。正确做法是留一个空容器，加明确 ID 和语义类名：
<section aria-labelledby="answers-heading"> <h2 id="answers-heading">全部回答（3）</h2> <div id="answers-list"></div> </section>
这样后续加 scripts.js 时，document.getElementById("answers-list") 就能精准插入 DOM，不会误操作其他区块。性能影响小，兼容性好，连 IE11 都能跑。
响应式与移动端适配不能只靠 CSS 媒体查询
HTML 层面必须加这行，否则手机 Safari 会强制缩放、按钮点不准：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
再配合简单 class 如 class="question-card" 和 class="answer-item"，CSS 才好做断点控制。别指望只写 <div style="width:100%"> 解决响应式——它不解决字体过小、触摸目标太窄、横向滚动这些真实问题。
容易被忽略的地方：很多教程生成的 HTML 模板漏掉 viewport meta，结果在 iPhone 上打开时文字小到要双指放大，用户第一反应就是关掉页面。这不是 CSS 能救的，是 HTML 的刚性要求。
