纯HTML博客需采用posts/目录存放独立文章页、index.html仅作摘要列表，并抽离公共片段配合构建脚本注入，CSS放/assets/css/且置于head中，JS避免阻塞渲染。
直接用 HTML 从零搭博客模板，不是不行，但得先认清一件事：纯 HTML 没法动态更新文章、没路由、没数据管理——它只适合静态内容展示。如果你真想“从零开始”，又希望后续能维护、加新文章、不手动改每个页面，那必须立刻引入一个极简但关键的机制：文件结构约定 + 静态生成逻辑（哪怕手写脚本），否则很快会卡在重复改 index.html、post-1.html、post-2.html 上。
怎么组织 HTML 文件结构才不踩坑
别一上来就写 index.html 然后往里堆所有内容。静态博客的核心是复用和可维护，哪怕不用框架，也要靠目录分层和明确职责：
-
index.html只负责列出文章摘要（标题、日期、简短描述），不放正文 - 每篇文章单独一个 HTML 文件，统一放在
posts/目录下，命名如posts/my-first-post.html - 公共部分（页头、页脚、导航）抽成独立片段？HTML 原生不支持 include，硬塞会导致改一处全复制——不如用构建思维：后续用
sed或 Python 脚本批量注入，或直接接受“小项目就手写两处” - CSS 和 JS 放
assets/css/style.css和assets/js/main.js，路径写绝对（以/开头），避免子目录下相对路径错乱
<link rel="stylesheet"> 和 <script> 的加载顺序影响首屏
浏览器解析 HTML 是自上而下，CSS 阻塞渲染，JS 默认阻塞解析。对简约博客来说，首屏就是文章列表，别让样式等 JS：
- 把
<link rel="stylesheet" href="/assets/css/style.css">放在<head>里，且确保style.css文件足够小（ - 把
<script src="/assets/js/main.js"></script>放在</body>前，或加defer属性（<script defer src="/assets/js/main.js"></script>） - 如果 JS 只为实现搜索或暗色模式切换，考虑用内联小脚本代替外部文件——省一次 HTTP 请求，比“代码整洁”更实在
用原生 HTML 语义标签替代 div 堆砌
很多人写“简约”反而用一堆 <div class="container"><div class="row"><div class="col">，既没语义也不简约。浏览器原生支持的语义标签，直接提升可访问性和 SEO：
立即学习“前端免费学习笔记（深入）”；
- 文章列表用
<main>包裹，每篇摘要用<article>，标题用<h2>（不是<h1>，首页<h1>应留给博客名） - 页头用
<header>，导航用<nav>，页脚用<footer>，侧边栏（如有）用<aside> - 日期用
<time datetime="2024-06-15">Jun 15, 2024</time>，搜索引擎和屏幕阅读器能识别 - 别为了“看起来一样”而重置所有默认样式；先用浏览器原生间距和字体，再微调——
margin-top: 1em比margin: 0 0 1rem 0更符合 HTML 本意
真正难的不是写第一个 index.html，而是决定哪些东西“必须自动化”。比如文章元信息（标题、日期、摘要）要不要统一放在 HTML 注释里，供后续脚本提取？要不要接受每次新增文章都手动更新 index.html 的链接列表？这些决策点，比选什么字体、配色更重要。
