怎么制作一个简单的文章列表页面

作者：袖梨 2026-06-26

应使用语义化的 <article> 而非 <ul><li> 构建文章列表，每篇用 <header> 包裹标题与 <time> 标记日期，结构清晰、利于 SEO 和后续交互扩展。

用 HTML + CSS 实现基础文章列表，不需要框架

纯 HTML 就能做出可用的文章列表页，关键不是“怎么写标签”，而是结构是否语义清晰、后续是否方便加样式或交互。别一上来就套 Bootstrap 或写一堆 <div> 堆砌。

核心思路：用 <article> 包每篇内容，<header> 放标题和元信息，<time> 标记日期——这样既利于 SEO，也方便以后用 JS 按时间排序或筛选。

示例结构：

<main>  <article>    <header>      <h2><a href="post1.html">如何理解闭包</a></h2>      <p class="meta"><time datetime="2024-03-15">2024-03-15</time> • 阅读 4 分钟</p>    </header>    <p>闭包常被误解为“函数里返回函数”，其实本质是……</p>  </article>  <article>    <header>      <h2><a href="post2.html">CSS Grid 布局避坑指南</a></h2>      <p class="meta"><time datetime="2024-03-10">2024-03-10</time> • 阅读 6 分钟</p>    </header>    <p><code>grid-template-areas</code> 中空字符串和点（.）行为不同，容易漏掉响应式断点……</p>  </article></main>

为什么不用 `<ul>` + `<li>` 做列表？

很多人习惯用无序列表模拟文章列表，但这是语义错位：<ul> 表示“并列的同类项”，比如导航菜单、标签云；而每篇文章是独立、有完整结构的内容单元，<article> 才是正确语义容器。

立即学习“前端免费学习笔记（深入）”；

后果很实际：

屏幕阅读器会把整页当成一个大列表读出来，每篇标题后还带“列表项”提示，体验混乱
后续想给某篇文章加封面图、作者头像、分类标签时，硬塞进 <li> 会让结构松散、样式难控制
<article> 天然支持 aria-labelledby 和 itemprop，对 SEO 和结构化数据更友好

CSS 只需几行就能撑起基本排版

不需要写几十行 CSS。重点控制三处：间距、标题链接样式、元信息弱化。

推荐最小可行样式：

article {  margin-bottom: 2rem;  padding-bottom: 2rem;  border-bottom: 1px solid #eee;}article:last-child {  border-bottom: none;  margin-bottom: 0;  padding-bottom: 0;}article h2 a {  text-decoration: none;  color: #1a1a1a;}article h2 a:hover {  text-decoration: underline;}.meta {  font-size: 0.875rem;  color: #666;  margin-top: 0.5rem;}

注意：border-bottom 比 margin-bottom 更稳——当某篇文章内容为空或高度异常时，视觉分隔线不会消失。