应使用语义化的 <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 更稳——当某篇文章内容为空或高度异常时，视觉分隔线不会消失。
后续扩展最容易被忽略的两个点
这个页面往后大概率要加功能，现在埋好钩子能省很多事：
一是每篇 <article> 加上 id 或 data-slug，比如 <article data-slug="js-closure">，以后用 JS 做局部刷新或锚点定位就不用临时解析 URL；
二是日期用 <time datetime="YYYY-MM-DD"> 而非纯文本，这样既可被爬虫识别，也能用 getHours() 等方法做时间计算——别等要加“3 小时前发布”才回头补 datetime 属性。
