用语义化标签构建问答页骨架：<main>包问题与回答，<aside>放侧边栏，<article>包裹单个问题或回答，投票区用<section aria-label="vote controls">，代码块必须用<pre><code>。
用语义化标签搭出问答页骨架，别一上来就写CSS
Stack Overflow 页面看着复杂，但结构非常清晰：问题区、回答列表、侧边栏三块主区域。直接用 <main> 包问题和回答，<aside> 放标签/相关问题，比一堆 <div class="container"> 更可靠——浏览器能识别语义，屏幕阅读器能正确朗读顺序，打印时也能自动分页。
常见错误是把所有内容塞进一个大 <div>，然后靠 class 名强行模拟区域，结果键盘用户 Tab 时跳得毫无逻辑，WCAG 审查直接报 region 缺失。
-
<article>套单个问题或回答，每个带role="article"更稳妥（尤其旧版 Safari） - 投票按钮组用
<section aria-label="vote controls">包裹，避免被读成“三个独立按钮” - 代码块必须用
<pre><code>，不能只用<code>—— 后者不保留换行和空格
投票按钮交互要兼顾键盘、鼠标和可访问性
Stack Overflow 的投票箭头不是纯装饰，它需要支持空格/回车触发、Tab 可聚焦、焦点状态可见。用原生 <button> 是底线，别用 <span onclick> 或 <div role="button">。
容易踩的坑是只写 tabindex="0" 却没处理 keydown 事件，导致键盘用户按空格没反应；或者用了 aria-pressed 却没同步更新视觉状态（比如点了向上箭头后，向下箭头该变灰）。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 投票按钮 HTML 结构示例：
<button type="button" aria-label="upvote this answer" aria-pressed="false">▲</button> - JS 中监听
click和keydown（捕获Enter和Space），统一调用同一函数 - 禁用状态用
disabled属性，别只靠 CSS 加 opacity —— 屏幕阅读器会忽略disabled按钮，但不会忽略视觉灰掉的<span>
代码块高亮别硬编码颜色，用 prism.js 或 highlight.js 的预设主题
Stack Overflow 的代码块有语法高亮、行号、复制按钮，但自己从零配颜色极易翻车：比如 string 用红色，在红绿色盲用户眼里和普通文本无异；comment 灰得太浅，投影下看不清。
直接引入 highlight.js 的 atom-one-dark.css 或 prism.js 的 okaidia.css 主题，它们已通过 WCAG AA 对比度校验。手动改颜色前，先用 Chrome DevTools 的“Contrast ratio”检查工具测一遍。
- HTML 中标记语言类型：
<pre><code class="python">print("hello")</code></pre> - 不要在
<code>上写style="color:#e6db74"—— 维护困难，且无法响应系统深色模式 - 复制按钮需加
aria-label="copy code block"，点击后用aria-live="polite"区域提示“Copied!”
响应式断点按内容而非设备定，侧边栏在 768px 后才显示
Stack Overflow 在手机上收起侧边栏、合并投票区到问题右侧，不是因为“iPhone 宽度是 375px”，而是当主内容列宽度小于 600px 时，侧边栏文字会折行严重、标签堆叠难读。所以断点应基于容器，而非 viewport。
用 container queries 最理想，但兼容性不够时，退而求其次用媒体查询 + 显式设置 main 最小宽度，再让 aside 在足够宽时才 display: block。
- 关键 CSS：
@media (min-width: 768px) { aside { display: block; } main { flex: 3; } } - 别用
max-width: 480px这类过时断点 —— 现在很多安卓平板也 480px 宽，却需要侧边栏 - 移动端投票按钮建议垂直排列（▲ ▼），别水平挤在一起，拇指操作更准
真正卡住人的往往不是布局怎么写，而是某个 aria-* 属性漏了、某处 tabindex 写错位置、或者代码块没套 <pre> 导致空格全塌陷——这些细节不修复，页面再像 Stack Overflow，对真实用户来说也不算“可用”。
