纯HTML+CSS可构建高可读性Issue列表页：用语义化标签（article/header/section/footer）、BEM类名、原生details/summary、无障碍键盘导航与屏幕阅读器支持、打印友好结构及视觉可访问的状态标记。
用纯 HTML + CSS 搭建可读性强的问题列表页
纯 HTML 页面也能做出清晰、可维护的 Issue 列表，关键不是“能不能动态”，而是结构是否语义正确、样式是否便于后续扩展。浏览器原生支持 <details> 和 <summary>，配合合理的 class 命名，就能支撑基础筛选、展开收起、状态标记等高频需求。
不要一上来就写 JS 控制显示隐藏 —— 先让 HTML 本身能表达“这是个待处理的高优 Bug”，再加样式强化视觉层次。比如用 class="issue issue--bug issue--high"，比写一堆 data-status="open" data-priority="high" data-type="bug" 更轻量且可读。
常见错误是把所有信息塞进一个 <div>，导致后期想加「按标签过滤」或「导出为 CSV」时无从下手。务必按语义拆分：
-
<article class="issue">包裹单个问题 -
<header>放标题、编号、状态徽标 -
<section class="issue__body">放描述、复现步骤 -
<footer class="issue__meta">放创建人、时间、标签
用 CSS 实现状态标签和优先级色块，不依赖 JS
Issue 状态（open / in-progress / closed）和优先级（low / medium / high）直接映射到 class，CSS 控制颜色和边框，既快又稳。浏览器不会因为 JS 加载失败而让页面变成黑白文字列表。
立即学习“前端免费学习笔记（深入）”；
示例规则：
.issue--open .issue__status { background: #34d058; color: white; }
.issue--high .issue__priority { border-left: 4px solid #cb2431; }
.issue__label { display: inline-block; padding: 2px 6px; font-size: 0.8em; border-radius: 3px; }
注意：别用 color: red 表示 high —— 色盲用户无法识别；改用边框+背景组合，并确保对比度 ≥ 4.5:1。工具推荐：[axe DevTools](https://www.deque.com/axe/devtools/) 可一键检测。
另外，避免给每个状态写独立 class（如 status-open、status-closed），统一用 issue--open 这种 BEM 风格，方便未来用 JS 批量切换。
让列表支持键盘导航和屏幕阅读器
Issue 列表不是静态海报，用户会用 Tab 键跳转、用 VoiceOver 朗读。两个最小但关键动作：
- 每个
<article class="issue">加tabindex="0"，使其可聚焦 - 标题用
<h3>（不是<div>或<p>），并确保嵌套在<article>内，形成正确文档大纲
错误写法：<div class="issue-title">点击保存后页面崩溃</div> → 屏幕阅读器无法识别这是标题，也无法与父 <article> 关联。
正确写法：<article class="issue"><h3 class="issue__title">点击保存后页面崩溃</h3>...</article>。这样 VoiceOver 会读作「第 3 项，标题：点击保存后页面崩溃」。
如果要加「展开详情」按钮，别用 <div onclick="...">，改用 <button type="button">，并配 aria-expanded 和 aria-controls。
导出为 Markdown 或打印时保持结构可用
很多团队会把 HTML Issue 页另存为 PDF 或复制到 Confluence。这时你会发现：浮动布局错乱、颜色消失、链接失效。解决思路很直接 —— 少用绝对定位，多用语义标签自带的流式行为。
实操建议：
- 打印样式里重置
float、position、background，但保留<h3>、<ul>、<time>的默认表现 - 所有链接必须含
href，哪怕只是href="#issue-123"，否则复制到 Markdown 时变成纯文本 - 时间字段用
<time datetime="2024-05-20">2024-05-20</time>，而不是<span>2024-05-20</span>，这样导出工具能识别为日期类型
最常被忽略的是「关闭 Issue」操作。纯 HTML 页没法真关，但可以加 <del> 包裹标题，并用 CSS 显示删除线 + 灰色文字，视觉上表达「已归档」，同时保留原始内容供回溯。
