HTML5语义化标签组合、、、构建问答页骨架，配合CSS Grid实现响应式布局，提升结构清晰度、SEO与无障碍访问，替代无意义div嵌套。
直接用 <header></header>、<main></main>、<aside></aside>、<footer></footer> 搭骨架，配合 CSS Grid 或 Flexbox 控制问答流和侧边栏，比嵌套 <div> 更语义清晰、响应式更稳——表格布局和纯 float 已完全不适用。
<h3>问答页必须有的结构标签组合</h3>
<p>一个可维护的问答页面不是靠一堆 <code><div class="xxx"> 堆出来的。HTML5 语义化标签能直接表达内容意图，对 SEO、屏幕阅读器、后续 CSS 选择器都更友好。
<ul>
<li>
<code><header></header> 放网站 logo、搜索框、用户登录状态（不是只放标题）
<main></main> 包住全部问答流，里面每个问题用 <article></article> 独立包裹（含标题、作者、时间、回答数、投票区）<aside></aside> 放热门问题、标签云、用户排行榜——它天然表示“附属但相关”的内容<footer></footer> 不只是版权，还要包含帮助链接、反馈入口、协议跳转别再用 <div id="header"> 这类写法：浏览器不认识它的含义，JS 获取时也得靠 class 或 id 字符串硬匹配，后期重构成本高。
<h3>用 CSS Grid 实现问答流 + 侧边栏自适应布局</h3>
<p>问答页典型是「主内容区宽、侧边栏窄、高度随内容伸缩」，Grid 比 Flexbox 更适合这种二维约束。关键不是写满列定义，而是用 <code>minmax() 和 fr 让主区优先占空间。
立即学习“前端免费学习笔记（深入）”；
- 给
<main></main>的父容器（比如<div class="page-layout">）设 <code>display: grid -
grid-template-columns: 1fr minmax(280px, 320px)—— 主区弹性伸缩，侧边栏最小 280px、最大卡死 320px，避免拉太宽影响阅读 -
gap: 24px统一内外间距，比手动写margin更可控 - 侧边栏用
align-self: start固定在顶部，否则长问答流滚动时它会跟着动
示例片段：
.page-layout {
display: grid;
grid-template-columns: 1fr minmax(280px, 320px);
gap: 24px;
}
aside {
align-self: start;
}
问答卡片（<article></article>）里投票区为什么不能用 table
很多老项目把「投票按钮 + 数字 + 点赞/踩」做成 <table>，看似对齐简单，实则埋了三个坑：
<ul><li>语义错误：<code><table> 表示关系型数据，而投票是交互控件，应归为表单范畴
<li>无障碍问题：屏幕阅读器会读成“一行两列的表格”，无法识别“这是对当前问题的投票操作”</li>
<li>响应式断裂：table 在小屏下强行横向滚动，或内容重叠，无法用 <code>flex-direction: column 切换流向
正确做法是用 <form></form> 包裹一组 <button type="button"></button>，配合 display: flex; flex-direction: column; 控制竖排，数字用 <output></output> 标签语义化输出值。
移动端问答页折叠侧边栏的兼容写法
别依赖 JavaScript 动态加 class 切换显示隐藏——CSS 媒体查询就能干净解决。关键是用 grid-template-columns 覆盖，而不是靠 display: none。
- 桌面端：保持
1fr minmax(280px, 320px) - 移动端（
max-width: 768px）：改写为1fr，让<aside></aside>自动退到主内容下方 - 如果真要隐藏侧边栏，用
grid-column: 1 / -1把它拉满整行，视觉上等效于隐藏，但 DOM 仍在，不影响 SSR 和 SEO
容易被忽略的是：侧边栏里的链接、脚本如果没做懒加载，会在移动端白下载——建议用 loading="lazy"（对图片）或 IntersectionObserver（对模块）控制资源加载时机。
