垂直社区帖子列表应使用<section>包裹整体，每个帖子用<article>，内部用<header>含标题/作者/时间/状态徽标，<div class="post-content">承载富文本内容，<footer>放置互动按钮；状态通过data-status等属性暴露，摘要折叠用max-height过渡，分页用<div role="navigation">而非<nav>。
垂直社区帖子列表该用什么HTML结构
别套用博客或新闻站的 <article> 堆砌逻辑。垂直社区（比如开发者问答、小众兴趣小组）的帖子有强交互性、多状态（已回复/已解决/高亮）、且常带嵌套内容（作者信息、标签、操作按钮），必须兼顾语义和后续JS控制点。
核心结构用 <section> 包裹整个列表，每个帖子用 <article>，但内部必须预留明确的锚点区域：
-
<header>里放标题、作者、时间、状态徽标（如class="status-solved"） - 正文用
<div class="post-content">，不用<p>套死——社区帖常含代码块、图片、甚至内嵌视频，需自由渲染 -
<footer>放互动区：点赞数、回复数、操作按钮（收藏、分享），避免用<nav>——这不是导航，是行为容器
如何让帖子列表支持快速筛选和状态标记
纯CSS无法动态响应“已解决”“热门”等状态，得靠HTML属性暴露信号。关键不是加一堆 class，而是用语义化属性让JS和屏幕阅读器都能感知。
在每个 <article> 上直接写：data-status="solved"、data-reply-count="12"、data-score="47"。不要用 class="solved" 混淆样式与状态——CSS可以监听 [data-status="solved"]，JS也能直接读取数值做排序。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常见坑：
- 把状态存在 id 里（如 id="post-123-solved"），后期难提取、难维护
- 用 aria-label 替代真实数据属性，导致JS无法可靠读取
- 忘记给 data-score 这类数值属性设默认值（比如 data-score="0"），空值会导致排序出错
移动端折叠摘要和展开全文怎么不卡顿
别用 JS 控制 display: none 切换——重排版开销大，尤其列表长时滑动会掉帧。真要收起摘要，用 CSS 的 max-height + overflow: hidden 过渡更稳。
实操要点：
- 摘要容器设
max-height: 3.6em（约两行），transition: max-height 0.2s ease-out - 展开时动态计算真实高度并写入内联 style（不是 class），避免 CSS 变量无法触发过渡
- 务必加
overflow: hidden，否则内容溢出破坏布局 - 对含图片的摘要，监听
img.onload后再计算高度，否则初始高度不准
注意：iOS Safari 对 max-height 过渡支持不稳定，若遇闪动，改用 transform: scaleY() 替代，但需确保父容器 overflow: hidden。
为什么不能把分页按钮塞进 <nav> 标签
<nav> 是为全局导航设计的，比如顶部菜单、侧边栏链接。帖子列表底部的“下一页”“第5页”属于当前内容的附属操作，语义上是 <section> 的一部分，不是跨页面导航。
正确做法：
- 分页容器用 <div role="navigation" aria-label="帖子列表分页"> —— 保留可访问性，又不滥用语义
- 每个页码按钮用 <button type="button">，禁用状态加 disabled 和 aria-disabled="true"
- 当前页用 <span aria-current="page">3</span>，别用 <strong> 或 class 模拟
容易忽略的细节：服务端渲染分页时，如果当前页是最后一页，Next 按钮必须移除 href 或设为 # 并加 tabindex="-1"，否则键盘用户会误触无效跳转。
