应使用 main + article 构建博客结构，article 是语义上唯一正确的自包含内容单元；header 必须包裹标题与元信息，time 的 datetime 需为 ISO 格式；单栏布局用 flex-direction: column 而非 grid；摘要截断用 -webkit-line-clamp；导航与页脚保持极简语义。
用 main + article 搭结构，别套 div 或 ul
语义错位是新手最常踩的坑。很多人写成 <ul class="posts"><li><h2>标题</h2><p>摘要</p></li></ul>，这会让屏幕阅读器读成“列表项、列表项、列表项”，完全丢失每篇文章的独立性。article 才是语义上唯一正确的容器——它代表一个自包含、可独立分发的内容单元。
正确结构长这样：
<main>
<article>
<header>
<h2><a href="post1.html">标题</a></h2>
<p class="meta"><time datetime="2026-07-15">2026年7月15日</time></p>
</header>
<p>这是第一篇博客的摘要……</p>
</article>
<article>...</article>
</main>
-
header必须包裹标题和元信息（比如时间），不能只包h2 -
time的datetime属性值必须是 ISO 格式（YYYY-MM-DD），否则搜索引擎无法识别为有效时间点 - 外层不要加额外
div包裹article，main已是语义完整的节区
单栏布局用 flex-direction: column，不是 grid
单栏 ≠ 简单。Grid 是为多列设计的，强行用 grid-template-columns: 1fr 反而引入冗余逻辑；Flexbox 的垂直流天然匹配单栏阅读习惯，且兼容性更稳（IE11 都支持）。
关键 CSS 只需三行：
立即学习“前端免费学习笔记（深入）”；
main {
display: flex;
flex-direction: column;
gap: 2rem;
}
-
gap统一控制文章间距，比手动设margin-bottom更可靠（不会出现首尾多余空白） - 移动端无需额外媒体查询——单栏本就是默认行为
- 如果后续想加侧边栏，再改
display: grid并定义两列即可，结构不变
摘要截断必须用 -webkit-line-clamp，text-overflow: ellipsis 不管用
text-overflow: ellipsis 只对单行生效，而博客摘要通常要显示 2–3 行。多行截断依赖的是 WebKit 系列的非标准但广泛支持的属性组合。
给 p 加这段样式：
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
word-break: break-word;
}
-
-webkit-line-clamp: 3控制显示行数，Firefox 需额外加overflow: hidden才生效 -
word-break: break-word防止长英文单词撑破容器宽度 - 别用
height+overflow: hidden硬裁，会导致文字被切掉一半或行高错乱
导航和页脚用 nav + footer，但别堆功能
极简不是删减，而是克制。首页导航只需链接到 about.html 和 archive.html，不必塞进“标签”“RSS”“搜索框”——这些属于二级页面或后期迭代项。
页脚版权信息保持一行即可：
<footer> <p>© 2026 <a href="about.html">你的名字</a></p> </footer>
-
nav内部用a直接连，不用ul/li—— 单层导航不需要列表语义 - 所有链接都带
href，哪怕只是锚点（如#top），否则键盘用户无法聚焦跳转 - 字体大小、行高、颜色统一用系统默认值，额外设
font-size容易破坏可访问性缩放
真正难的不是写多少代码，而是忍住不加东西。每多一个图标、一种动效、一类分类，都在稀释“极简”的目的——它本该让人一眼看清你在说什么，而不是猜你在展示什么。
