文章列表该用 <ul> 或 <ol>，别用 <table>——它不是数据表格，强行套用会破坏语义、拖慢读屏器、让 SEO 无法识别条目结构。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

文章列表该用

还是

别用 <table> 做文章列表——它不是数据表格，强行套用会破坏语义、拖慢读屏器、让 SEO 无法识别条目结构。真实博客列表是「有序内容流」，<ul> 或 <ol> 才是语义正确选择。

常见错误现象：

• <table> 嵌套多层 <tr><td> 模拟标题+日期对齐，结果每篇文章变成孤立单元格，无法被爬虫归为同一逻辑组
• 用 <div class="post-item"> 替代语义标签，导致 main 区域内全是无层级的 div，辅助技术无法判断哪段是标题、哪段是元信息

正确做法：

• 外层用 <ul class="post-list">，每个条目用 <li> 包裹完整文章信息
• 每项内结构保持一致：<h2><a href="post-xxx.html">标题</a></h2><time datetime="2026-07-15">2026年7月15日</time><p>摘要…</p>
• 避免在 <li> 里再套 <div> 层级，除非真有样式隔离需求（比如卡片阴影）

如何让列表在桌面/平板/手机上都好读

响应式不是加个 @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> 是单篇内容的语义容器，不是列表项的装饰标签。把它硬塞进 <li> 里，反而模糊了层级关系。

典型错误写法：

<ul>
  <li><article><h2>标题</h2><time>2026-07-15</time></article></li>
</ul>

问题在哪：

• <article> 的语义是「独立可分发的内容单元」，首页列表里的条目只是摘要链接，并非完整文章，不该用 <article> 标记
• 屏幕阅读器会把每个 <li> 当作一个列表项播报，若里面再嵌 <article>，可能重复播报「文章」前缀，干扰理解
• SEO 工具可能误判首页为「多篇完整文章聚合页」，稀释单篇文章的权重

更合理的结构：

<ul class="post-list">
  <li>
    <h2><a href="post-1.html">标题</a></h2>
    <time datetime="2026-07-15">2026年7月15日</time>
    <p>这是摘要文本…</p>
  </li>
</ul>

真正需要 <article> 的地方，只在独立文章页的 <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。