简介这套面向大学生网页设计期末大作业的静态HTML作品合集汇集个人主页、个人博客、个人网站模板等多套页面采用divcss框架并以HTMLCSSJS编写适合初学者参考布局、配色、导航与交互实现也能缓解作业数量多、无从下手的压力。压缩包共4261个文件约142.4MB以jpg、png、gif图片素材和html页面、css样式、js脚本为主并含scss/less样式预处理文件、字体文件及docx说明等配套素材与样式框架较完整。已有22949人学习说明其在课程作业与入门练习场景中具有一定参考价值。读者可据此快速筛选合适模板拆解页面结构、复用样式组件、对照完善个人博客或主页作品并在此基础上完成二次修改与提交。1. 从一份交不上去的期末大作业说起静态个人网站到底要交付什么每年期末前两周总有人拿着一个“能跑但不敢交”的页面来问导航点了没反应、手机上字挤成一团、博客列表是手写死的六条。个人网页制作这件事难的不是把 HTML 敲出来而是让一份静态 HTML 个人网页作品在别人的电脑上打开时配色、排版、交互都撑得住场面。这套方案面向两类人要交个人网页设计期末大作业的学生和需要一份能直接改的个人网站模板的开发者。做法是用纯静态页面搭一个包含首页、关于、作品、博客、联系五个板块的个人博客站点不依赖后端和构建工具双击index.html就能完整浏览。下面从需求、结构、样式系统、功能模块一路讲到验收和答辩每个环节都给到能照着改的代码和判断标准。2. 需求与技术选型不引入构建工具的四层文件结构动手写第一行 HTML 之前先把“交什么”定下来。我见过太多人上来就找模板改了两天配色最后发现少一个博客详情页临时拼一个出来样式和主站完全两套。先把页面清单、每页区块、验收口径钉死后面所有工作都围绕这张表推进。2.1 页面清单与验收口径先钉死个人博客站点的页面数量控制在五到六个最合适少一个显得单薄多一个自己维护不过来。下面这张表是通常的做法每一行都对应答辩时老师会问的一个点。页面文件名必须包含的区块验收时看什么首页index.html首屏自我介绍、技能标签、精选作品三张卡片、最新三篇博客摘要首屏是否在 3 秒内传达“我是谁、我会什么”关于about.html个人简介、时间线、技能条、联系方式时间线是否用统一组件而不是手写四段 div作品works.html六到九个作品卡片、分类筛选卡片高度是否对齐、图片比例是否统一博客列表blog.html文章卡片列表、标签筛选、分页或“加载更多”列表是否由数据渲染而不是复制粘贴博客详情post.html标题区、正文、代码块样式、上一篇下一篇正文里的长代码、长表格是否溢出联系contact.html表单、校验提示、提交成功反馈空提交、错误邮箱是否有明确提示验收口径一般拆成五个维度页面完整性、视觉一致性、响应式表现、交互可用性、代码规范。这五条不是给老师看的是给自己排优先级用的——时间不够时先保页面的完整性和视觉一致性动画和花哨交互可以砍。血泪经验是一个八个页面但每页都粗糙的站得分低于四个页面但每页都干净利落的站。页面的公共部分要提前想清楚哪些是复用的。导航栏、页脚、卡片、按钮、标签、分页器这六类组件在五个页面里反复出现必须抽成统一的类名结构。静态站没有组件化框架靠的是“同一段 HTML 复制过去 同一套 class 控制样式”所以 class 命名必须在写第一页时就定下来中途改名会牵动全部页面这是最容易翻车的地方。2.2 为什么不引入框架只用 HTML CSS 原生 JS这个项目最常见的选型争论是要不要上 Vue 或者 React。我的判断很直接交付环境决定了技术选型。期末大作业的验收场景通常是老师在自己的电脑上解压、双击打开机器上大概率没有 Node 环境甚至可能断网。一旦项目依赖npm install和本地 dev server你就把“能不能打开”这件事交给了别人的环境这是不必要的风险。对比项原生静态页脚手架 框架打开方式双击即开无需任何环境需安装依赖并启动服务首屏体积几十 KB 到几百 KB打包产物通常 200 KB 起代码可读性老师能直接看到结构需要看编译产物或源码目录调试成本浏览器直接改、直接看需要理解构建流程适合的规模6 个页面以内的展示型站点有复杂状态和多角色交互的系统原生方案的天花板确实低但对个人展示型站点完全够用。真正需要框架的是有登录态、有复杂表单联动、有多人协作编辑的系统个人博客不在此列。而且从评分角度看一份结构清晰、语义化标签用得规范的 HTML比一个塞进框架但组件套组件、看不出层次的项目更容易拿高分——老师看的是你对页面结构的理解不是你会不会配 webpack。原生方案要付出的代价是路由要自己用多页面解决数据复用要靠 JSON 或全局变量状态管理基本没有。这些代价在这个规模下都可以接受后面第 4 章会具体说数据怎么组织。2.3 目录结构与命名约定目录结构定得早后面加页面不用挪文件。我一般用下面这套骨架四层页面层、资源层、样式脚本层、数据层。personal-site/ ├── index.html # 首页 ├── about.html # 关于我 ├── works.html # 作品集 ├── blog.html # 博客列表 ├── post.html # 博客详情通过 ?id 参数区分文章 ├── contact.html # 联系页 ├── assets/ │ ├── css/ │ │ ├── base.css # 重置、变量、排版基础 │ │ ├── layout.css # 栅格、页头页脚、响应式断点 │ │ └── components.css # 卡片、按钮、标签、表单 │ ├── js/ │ │ ├── data.js # 全站数据博客、作品挂到 window 上 │ │ ├── common.js # 导航、主题切换、回到顶部 │ │ └── blog.js # 列表渲染与详情渲染 │ └── img/ │ ├── avatar.webp │ └── works/ # 作品图统一放子目录按序号命名 └── README.md # 交付说明怎么打开、改哪里命名上有三条硬规矩。第一文件名全小写、单词间用短横线不用中文、不用空格、不用大小写混排——Works-List.html在 Windows 上没事在区分大小写的环境里就是 404。第二图片按内容语义编号works-01.webp这种别用微信导出的IMG_20241012_193021.jpg一是不好看二是换图时对不上号。第三样式拆三个文件而不是一个巨大的style.cssbase.css管变量和重置layout.css管大结构components.css管小组件改配色只动第一个文件改栅格只动第二个这个分法在后期调整时省的时间最多。图片处理上还有一个容易被忽略的点单张作品图控制在 200 KB 以内格式优先 WebP尺寸按最大展示宽度的两倍导出即可。整个站点的图片总量压在 3 MB 以内交作业打包不会超过邮件附件限制老师打开也不会卡。3. 页面骨架与样式系统从配色令牌到移动端导航静态站没有设计系统兜底样式全靠自己约束。最常见的失败形态是首页配色好看翻到博客页字号又变了作品页卡片圆角是 8px联系页表单圆角是 4px。这类不一致单看每一页都不明显五页连起来翻就露馅。解法是先把“可变的东西”全部抽成 CSS 变量页面只消费变量不写死数值。3.1 用自定义属性搭一套配色与字号令牌下面这段是基础层浅色和深色两套主题共用一套变量名切换主题只改>/* assets/css/base.css —— 全站令牌层改配色只动这里 */ :root { /* 主色与语义色按 50-900 的梯度准备三档够用了 */ --color-brand: #2f6feb; --color-brand-soft: #e8f0ff; --color-text: #1a1d23; --color-text-muted: #5b6472; --color-bg: #ffffff; --color-surface: #f6f7f9; --color-border: #e3e6eb; /* 间距按 4px 基准8 / 16 / 24 / 40 / 64 五档覆盖 95% 场景 */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; /* 字号流体缩放最小 16px随视口增长最大 20px */ --font-body: clamp(16px, 1.6vw, 20px); --font-h3: clamp(18px, 2vw, 22px); --font-h2: clamp(22px, 3vw, 30px); --font-h1: clamp(28px, 4.4vw, 44px); --radius-sm: 6px; --radius-md: 12px; --shadow-card: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06); } /* 深色主题只覆盖变量值组件样式一行都不用改 */ [data-themedark] { --color-brand: #6f9bff; --color-brand-soft: #1c2a44; --color-text: #e8eaee; --color-text-muted: #9aa3b2; --color-bg: #14161a; --color-surface: #1c1f25; --color-border: #2a2f38; --shadow-card: 0 1px 2px rgba(0, 0, 0, .4); }这段的关键设计是“语义命名”而不是“外观命名”。变量叫--color-text而不是--color-black叫--color-surface而不是--color-gray-100。原因很实际深色主题下正文颜色是浅灰如果变量叫--color-black赋值成#e8eaee就成了笑话后面接手的人也会被误导。clamp()的三个参数分别是最小值、首选值、最大值1.6vw表示随视口宽度线性变化。这样在 1280px 和 1440px 两个常见分辨率之间字号是连续过渡的不会出现“刚好卡在断点上字突然跳大一号”的观感。参数怎么调如果觉得正文在小屏上偏小把最小值从16px提到17px如果大屏上标题太夸张把4.4vw降到3.8vw。还要配一段最小重置避免不同浏览器默认边距不一致/* 重置只做必要的几件事不要抄一整套 normalize */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-size: var(--font-body); line-height: 1.75; /* 中文正文行高给到 1.7-1.8 才不挤 */ font-family: system-ui, -apple-system, PingFang SC, Microsoft YaHei, sans-serif; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--color-brand); text-decoration: none; }box-sizing: border-box是必须的否则后面给卡片加内边距会把宽度撑破手机上直接出现横向滚动条。字体栈用系统字体而不是外链字体理由在第 5 章会展开——断网环境下外链字体会静默失败整站字体回退成宋体观感直接掉一档。3.2 三段式骨架与语义化标签六个页面共用一套骨架跳转链接、页头、主内容、页脚。页头页脚的内容在每个页面里复制虽然重复但静态站就是这样改的时候用编辑器的多文件替换比引入模板引擎省事。骨架用语义化标签header、nav、main、article、footer这几个标签老师是会看的。!-- 每个页面共用的骨架index.html 为例 -- body a classskip-link href#main跳到主要内容/a header classsite-header div classcontainer header-inner a classlogo href./index.htmlA同学/a button classnav-toggle aria-expandedfalse aria-controlssite-nav aria-label打开导航 span/spanspan/spanspan/span /button nav classsite-nav idsite-nav ul lia href./index.html aria-currentpage首页/a/li lia href./about.html关于/a/li lia href./works.html作品/a/li lia href./blog.html博客/a/li lia href./contact.html联系/a/li /ul /nav /div /header main idmain classcontainer !-- 页面各自的内容 -- /main footer classsite-footer div classcontainer p© 2024 A同学 · 用 HTML / CSS / JavaScript 手写/p /div /footer button classback-to-top aria-label回到顶部 hidden↑/button /bodyaria-currentpage这一行是导航高亮的关键配合一条 CSS 规则就能标出当前页不需要在每个页面手动加active类.site-nav a[aria-currentpage] { color: var(--color-brand); font-weight: 600; }.skip-link是键盘用户按 Tab 时第一个聚焦的元素默认移出视口聚焦时滑入。这个细节在答辩里提一句能直接体现你考虑过可访问性比多写三个动画有用。aria-expanded和aria-controls是给移动端汉堡按钮用的后面 3.3 的脚本会读写它。容器用一个类统一控制最大宽度和左右留白.container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--space-4); }margin-inline和padding-inline是逻辑属性中文站点从左到右等价于margin-left/right但写起来更短、语义更准。最大宽度选 1120px 是因为正文单行超过 90 个字符阅读会累1120px 去掉左右留白后正好在 75 到 85 字符之间。3.3 断点、栅格与移动端导航断点不用设太多三档够用手机默认样式、768px平板、1024px桌面。写法上采用移动优先——基础样式是手机布局媒体查询里用min-width往上加而不是从桌面往下减。这样手机上永远不会出现“忘了覆盖某个宽度”导致的溢出。/* layout.css —— 卡片栅格移动端一列平板两列桌面三列 */ .card-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; /* 手机单列 */ } media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } .site-nav ul { gap: var(--space-5); } } /* 移动端导航默认收起展开时纵向排列 */ media (max-width: 767.98px) { .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; } .site-nav { display: none; position: absolute; inset: 64px 0 auto 0; /* 吸附在页头下方 */ background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); } .site-nav.is-open { display: block; } .site-nav ul { flex-direction: column; gap: var(--space-3); } }移动端汉堡菜单的开关逻辑放在common.js里同时要处理三件事点击切换、点击菜单外区域关闭、按 Esc 关闭。第三件事很多人不做但在答辩现场用键盘演示时会很尴尬。// assets/js/common.js —— 移动端导航开关 const toggle document.querySelector(.nav-toggle); const nav document.querySelector(#site-nav); function setNav(open) { nav.classList.toggle(is-open, open); toggle.setAttribute(aria-expanded, String(open)); toggle.setAttribute(aria-label, open ? 关闭导航 : 打开导航); } toggle?.addEventListener(click, () { setNav(!nav.classList.contains(is-open)); }); // 点击导航外部区域时收起避免菜单挡住内容 document.addEventListener(click, (e) { if (!nav?.classList.contains(is-open)) return; if (nav.contains(e.target) || toggle.contains(e.target)) return; setNav(false); }); // 键盘 Esc 关闭答辩演示时的加分项 document.addEventListener(keydown, (e) { if (e.key Escape) setNav(false); });setNav把“类名切换”和“aria 属性同步”收在一个函数里是为了避免只改样式不改属性的常见错误——视觉上菜单开了读屏软件读到的还是“已收起”。?.可选链是因为common.js会被所有页面引入而某些页面可能没有导航按钮比如详情页做了极简布局不加判断会报错中断后面的脚本。inset: 64px 0 auto 0是top/right/bottom/left的简写页头高度固定 64px菜单正好贴在下沿。如果页头高度改了这里要同步改所以更好的做法是给页头设一个--header-h: 64px变量两处都引用它。3.4 中文排版细节行高、字重与留白中文排版和英文差别很大按英文习惯写出来的页面会显得“紧”。三条经验正文行高 1.7 到 1.8标题行高 1.3 到 1.4中文不用 300 这种细字重屏幕上看不清正文 400、标题 600 足够段落之间用margin-block拉开不要靠br换行。列表和卡片之间的留白按 8 的倍数走16、24、40 三档基本能覆盖随手写margin: 13px这种数值多个页面拼起来就会显得杂乱。4. 功能模块落地数据驱动、主题切换与表单校验到这一层页面能看了接下来是让页面“像个站”的东西博客列表不是手写死的主题能切换并且刷新后记得住联系表单点了有反馈。这三个功能加起来不到 200 行 JS但覆盖了静态站 90% 的交互需求。4.1 用一份数据文件驱动博客列表与详情博客列表最容易犯的错是复制粘贴卡片六篇文章六段 HTML改个日期要改六处。正确做法是把文章元信息抽成数组列表页遍历渲染详情页根据 URL 参数取对应文章。数据放在data.js里挂到window上而不是用fetch请求 JSON——原因很关键file://协议下浏览器会拦截fetch双击打开的页面会白屏这是静态站最经典的坑第 5 章会详细说。// assets/js/data.js —— 全站数据源新增文章只改这个文件 window.SITE_DATA { posts: [ { id: css-variables, title: 用 CSS 变量管住一套配色, date: 2024-05-12, tags: [CSS, 工程化], summary: 把颜色、间距、字号抽成令牌改主题只动一处。, cover: ./assets/img/posts/cover-01.webp, content: [ { type: p, text: 变量不是新鲜东西但用对了能省很多返工…… }, { type: h3, text: 先定语义再定颜色 }, { type: code, lang: css, text: :root { --color-brand: #2f6feb; } } ] }, { id: responsive-grid, title: 三档断点够不够用, date: 2024-04-28, tags: [响应式, 布局], summary: 手机、平板、桌面三档配合移动优先写法覆盖绝大多数场景。, cover: ./assets/img/posts/cover-02.webp, content: [ { type: p, text: 断点不是越多越好越多越难维护…… } ] } ] };正文用数组存结构化片段段落、小标题、代码而不是直接存 HTML 字符串。这样渲染时能按类型套不同样式也避免了拼接字符串导致的 XSS 隐患——虽然是个人站但养成习惯没坏处。列表页的渲染逻辑// assets/js/blog.js —— 列表页渲染 const listEl document.querySelector(#post-list); const data window.SITE_DATA?.posts ?? []; function renderList(posts) { if (!posts.length) { listEl.innerHTML p classempty暂时还没有文章。/p; return; } // 按日期倒序最新的排最前 const sorted [...posts].sort((a, b) b.date.localeCompare(a.date)); listEl.innerHTML sorted.map((post) article classcard a classcard-cover href./post.html?id${post.id} img src${post.cover} alt${post.title} loadinglazy width640 height360 /a div classcard-body time datetime${post.date}${post.date}/time h3a href./post.html?id${post.id}${post.title}/a/h3 p${post.summary}/p ul classtag-list ${post.tags.map((t) li${t}/li).join()} /ul /div /article ).join(); } renderList(data);[...posts].sort()先浅拷贝再排序避免直接改动原数组导致其他页面拿到乱序数据。localeCompare比较YYYY-MM-DD格式的字符串等价于按日期排序写法比转Date对象短。图片上写死width和height是为了占位防止图片加载完成后页面高度跳动——这个细节在 Lighthouse 的性能评分里是明确扣分项。详情页用URLSearchParams取id找不到就显示兜底内容// assets/js/blog.js —— 详情页渲染同一个文件按容器存在与否分流 const articleEl document.querySelector(#post-detail); if (articleEl) { const id new URLSearchParams(location.search).get(id); const post window.SITE_DATA.posts.find((p) p.id id); if (!post) { articleEl.innerHTML p classempty文章不存在a href./blog.html返回列表/a。/p; } else { articleEl.innerHTML h1${post.title}/h1 p classmetatime${post.date}/time · ${post.tags.join( / )}/p ${post.content.map(renderBlock).join()} ; document.title ${post.title} · A同学的博客; } } function renderBlock(block) { if (block.type p) return p${block.text}/p; if (block.type h3) return h3${block.text}/h3; if (block.type code) { // 代码块统一转义避免尖括号被当成标签解析 const safe block.text .replace(//g, amp;).replace(//g, lt;).replace(//g, gt;); return precode classlang-${block.lang}${safe}/code/pre; } return ; }renderBlock里做转义是必要的想在代码块里展示一段 HTML 示例不转义的话浏览器直接渲染页面上什么都看不见。document.title动态改写让浏览器标签页显示文章名这是静态站也能做到的小细节。4.2 深浅色主题切换与本地记忆主题切换要做对三件事跟随系统偏好、手动可切换、刷新后记得住。第三件事靠localStorage第一件事靠prefers-color-scheme媒体查询。最容易漏的是第四件事首屏闪白。如果主题判断放在脚本文件末尾页面会先按浅色渲染一帧再切成深色肉眼可见地闪一下。解法是在head里放一段内联脚本在 CSS 之前执行!-- 放在 head 内所有 CSS 之前 -- script (function () { var saved localStorage.getItem(theme); // light | dark | null var prefersDark window.matchMedia((prefers-color-scheme: dark)).matches; var theme saved || (prefersDark ? dark : light); document.documentElement.setAttribute(data-theme, theme); })(); /script这段脚本必须内联不能放到外部.js文件里因为外链脚本会阻塞或延迟等它执行时 CSS 已经把页面画出来了。内联脚本只有几行不影响首屏体积。切换按钮的逻辑放在common.js// 主题切换按钮读当前值、取反、写回 DOM 和 localStorage const themeBtn document.querySelector(.theme-toggle); if (themeBtn) { const sync () { const current document.documentElement.getAttribute(data-theme); themeBtn.textContent current dark ? ☀ : ☾; themeBtn.setAttribute(aria-label, current dark ? 切换到浅色 : 切换到深色); }; themeBtn.addEventListener(click, () { const current document.documentElement.getAttribute(data-theme); const next current dark ? light : dark; document.documentElement.setAttribute(data-theme, next); localStorage.setItem(theme, next); // 记住选择下次打开不闪 sync(); }); sync(); // 页面加载时同步一次按钮图标 }localStorage存的是用户显式选择系统偏好变化时不会覆盖它这是符合预期的行为用户手动选过就以用户为准。如果想做得更细可以监听matchMedia的change事件在用户没手动选过时跟随系统切换但对课设来说属于过度设计不做也罢。4.3 联系表单的前端校验与降级静态站没有后端表单最终得落到mailto:或者一个能接收提交的服务地址上。不管落到哪前端校验必须做因为答辩现场老师第一个动作就是空着提交点一下。// contact 页表单校验 const form document.querySelector(#contact-form); form?.addEventListener(submit, (e) { e.preventDefault(); // 阻断默认提交避免页面跳转刷新 const name form.name.value.trim(); const email form.email.value.trim(); const message form.message.value.trim(); const errors []; if (name.length 2) errors.push(请填写至少 2 个字的称呼); if (!/^[^\s][^\s]\.[^\s]$/.test(email)) errors.push(邮箱格式看起来不对); if (message.length 10) errors.push(留言至少写 10 个字); const tip document.querySelector(#form-tip); if (errors.length) { tip.textContent errors.join(); tip.className form-tip is-error; return; } // 校验通过这里换成真实提交动作演示阶段给个明确反馈即可 tip.textContent 已收到我会尽快回复。; tip.className form-tip is-success; form.reset(); });e.preventDefault()是必须的不写的话浏览器会带着?name...跳到下一张页面看起来像“提交成功了但什么也没发生”。邮箱正则是简化版只做基本格式判断不做 RFC 级别的完整校验——前端校验的目的是拦低级错误不是为了穷尽所有非法输入。提示区加aria-livepolite读屏软件能读到提示变化p idform-tip classform-tip rolestatus aria-livepolite/p如果要把表单真正接上mailto:是最省事的降级方案把action写成mailto:你的邮箱methodpost用户点提交会唤起本地邮件客户端。缺点是体验一般且用户没配邮件客户端时没反应。另一种做法是接一个表单接收服务填一个接口地址静态页直接 POST 过去。两种都可以答辩时说明为什么这么选就行。4.4 懒加载与回到顶部这类小功能的取舍图片懒加载用原生属性就够不用写 IntersectionObserverimg src./assets/img/works/works-01.webp alt作品一课程表应用 width640 height360 loadinglazy decodingasyncloadinglazy让浏览器在图片接近视口时才加载decodingasync让解码不阻塞主线程。首屏的封面图不要加lazy加了反而会拖慢首屏。回到顶部的按钮要处理滚动阈值和隐藏状态const topBtn document.querySelector(.back-to-top); window.addEventListener(scroll, () { const show window.scrollY 480; // 超过 480px 才出现 topBtn.hidden !show; }, { passive: true }); topBtn.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); // 平滑滚动 });{ passive: true }告诉浏览器这个监听器不会调用preventDefault滚动时不必等 JS 执行完手机上滚动手感明显更顺。behavior: smooth在系统开启了“减少动态效果”时会自动降级不需要额外判断。哪些功能该砍滚动视差、鼠标跟随光斑、进入视口时的复杂动画。这些在演示时很抓眼球但在低配机器上容易卡而且一旦某个动画在答辩现场掉帧老师的注意力就从“你做了什么”转到“为什么卡”。我的原则是交互只保留有明确用途的纯装饰的动效一律不做。5. 避坑与排查静态站最容易翻车的五个地方下面这五条是我在帮人看作业时反复见到的。每一条都按“现象、原因、解决”写遇到问题对着查就行。5.1 路径与资源类问题现象一本地打开一切正常换台电脑或者换个目录图片全部裂开CSS 完全不生效。原因通常有两层。第一层是大小写Windows 文件系统不区分大小写./Assets/Img/Avatar.png和./assets/img/avatar.png在你自己机器上都能找到文件但换到区分大小写的环境就是 404。第二层是相对路径基准./是相对当前 HTML 文件/是相对站点根目录本地双击打开时/会指向磁盘根直接失效。解决方法是两条硬规矩所有文件名用小写加短横线所有引用统一用./开头的相对路径。改完之后在编辑器里全局搜一遍href/和src/把开头的斜杠去掉。图片目录按页面分好assets/img/works/、assets/img/posts/别全堆一个文件夹里出问题时好定位。现象二中文文件名的图片在某个浏览器里不显示。中文名经过 URL 编码后是一长串%E4%BD%9C...某些环境下编码方式不一致就会 404。这个问题没有排查价值直接改成英文名最快。批量重命名可以用系统自带的批量改名或者任何带正则的编辑器改完记得同步更新 HTML 里的引用。5.2 运行时与交互类问题现象三双击打开博客列表页页面一片空白控制台报 CORS 或Failed to fetch。原因是file://协议下浏览器的安全策略会拦截fetch和XMLHttpRequest读取本地文件同时script typemodule也会被拦。这和代码写得好不好没关系是协议限制。解决有三条路按推荐顺序第一数据改成data.js用window全局变量就是我们第 4 章的做法双击就能跑第二本地起一个静态服务python -m http.server 8000然后访问http://localhost:8000第三如果坚持用fetch JSON必须在交付说明里写清楚“需要本地服务”并且提前确认验收老师的机器上能起服务——这一步风险太大我一般直接选第一条。现象四手机上页面能左右拖动字小得需要双指放大。原因通常是两个head里漏了 viewport 声明或者某个元素的实际宽度超过了视口。漏声明的话加上这一行就行meta nameviewport contentwidthdevice-width, initial-scale1如果加了还是溢出说明有元素撑破。排查办法是在控制台跑一段脚本把所有超宽元素标出来// 找出所有宽度超过视口的元素 [...document.querySelectorAll(*)].filter((el) { const r el.getBoundingClientRect(); return r.width document.documentElement.clientWidth 1; }).forEach((el) { el.style.outline 2px solid red; console.log(el, el.getBoundingClientRect().width); });最常见的是三处写死width: 1200px的容器、加了padding却没设box-sizing: border-box的卡片、宽度 100% 又加了横向margin的图片。改成max-width: 100%配合box-sizing基本能解决。现象五联系表单点了提交页面闪一下什么提示都没有。原因是没有e.preventDefault()表单走了浏览器默认提交页面刷新、输入清空用户以为什么都没发生。还有一种情况是加了preventDefault但没写成功提示用户同样不知道有没有提交成功。解法参考 4.3 那段代码先阻断默认行为再按校验结果给出明确文案提示区加rolestatus让读屏软件也能读到。5.3 交付与打包类问题现象六在老师电脑上打开字体变成宋体图标变成一个方框整体观感掉一档。原因是你引用了外网 CDN 的字体和图标库验收环境断网或者网络慢请求超时后静默回退。字体回退到系统默认宋体图标回退成一个空方块。解决办法是把所有外部依赖本地化。字体直接用系统字体栈中文用PingFang SC, Microsoft YaHei英文用system-ui视觉上完全够用还省了字体文件的体积。图标不要用图标库直接内联 SVG一个图标几行代码颜色还能跟着currentColor走改主题时自动适配!-- 内联 SVG 图标fill 用 currentColor 跟随文字颜色 -- svg classicon viewBox0 0 24 24 width20 height20 fillnone strokecurrentColor stroke-width2 aria-hiddentrue path dM4 6h16M4 12h16M4 18h16/ /svg打包前做三件事全局搜一遍http://和https://确认没有残留外链把assets目录整个过一遍删掉没引用的图和废弃的 CSS压缩成一个 zip解压后双击index.html走一遍五个页面。这个流程每次交付前都走花不了十分钟能挡掉绝大多数现场翻车。6. 验收与答辩用一份自检清单把作品讲清楚作品做完不等于能拿分答辩那十分钟的表达和交付前的自检同样重要。我一般让学生在提交前一晚做一张自检表逐项打勾打不了的当场修答辩时只讲三个技术点每个点按“我遇到了什么问题、为什么这么解、效果是什么”来说比从头念功能列表有效得多。6.1 提交前必走的自检项序号自检项通过标准常见不通过表现1双击打开五个页面全部能开无白屏依赖本地服务才能跑2图片完整全部图片显示无裂图路径大小写不一致3控制台干净无 404、无红色报错外链资源请求失败4断网可用关掉网络后刷新样式不塌引用了 CDN 字体/图标5手机视图375px 宽下无横向滚动某容器固定宽度6导航高亮当前页在导航里被标出全部页面都没有高亮7链接闭环每个 a 标签都能到达目标有 404 的死链8博客列表由数据渲染改数据即改页面六段手写 HTML9博客详情换 id 能打开不同文章只有一篇文章能看10主题切换切换后刷新仍保持刷新回浅色11表单校验空提交有提示不刷新提交后页面跳走12代码整洁缩进一致、无大段注释掉的代码半成品代码留在文件里第 12 项常被忽略但影响很直接。注释掉的代码、console.log、没用上的 CSS 类老师翻源码时一眼就能看到会让人觉得项目没收尾。6.2 答辩时怎么讲技术点三个点足够讲深比讲多好一是结构分层。说清楚你的 CSS 为什么拆三个文件、变量层起到什么作用、换配色为什么只改一个文件。可以现场演示把--color-brand的值改掉刷新全站主色跟着变。这个演示三十秒说服力比讲三分钟强。二是数据驱动。打开data.js新增一篇文章对象刷新列表页多一张卡片点进去详情页正常渲染。这一下就把“手写页面”和“会用数据组织内容”区分开了。三是踩过的坑。挑一个讲比如file://下fetch被拦所以改成了全局数据文件或者移动端溢出用脚本定位到是固定宽度容器。讲坑的时候把现象、排查过程、最终方案按顺序说老师听到的是排查思路不是背答案。从那以后我每次交付任何静态页面前都强制走一遍“断网 双击 缩到 375px”这三步——这三步能挡掉九成的现场事故剩下的才是内容本身。这套页面我按上面的目录结构整理成了一份可直接双击打开的静态包改文案、换配色、替换图片就能当成自己的作品用拿去做个人博客或者个人网站模板的底子都合适。希望帮到你。本文还有配套的精品资源点击获取