纯HTML+少量CSS+简易JS仅能实现静态原型，无法真实交易，因缺乏后端、数据库和用户系统支撑。
直接说结论：用纯 HTML + 少量 CSS + 可选的简易 JS 就能做出可用的二手交易平台首页和商品发布/浏览页，但必须明确——它只是静态原型，不能真卖货；想上线运行，后端、数据库、用户系统一个都绕不开。
为什么不能只靠 index.html 实现真实交易功能
浏览器里打开的 HTML 页面本质是“看得到、点不动”的快照。用户填了商品名称、价格、图片上传，这些数据默认不会存到任何地方，刷新页面就全丢。常见错误现象包括：
- 点“发布”按钮没反应（因为没绑定
submit事件，也没后端接口可连） - 商品列表始终只有写死的 3 条（因为没从数据库读取，
for循环遍历的是 HTML 里手写的<li>） - 搜索框输完按回车，URL 变成
?q=手机，但页面内容毫无变化（缺少 JS 解析 URL 参数并过滤 DOM 的逻辑）
所以，开发时得先分清阶段：第一阶段做静态结构验证信息流（比如“发布表单长什么样”“商品卡片该有几个字段”），第二阶段才接入fetch调后端 API 或改用localStorage模拟临时存储。
form 表单提交前必须处理的三件事
哪怕只是本地测试，也别让表单走默认提交（会跳转空白页或刷新）。在 <form> 上加 onsubmit="return false" 是最简兜底方案。更合理的做法是：
立即学习“前端免费学习笔记（深入）”；
- 给表单设
id="post-form"，用document.getElementById('post-form').addEventListener('submit', handler)拦截 - 在
handler里用event.preventDefault()阻止默认行为 - 手动收集字段值：
document.querySelector('[name="title"]').value，注意图片文件得用input[type="file"]+FileReader读取为 base64（否则无法塞进纯前端页面预览）
漏掉 preventDefault 是新手最常踩的坑——以为写了 JS 就算接上了，结果一提交，页面闪一下，啥都没留下。
商品卡片（.item-card）的 DOM 结构怎么保扩展性
别把每张卡片写成独立的 <div class="card">...</div> 堆砌。统一用模板结构，方便以后用 JS 动态生成：
<div class="item-card" data-id="123"> <img src="data:image/png;base64,..."/> <h3 class="item-title"><code>旧MacBook Air</code></h3> <p class="item-price">¥<code>2800</code></p> <p class="item-desc"><code>2017款，无拆修，附原装充电器</code></p> </div>
关键点：
- 用
data-id存唯一标识，比靠 DOM 顺序找元素靠谱得多 - 所有动态内容（标题、价格、描述）都包在带 class 的标签里，JS 用
querySelector定位不依赖层级 - 图片用 base64 或相对路径（如
./uploads/abc.jpg），避免上线后因跨域或路径错显示空白
如果现在就硬编码 20 张卡片，等要加“已售罄”角标或“距离你 3km”标签时，就得改 20 处——而用模板+JS 渲染，改一行 class 名或加一个 if 判断就全局生效。
本地调试时 localStorage 能顶什么用，又不能顶什么
它适合存用户刚发的几条测试数据，或记住暗色模式开关这类轻量状态。例如：
const posts = JSON.parse(localStorage.getItem('items') || '[]');
posts.push({ title: '二手Kindle', price: 450, desc: '几乎全新' });
localStorage.setItem('items', JSON.stringify(posts));
但要注意：
- 容量上限约 5–10MB，存几百张高清商品图的 base64 就会崩
- 不同域名（
file://vshttp://localhost:5500）下localStorage不互通，VS Code Live Server 插件起的服务才能用 - 关掉浏览器再打开，数据还在；但在隐私模式或清缓存后就没了——它不是数据库替代品
真正卡住多数人的，不是怎么写 HTML，而是没想清楚“这条数据下一步要去哪儿”。页面上每个按钮背后，都得有一条明确的数据流向：输入 → 校验 → 存储位置 → 刷新展示。少一环，就只剩静态摆设。
