纯HTML“精美”个人博客本质是控制预期与聚焦关键点：用HTML5语义化标签（如<header><nav><main><article>）构建清晰结构，配合viewport设置、Flex布局实现可靠响应式，JS仅用于必要交互（如导航折叠、TOC高亮、表单校验），部署时严守相对路径、UTF-8编码及大小写敏感规范。
纯 HTML 搭建“精美”个人博客，本质是控制预期+聚焦关键点：不靠框架、不依赖后端，也能做出结构清晰、视觉协调、在主流浏览器里不崩、手机上能看的页面。核心不在炫技，而在避开几个高频翻车点。
用对语义化标签，比写一堆 div 更省力
很多人一上来就写 <div class="header">，结果样式越写越多，SEO 和屏幕阅读器支持也弱。HTML5 的语义标签不是装饰，是自带轻量级结构逻辑。
-
<header>和<footer>必须包裹顶层内容，别只当容器用——它们天然有默认 margin 和可访问性角色 -
<nav>里放导航链接，<main>只包真正主体内容（一篇博文、一个介绍段落），搜索引擎和辅助工具会据此判断页面重点 -
<article>和<section>不是随便替换用的：<article>表示独立可分发的内容（如单篇博文），<section>是主题分组（如“技术笔记”“生活随笔”） - 错用
<aside>（比如塞进主菜单）会导致语义混乱，部分读屏软件会跳过或误读
响应式布局别硬写 media query，先靠 viewport 和 flex
很多初学者一写响应式就猛加 @media，结果在 iPhone 上文字挤成一团，在 iPad 上留白失控。其实 80% 的基础适配，两步就能稳住：
- 必须在
<head>里加这行：<meta name="viewport" content="width=device-width, initial-scale=1.0">—— 没它，移动端就是“缩放版桌面页”，再好看的 CSS 都白搭 - 导航栏、文章列表、侧边信息块，优先用
display: flex而非浮动或绝对定位；flex-wrap: wrap+flex-basis能自然应对小屏换行，比写三套 media query 更可靠 - 图片别只设
width: 100%，加一句height: auto，否则拉伸变形；若需封面图，用object-fit: cover更可控 - 慎用
px固定宽高：字体大小用rem，容器宽度用%或max-width，留出呼吸空间
静态博客的“动态感”靠 JS 控制粒度，不是堆特效
所谓“精美”，常被误解为轮播图、悬浮动画、点击烟花。但纯 HTML 博客里，JS 应只做三件事：补 HTML/CSS 做不到的、且不影响首屏加载的交互。
立即学习“前端免费学习笔记（深入）”；
- 折叠/展开导航菜单（尤其移动端）：用
classList.toggle()切换is-open类，CSS 控制显示/隐藏，别用display: none硬切——影响可访问性 - 文章目录（TOC）自动锚点跳转：监听
scroll，用getBoundingClientRect()判断当前章节是否进入视口，再高亮对应 TOC 项 - 表单提交前校验（如留言框）：检查
email格式、必填字段，用setCustomValidity()配合原生提示，别自己弹 alert - 避免在
<head>加大型 JS 库（如 jQuery）——一个fetch()加 JSON 数据就够了；JS 文件务必加defer属性
部署前必查的三个隐形坑
本地双击打开看着完美，一上传 GitHub Pages 就错位、图片不显示、中文乱码——问题往往不出在代码本身。
- 路径全用相对路径：
./images/avatar.jpg，别写images/avatar.jpg或绝对路径；GitHub Pages 默认从子目录起服务，根路径行为和本地 file:// 不同 - 文件名别含空格或中文：服务器对大小写敏感（
About.html≠about.html），且某些托管平台会把中文文件名转义失败 -
<meta charset="UTF-8">必须出现在<head>最前面，且 HTML 文件本身也得存为 UTF-8 编码（VS Code 右下角可确认）；否则中文标题、标点全变
真正难的不是写出“看起来美”的页面，而是让结构经得起不同设备、不同用户、不同加载条件的检验。语义、路径、编码、加载时机——这些地方不动声色，却决定别人愿不愿意多看你一页。
