博客文章页必须用<article>包裹全文，<h1>和<time>须在<article>内且格式统一，CSS需独立选择器，资源路径全用根相对路径，标题与描述须动态生成。
博客文章页（post.html 或类似命名）必须和首页 index.html 在语义结构、样式复用、路径约定上保持一致，否则后期维护成本会指数级上升——比如改个标题颜色要同时修两个文件，加个阅读时间得手动补十篇。
文章页必须用 <article> 包裹全文
不是 <div class="post">，也不是 <section>。只有 <article> 能向搜索引擎和屏幕阅读器明确传达“这是一个独立、可分发、有完整生命周期的内容单元”。<h1> 必须出现在 <article> 内部且仅出现一次，用于文章主标题；<time datetime="2024-03-15"> 也应放在 <header> 中，和首页的 <time> 格式完全一致，方便后续用 JS 统一处理发布时间格式或相对时间计算。
- 错误写法：
<div><h1>标题</h1><p>正文...</p></div>—— 丢失语义，无法被 RSS 抓取器识别为独立条目 - 正确结构示例：
<article> <header> <h1>CSS Grid 布局避坑指南</h1> <p class="meta"><time datetime="2024-03-10">Mar 10, 2024</time> • 阅读 6 分钟</p> </header> <p><code>grid-template-areas</code> 中空字符串和点(.)行为不同...</p> </article> - 如果文章含多个章节，用
<section>划分，但不要嵌套在另一个<article>里——单篇文章就是一个<article>，这是 HTML5 的明确约束
style.css 里要预留文章专用选择器
首页的 .post-list .post-title 是给列表页用的，文章页需要独立但风格统一的选择器，比如 .article-header h1、.article-content p、.article-meta。这些类名不能和首页混用，否则改首页样式会意外影响文章排版。
- 所有字体大小、行高、段间距、引用块、代码块样式，都应在
style.css中基于<article>或其子类定义，而不是依赖全局p、h2等标签样式 - 特别注意：代码块必须继承首页规则，即
<pre>设white-space: pre、max-width: 100%、overflow-x: auto，否则移动端复制代码时会带多余空格或根本无法横向滚动 - 避免用
!important强覆盖，宁可多写一层上下文，比如用article .highlight而非.highlight，防止和首页侧边栏的同类 class 冲突
路径和链接必须全部用根相对路径
文章页里所有资源引用——CSS、JS、图片、回到首页的链接——都必须以 / 开头，比如 <link rel="stylesheet" href="/style.css">、<a href="/index.html">首页</a>、<img src="/assets/cover.jpg">。否则一旦把文章页放进 /posts/ 子目录，相对路径就会全崩。
立即学习“前端免费学习笔记（深入）”；
- 绝对 URL（
https://example.com/style.css）看似保险，但本地开发时无法离线预览，且换域名要批量替换 - 不推荐使用
<base href="/">，它会影响所有相对链接（包括锚点），容易引发导航跳转异常 - 文章内链接到其他文章，也统一用根路径：
<a href="/posts/js-closure.html">理解闭包</a>，别写成../js-closure.html
最易被忽略的是文章页的 <title> 和 <meta name="description"> ——它们不能硬编码，必须随每篇文章内容动态变化。哪怕现在手写 HTML，也要在 <title> 里留空并加注释 <!-- TITLE: [文章标题] -->，为以后接入静态生成器或简单脚本替换埋好钩子。
