纯HTML个人博客应以语义化结构、正确路径、锚点导航和响应式基础为务实起点：用<article><section><main><aside>明确内容层级，图片用相对路径，导航用href="#id"锚点，必加viewport和rem字体，移动端用CSS实现隐藏/展开菜单。
纯 HTML 搭建个人展示博客，不是“从零开始造轮子”的理想化练习，而是快速落地、能直接打开浏览器看效果、后续方便加功能的务实起点。它不依赖构建工具、不涉及部署配置，但必须避开新手常踩的结构陷阱和语义误用。
用 <article> 和 <section> 区分内容层级，别全用 <div>
很多人一上来就写一堆 <div class="post">，结果页面没有语义、屏幕阅读器读不出重点、SEO 也弱。个人博客首页通常包含：简介、几篇精选文章列表、联系方式 —— 这些不是并列区块，而是有主次的。
-
<main>包住核心内容（比如文章列表），<aside>放侧边栏（技能标签、社交链接） - 每篇博文用
<article>，它自带独立上下文；而“关于我”“最新动态”这类栏目用<section> - 避免嵌套过深：
<section> > <div> > <div> > <p>不如<section> > <h2>+<p>
图片路径写相对地址，别用 C:/Users/... 或绝对 URL
本地双击打开 HTML 文件时，浏览器走的是 file:// 协议，所有资源路径必须相对于该 HTML 文件位置。写错路径最常见表现是：图片显示为小图标、控制台报 net::ERR_FILE_NOT_FOUND。
- 假设文件结构是：
index.html和img/avatar.jpg在同一级目录 → 图片写<img src="img/avatar.jpg"> - 如果
index.html在blog/目录下，而图片在blog/assets/→ 写src="assets/avatar.jpg"，不是../assets/（除非你在子目录里） - 别在本地开发时用
https://yourdomain.com/img/...，否则离线就彻底空白
导航链接用 <a href="#about"> 实现锚点跳转，不是 JS 绑定
个人博客不需要路由库，首页内滚动导航完全可用原生锚点。关键不是“能不能跳”，而是跳完是否自然、是否影响历史记录、是否支持返回。
立即学习“前端免费学习笔记（深入）”；
- 目标区块加
id：<section id="about">...</section>，链接写<a href="#about">关于我</a> - 别写
javascript:void(0)或空href="#"，后者会跳到页首且污染 history - 配合一点 CSS 让滚动平滑：
html { scroll-behavior: smooth; }（现代浏览器都支持） - 如果导航固定在顶部，记得给
section加上padding-top，否则标题会被遮住
用 <meta name="viewport"> 和响应式字体撑起移动端基础
不加 viewport，手机上看到的只是缩放后的小网页，用户得手动 pinch-zoom，体验直接归零。这不是“锦上添花”，而是底线。
- 必须在
<head>里加：<meta name="viewport" content="width=device-width, initial-scale=1"> - 字体大小别写死
px，用rem或em：body { font-size: 1.125rem; }（即 18px），再配合媒体查询微调 - 图片加
max-width: 100%; height: auto;，防止横向溢出 - 导航菜单在小屏下先隐藏，靠一个 checkbox + label + CSS 实现展开（无需 JS），比写一堆 toggle 更轻量可靠
HTML 博客最难的不是写标签，而是判断哪些内容真该放在 HTML 里 —— 比如访问统计代码、评论框、文章搜索，这些留到后期用 JS 动态插入更稳妥。一开始就把结构语义理清、路径写对、移动端可读，后面加功能才不会返工。
