博客列表页基础HTML结构为：每篇用<article>包裹，内含<h2>标题链接、<time>发布时间、<span class="tag">或分类标签、<p>摘要；标签语义与跳转需求匹配，支持SEO和可访问性。
博客列表页需要哪些基础 HTML 结构？
一个带分类标签的博客列表页，核心是「文章条目」+「分类标识」+「可点击跳转」。不需要框架也能实现，关键是语义清晰、便于后续加样式或 JS 交互。
- 每篇博客用
<article>包裹，这是最自然的语义选择 - 分类标签放在每篇
<article>内部，推荐用<span class="tag">或<a href="#category-js" class="tag">（如果分类页存在） - 标题用
<h2>，发布时间建议用<time datetime="2024-03-15">Mar 15, 2024</time>，利于 SEO 和可访问性 - 列表本身不用
<ul>，直接平铺<article>更灵活，也避免为样式额外清空列表默认样式
<article> <h2><a href="post1.html">如何调试 Webpack 构建慢的问题</a></h2> <time datetime="2024-03-15">Mar 15, 2024</time> <span class="tag">webpack</span> <span class="tag">performance</span> <p>本文记录一次真实构建耗时从 9s 降到 1.8s 的过程……</p> </article>
分类标签该用 <span> 还是 <a>？
取决于你是否为每个分类建了独立页面（比如 /category/javascript.html）。不是“哪个更好”，而是“是否要跳转”。
- 如果只是视觉标记、不跳转：用
<span class="tag">javascript</span>，简单干净 - 如果要点进去看同分类所有文章：必须用
<a href="/category/javascript.html" class="tag">javascript</a>，否则无法导航 - 避免用
<div class="tag">：语义错误，<div>是无意义容器，屏幕阅读器不会识别它和内容的关系 - 不要用
onclick="location.href=..."模拟链接：破坏可访问性，禁用 JS 时失效，也不支持右键新标签打开
怎么让多个标签横向排列且不换行？
默认 <span> 是行内元素，但多个并排容易因父容器窄而折行。常见问题：标签挤在一行末尾突然断开、间距不均、移动端溢出。
- 给标签容器（比如
<header>或包裹标签的<div>）加display: flex，再设flex-wrap: wrap（允许折行）或flex-wrap: nowrap（强制单行，配合overflow-x: auto横向滚动） - 每个
<span class="tag">加margin-right: 0.5rem，末尾标签用:last-child { margin-right: 0 }避免多余空白 - 移动端慎用
white-space: nowrap：它会让长标签撑破容器，不如用flex+min-width: max-content更可控 - 真实项目中，标签文字过长（如 “machine-learning-for-beginners”）建议截断：
text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 120px;
静态 index.html 怎么实现分类筛选功能？
纯 HTML 无法动态过滤，但可以低成本模拟：用锚点 + CSS :target 配合少量 JS 就能实现“点标签只显示对应文章”。
立即学习“前端免费学习笔记（深入）”；
- 先给每篇文章加
data-category属性，比如<article data-category="javascript webpack">（支持多分类） - 所有分类标签做成链接：
<a href="#filter-javascript">javascript</a> - 写一段极简 JS（< 20 行），监听点击，遍历
<article>，检查dataset.category是否包含目标关键词，然后切hidden属性 - 不写 JS 的底线方案：用
<details><summary>折叠不同分类区块，但体验割裂，适合内容少、分类明确的场景
标签的语义、可访问性和后续扩展性，比“看起来像不像博客”重要得多。很多人卡在“怎么让标签圆角+背景色”，却忘了先确认它是不是真能被键盘聚焦、被屏幕阅读器读出来——这点在上线前用 Tab 键快速测一遍就能发现。
