论坛帖子列表必须用语义化 ul+li 结构，配合 flex 布局与 <time><span> 等语义标签，才能保障可访问性、SEO、响应式及后续筛选功能的可维护性。
论坛帖子列表不是靠堆 div 或硬塞空格排出来的，核心是用语义化结构 + CSS 控制流式与对齐，否则后期改样式、加筛选、适配屏幕阅读器都会出问题。
用 ul + li 套每条帖子，别用 div 模拟
每条帖子必须包裹在 li 里，整个列表用 ul 包住——这是可访问性、SEO 和 CSS 伪类（如 :nth-child(odd) 隔行变色）能正常工作的前提。
- 错误写法：
<div class="post">标题</div>→ 屏幕阅读器读不出“这是第几条”，也无法用ul li:first-child精准控制首项样式 - 正确结构：
<ul class="post-list"><li><h3>标题</h3><p>摘要…</p></li></ul> -
li内允许嵌套h3、p、time、span等，但不要把另一个ul直接插在li外面——嵌套列表应放在li内部
横向信息区用 display: flex，关掉 list-style
论坛列表通常含头像、作者、发帖时间、回复数等横向信息，用 flex 对齐比浮动或 inline-block 更稳。
- 必须先写
ul.post-list { list-style: none; padding-left: 0; }，否则默认圆点在flex下会错位甚至被裁切 -
li设为display: flex; align-items: center; gap: 12px;，让头像、文字、数字自动对齐垂直中线 - 避免给
li设固定width；用min-width保底线，配合flex-wrap: wrap应对长标题换行 - 如果某列内容需右对齐（如回复数），单独加
margin-left: auto;，比text-align: right更可靠
响应式断点要重置 flex-direction，不是只改宽度
小屏下横向信息挤成一团，不能只靠缩字体或隐藏字段——得切换布局方向，同时保障点击热区。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 移动端加
@media (max-width: 768px) { .post-list li { flex-direction: column; align-items: flex-start; } } - 此时每项变成「标题→摘要→作者+时间→回复数」纵向堆叠，避免文字截断
- 给
li > a或关键链接设padding: 12px 16px;，确保触摸目标 ≥ 44×44px - 慎用
gap在旧版 Android 浏览器上失效，降级方案：用margin-bottom替代，但需在:last-child清除
时间戳和回复数用 <time> 和 <span> 语义化标记
别把时间写成纯文本，也别用 class 名代替语义——这对排序、爬虫、未来加日历筛选都埋了坑。
- 发帖时间用
<time datetime="2026-08-03T14:22:00Z">3小时前</time>，datetime属性值必须是 ISO 格式，方便 JS 解析或后端提取 - 回复数用
<span aria-label="共12条回复">12</span>，既保持简洁，又让辅助工具可读 - 作者名如果是可点击链接，必须包在
a里，且href指向用户主页，别用#占位 - 避免在
li上直接写style="color:red"标记“新帖”——统一用 class 如is-new，CSS 控制，便于批量开关
真正卡住人的不是怎么让标题左对齐，而是当你要加“按最后回复时间排序”或“仅显示带附件的帖子”时，DOM 结构是否经得起 JS 查询和动态插入——所有这些，都取决于一开始有没有老老实实用 ul/li 和语义化子标签。
