应使用<ul><li>实现语义清晰的标签组，配合inline-flex布局、flex-wrap换行及aria-label增强无障碍访问，避免语义断裂与样式维护问题。
用 <ul> + <li> 实现语义清晰的标签组
标签组本质是无序的、平级的分类项，<ul> 是最自然的选择。别用 <div> 堆砌或强行用 <span> 拼接——既不利于屏幕阅读器识别，也增加后续样式维护成本。
常见错误：把每个标签写成独立 <p> 或套 <div class="tag">，结果语义断裂、无法键盘导航、SEO 权重分散。
- 每个标签必须包裹在
<li>内，父容器统一用<ul class="tag-list"> - 如果标签有跳转需求，
<a>放在<li>内部，不要反着来（比如<a><ul>...</ul></a>） - 避免给
<ul>设display: flex后忽略默认list-style: none，否则小圆点残留
display: inline-flex 比 float 或 inline-block 更可控
老方案常用 float: left 或 display: inline-block 排标签，但存在基线对齐错位、换行间隙、清除浮动等隐性问题。现代布局直接用 display: inline-flex 简洁可靠。
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
.tag-list {
padding: 0;
margin: 0;
list-style: none;
}
.tag-list li {
margin-right: 0.5rem;
}
.tag-list li:last-child {
margin-right: 0;
}
.tag-list li a {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
text-decoration: none;
border-radius: 4px;
background: #f1f3f5;
color: #495057;
}
-
inline-flex让整个<ul>行内表现，不影响段落流，也不需额外清除浮动 - 用
align-items: center自动垂直居中文字和可选图标，比line-height更稳定 - 避免对
a设display: block——会撑满父容器宽度，破坏紧凑感
响应式断点下用 flex-wrap: wrap 防止溢出
标签数量不确定时，小屏上容易横向溢出或折行错乱。单纯设 white-space: nowrap 不解决问题，反而导致滚动条或截断。
正确做法是在 .tag-list 上加 flex-wrap: wrap，配合 max-width 控制整体宽度：
.tag-list {
display: inline-flex;
flex-wrap: wrap;
gap: 0.5rem;
}
@media (max-width: 768px) {
.tag-list {
max-width: 100%;
}
.tag-list li {
flex: 1 0 auto;
min-width: 80px;
}
}
-
gap替代margin控制间距，避免首尾多出空白 - 小屏下设
min-width防止标签被压缩过窄，同时flex: 1 0 auto允许换行并尽量均分空间 - 别依赖
word-break: break-all强制换行——中文标签通常无需断字，且会破坏可读性
无障碍与 SEO 注意两个隐藏细节
看似简单的标签组，实际影响搜索收录和辅助设备体验。两个常被跳过的点：
- 给
<ul>加aria-label="文章分类"，让屏幕阅读器知道这组元素的用途 - 如果标签是纯装饰性（比如仅作视觉分隔，无跳转），改用
<span class="tag">并加aria-hidden="true"，避免冗余播报 - 避免在
<a>中嵌套<div>或<p>—— HTML5 不允许块级元素在行内锚点里
标签数量动态变化时，别硬编码固定高度或行数；语义、弹性、渐进增强，才是简约背后真正的约束力。
