关键在于语义化结构、Flex布局与渐进增强：用<header><nav><section><footer>替代<div>堆砌；导航与分栏用display: flex实现，避免float；轮播图和表单须保留HTML降级结构，JS仅增强交互；背景图设min-height: 100vh，字体用font-display: swap防FOUC。
纯 HTML + CSS 实现个人博客首页，关键不在“能不能写出来”，而在于结构是否经得起后续扩展、样式是否容易维护、语义是否清晰可读。用 <div> 堆砌再漂亮，也扛不住加个响应式菜单或换张轮播图就错位——这恰恰是学生作业里最常翻车的地方。
页头与导航栏必须用语义化标签，别硬套 <div>
很多人一上来就写 <div class="header">，结果导航菜单嵌套五层 <div>，JS 控制下拉时连目标元素都选不准。HTML5 明确提供了 <header>、<nav>、<section> 这些语义标签，浏览器和屏幕阅读器能识别，CSS 选择器也更干净。
-
<header>包住 logo 和主标题，别塞导航 —— 导航属于独立功能模块，应归入<nav> - 下拉菜单用
<ul><li><ul>结构，不是<div><span><div>；否则 CSS 的:hover > ul会失效 - 移动端菜单切换依赖
<input type="checkbox">+label+ 隐藏ul的技巧，比 JS 绑定 click 更轻量、更可靠
CSS 布局优先用 Flexbox，别碰浮动（float）
知识库里反复提到“浮动布局”，那是 2010 年代的兼容方案。现在所有主流浏览器（包括 Edge 16+、Chrome 29+、Firefox 28+）都支持 Flexbox，用 display: flex 写导航对齐、内容分栏、页脚粘底，代码行数少一半，且不会触发 BFC 问题导致 margin 合并或高度塌陷。
- 导航栏水平居中：给
<nav>设display: flex; justify-content: center;，比text-align: center+inline-block稳定得多 - 主内容区左右分栏（如左侧文章列表 + 右侧侧边栏）：用
display: flex+flex: 3/flex: 1，别用float: left+overflow: hidden清除浮动 - 轮播图容器设
display: flex; overflow-x: auto，配合scroll-snap-type实现原生滚动吸附，比手写 JS 切换更顺滑、更省电
图片轮播和表单交互必须有降级逻辑
知识库强调“要有 JS 特效”，但没说 JS 失效时页面会不会崩。比如轮播图用 JS 动态插入 <img> 标签，而用户禁用 JS 或网络中断，整个 banner 区域就空了；又比如留言表单只靠 required 属性校验，后端没做兜底，提交后直接 500 错误。
立即学习“前端免费学习笔记（深入）”；
- 轮播图结构先写完整 HTML：
<figure><img src="1.jpg"></figure><figure><img src="2.jpg"></figure>，JS 只负责加类名和事件，不接管 DOM 创建 - 表单
<form>必须带action和method="post"，哪怕本地测试用action="#"，也要保证 submit 后至少能触发默认行为（比如跳到锚点） - 所有 JS 功能检查
if ('querySelector' in document)再执行，避免 IE8 报Object doesn't support property or method 'addEventListener'
背景图和字体加载要防 FOUC 和布局抖动
知识库多次提到“网页背景图片”“配色优雅”，但没人说 body { background: url(...) } 在图片加载完成前页面是白屏，或者自定义字体（如思源黑体）未就绪时文字突然重排——这就是 FOUC（Flash of Unstyled Content）。
- 背景图用
background-image搭配background-size: cover时，务必设min-height: 100vh，否则小屏设备上图片被裁切、内容被顶出视口 - 字体加载用
@font-face+font-display: swap，确保文字先以系统字体渲染，等自定义字体就绪后再替换，不阻塞首屏 - 所有图片加
width和height属性（或 CSS 中固定尺寸），防止加载时页面上下跳动，尤其轮播图区域
真正难的不是写出首页，而是当你要加第 7 个页面、换第三套配色、把静态表单改成发邮件功能时，还能不动大结构、不重写 CSS。语义标签、Flex 布局、渐进增强的 JS 写法，这些不是“高级技巧”，而是让页面活过第一个迭代周期的基本功。
