文章列表该用 或 ，别用 ——它不是数据表格，强行套用会破坏语义、拖慢读屏器、让 seo 无法识别条目结构。
文章列表该用 还是 别用 <table> 做文章列表——它不是数据表格，强行套用会破坏语义、拖慢读屏器、让 SEO 无法识别条目结构。真实博客列表是「有序内容流」，<code><ul></ul> 或 <ol></ol> 才是语义正确选择。
常见错误现象：
<table> 嵌套多层 <code><tr><td> 模拟标题+日期对齐，结果每篇文章变成孤立单元格，无法被爬虫归为同一逻辑组
<li>用 <code><div class="post-item"> 替代语义标签，导致 <code>main 区域内全是无层级的 div，辅助技术无法判断哪段是标题、哪段是元信息
正确做法：
- 外层用
<ul class="post-list"></ul>，每个条目用 <li> 包裹完整文章信息
- 每项内结构保持一致：
<h2>@#@#@#@#@#@#@#@#@#@0</h2>
<time datetime="2026-07-15">2026年7月15日</time><p>摘要…</p>
- 避免在
<li> 里再套 <div> 层级，除非真有样式隔离需求（比如卡片阴影）
<h3>如何让列表在桌面/平板/手机上都好读</h3>
<p>响应式不是加个 <code>@media 就完事——关键在于断点要匹配文字可读性，而不是设备型号。
容易踩的坑：
- 沿用 Bootstrap 默认的
768px 断点，但博客正文行宽超过 80ch，小屏阅读时眼睛得来回扫视
- 用
vw 单位设字体大小，iOS Safari 渲染不稳定，横竖屏切换时字号突变
- 侧边栏在平板上还硬留着，挤占主内容区，导致段落过窄、换行频繁
实操建议：
- 桌面端：主内容区设
max-width: 720px，左右留白明显；列表项用 display: grid 分两列（标题+时间左对齐，摘要右对齐）
- 平板（
768px）：移除侧边栏，.post-list 改为单列，font-size 微调至 1.1rem
- 手机（
480px）：启用 line-height: 1.6、段间距加大，禁用所有 float 和 inline-block 布局
为什么 <article></article> 不该直接塞进列表项
<article></article> 是单篇内容的语义容器，不是列表项的装饰标签。把它硬塞进 <li> 里，反而模糊了层级关系。
典型错误写法：
标题
问题在哪：
-
<article></article> 的语义是「独立可分发的内容单元」，首页列表里的条目只是摘要链接，并非完整文章，不该用 <article></article> 标记
- 屏幕阅读器会把每个
<li> 当作一个列表项播报，若里面再嵌 <article></article>，可能重复播报「文章」前缀，干扰理解
- SEO 工具可能误判首页为「多篇完整文章聚合页」，稀释单篇文章的权重
更合理的结构：
-
标题
这是摘要文本…
真正需要 <article></article> 的地方，只在独立文章页的 <main></main> 内部。
侧边栏和主列表共存时，CSS 用 flex 还是 grid
两者都能实现，但选错会影响维护性和窄屏行为。
性能与兼容性影响：
- 现代浏览器（Chrome/Firefox/Safari iOS 16+）对
display: flex 和 display: grid 都支持良好
- 若需兼容 IE11，只能选
flex，且必须加 flex-wrap: wrap，否则窄屏下侧边栏会被挤出视口
推荐方案：
- 用
display: flex：父容器设 display: flex，主列表区加 flex: 1，侧边栏设 width: 280px 或 flex: 0 0 280px
- 用
display: grid：父容器设 grid-template-columns: 1fr 280px，主列表设 grid-column: 1，侧边栏设 grid-column: 2
- 别用
float 或绝对定位——它们脱离文档流，会导致后续元素布局错乱，尤其在动态加载更多文章时极易崩
真正难处理的不是布局本身，而是当列表项高度不一时（比如有的摘要长、有的短），flex 的默认 align-items: stretch 会让所有 <li> 拉齐高度，视觉上反而割裂。这时候得主动设 align-items: flex-start。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
