简介这是一份面向Web前端初学者的个人网页设计作业源码包采用HTMLCSSJavaScript实现涵盖个人主页、个人博客、轮播相册、魔方相册、视频主页、收藏、日志与图片展示等典型页面可帮助学习者系统练习多页面布局、交互事件绑定、DOM操作与CSS3动画等基础技能非常适合作为课程设计或毕业作品集的起步模板。压缩包共576个文件以213个JavaScript、167个HTML、75个CSS文件为核心另含SCSS预处理器源码、JPG/PNG图片、字体图标及音视频等辅助资源整体约23.32MB目录结构清晰便于按模块对照学习。该资源已有14668人浏览学习初学者可通过分析文件引用关系、调试轮播自动切换、魔方3D旋转等功能快速掌握前端三大核心技术的配合逻辑同时为后续学习React、Vue等框架奠定扎实基础。1. 用工程化思维做一份个人网页作业htmlcssjavascript 的最小完整方案一份“Web前端网页设计作业-个人网页”想要真正拿高分难点不在页面多华丽而在“老师或面试官一眼扫过去能不能看出你理解结构和交互”。很多人的作业是几个 div 套着无数 classCSS 一路堆到底JavaScript 从模板里复制来的却讲不清。换个角度看这份作业就是一次缩小的 Web 前端开发任务先定信息架构、再做视觉设计、最后实现交互和真实站点的差距只是规模。我写个人网页不会先开编辑器而是先在纸上拆模块我是谁、我会什么、我做过什么、怎么联系我。下面这套方案按从业者习惯来组织用 VSCode 写 htmlcssjs 时最不容易跑偏。2. HTML先搭信息架构再写语义化标签2.1 个人网页的信息模块怎么拆个人网页作业最常见的长页面结构是四块个人简介、技能清单、作品展示、联系信息。不要上来就写代码先给每个模块定一个标题和一句描述这样后面写section和h2时才有依据。我一般会把页面当成一个简历的网页版每个模块对应一个锚点链接导航栏就是模块清单。模块与模块之间要有层级而不是平铺五个h2就算完事。拆信息架构时还要注意“这个模块给谁看”。个人简介区是给访客建立第一印象的技能区要让人快速知道你熟练什么作品区要挑两三个最能说明问题的项目。作业里写什么都行但结构不能乱一个视觉正常却语义混乱的页面在可访问性和 SEO 上会同时失分这也是网页设计作业经常被忽略的隐藏评分点。2.2 文档骨架和 lang、doctype 的讲究VSCode 里输入英文感叹号生成的 HTML 骨架带一行!doctype html和html langzh-cn这两行不是模板的装饰品。doctype 的作用是让浏览器进入标准模式不写或写错会导致旧的怪异模式渲染盒模型计算都可能出现问题。langzh-cn告诉浏览器和搜索机器人这个页面是简体中文屏幕阅读器也会按中文发音规则朗读翻译插件能正确识别语言。!doctype htmlhtml langzh-cn之后依次是meta charset、meta nameviewport和title。字符编码必须是utf-8否则中文会显示成乱码viewport 设置widthdevice-width, initial-scale1是移动端布局的起点。个人网页的标题写成“个人主页 - 你的名字”比“无标题文档”专业得多浏览器标签页和搜索结果都会用到这个。2.3 语义化标签落位header、main、article 怎么用通篇使用div不代表作业错但用语义化标签能让结构在浏览器和辅助工具里更清晰。header放站点级导航main包住当前页面的主体内容section配h2表示一个内容块article用于独立成篇的作品条目footer放联系方式和版权。这些标签不是对 div 的替代而是对信息层级的补充。我给出一个可以直接作为作业底稿的 HTML 结构导航、简介、技能、作品、联系一次到位!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title个人主页 - 张一/title link relstylesheet hrefcss/style.css /head body header classsite-header a classsite-logo href#homeZhangYi/a nav classsite-nav aria-label主导航 ul lia href#about关于/a/li lia href#skills技能/a/li lia href#works作品/a/li lia href#contact联系/a/li /ul /nav /header main idhome section idabout classhero aria-labelledbyabout-title h1 idabout-title你好我是张一/h1 pWeb前端方向的学习者正在搭建自己的第一个完整页面。/p /section section idskills aria-labelledbyskills-title h2 idskills-title技能清单/h2 ul classskill-list liHTML 结构与语义化/li liCSS 布局与动效/li liJavaScript 基础交互/li /ul /section section idworks aria-labelledbyworks-title h2 idworks-title作品与练习/h2 article classwork-card h3个人网页作业/h3 p用原生 htmlcssjavascript 搭建的静态个人站点包含滚动高亮、返回顶部、暗色模式。/p /article /section /main footer idcontact address 联系我a hrefmailto:zhangyiexample.comzhangyiexample.com/a /address /footer /body /htmlaria-labelledby把section和对应的标题 id 关联起来屏幕阅读器读到这里会说“关于区域标题你好我是张一”而不是播报一串无意义的 div。ul用在导航和技能列表里比一连串p更符合列表语义。address只用于作者联系信息放在 footer 里正合适。2.4 语义标签与 div 写法对照如果你想判断自己的作业用没用对标签直接看语义标签和习惯性 div 写法的差别语义标签习惯性写法实际影响headerdiv classheader屏幕阅读器可快速定位站点导航navdiv classmenu辅助技术识别为导航地标maindiv classcontent支持无障碍“跳到主内容”articlediv classcard阅读器可识别为独立条目footerdiv classbottom页脚地标语义明确用表格里的对照检查你自己的页面能快速发现把article写成一堆嵌套div的问题。写完这步HTML 部分基本可以收住剩下的美化交给 CSS。3. CSS从三行模式开始把布局和美化拆开做3.1 三行模式的 CSS 文件先定变量、盒模型和字体栈不少人拿到网页模板第一件事是疯狂改颜色和边距最后得到一个自己都调不明白的 CSS 文件。我习惯用“三行模式”开 CSS 文件第一行声明设计变量第二行修正全局盒模型第三行设置基础字体和排版。这三行不是偷懒而是给后面所有样式的确定性。/* 第一行设计变量改主题只动这里 */ :root { --bg: #ffffff; --text: #222222; --primary: #2563eb; --border: rgba(0, 0, 0, 0.08); --radius: 12px; --max-width: 960px; } /* 第二行统一盒模型避免 padding 撑破布局 */ * { box-sizing: border-box; } /* 第三行基础字体与行高 */ body { margin: 0; font-family: system-ui, -apple-system, PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.7; color: var(--text); background: var(--bg); }第一行的:root是 CSS 自定义属性的挂载点后面所有颜色、圆角、最大宽度都可以用var(--primary)引用作业里想换主题色只需改一处。第二行*选择器选中所有元素并设置box-sizing: border-box这样padding和border不会把固定宽度撑破横向滚动条的一大半根源在这里被干掉。第三行是中文字体栈的常见写法system-ui优先使用系统字体PingFang SC适配 macOSMicrosoft YaHei兜底 Windows避免换来换去字体不一致。3.2 导航用 flex卡片墙用 grid两条主线的选择理由布局选型不需要纠结太久我一般按这个标准区分一维排列用 flex二维网格用 grid。导航栏从左到右排 logo 和菜单项是典型的一维场景flex 足够作品区需要上下左右都有多个卡片用 grid 自动换列更省心。.site-header { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-width); margin: 0 auto; padding: 1rem 1.25rem; } .works-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .skill-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }justify-content: space-between让 logo 靠左、导航靠右中间空隙自动分配align-items: center保证垂直居中。.works-grid里的repeat(auto-fit, minmax(280px, 1fr))是响应式的核心每列最小 280px屏幕够宽就多放几列不够就自动降为单列全程不需要手写媒体查询。flex-wrap: wrap配合gap让技能列表在小屏时折行每一项之间的间距一致网页设计作业的美化大部分靠这种间距控制。3.3 鼠标移入事件其实是 :hover配上 transition 才不突兀热词里经常出现“css 鼠标移入事件”这个说法的正解是:hover伪类它属于 CSS 而不是 JavaScript。很多作业里鼠标移到卡片上会瞬间跳变是因为只写了:hover没写transition。两者结合才是平滑的悬浮效果.work-card { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .work-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); border-color: var(--primary); }:hover触发时卡片向上移动 4px 并加深阴影transition让位移、阴影、边框色的变化在 0.25 秒内完成。参数值得细看transform用 GPU 加速比改top/left性能好阴影消散稍有延迟视觉更柔和。注意:hover是鼠标专属触摸屏没有悬浮概念所以关键操作不能只放在 hover 上页面里的链接和按钮要能通过键盘聚焦。这时需要:focus-visible.work-card:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }:focus-within会命中“内部有元素获得焦点”的卡片键盘用户按 Tab 进入作品链接时能清晰看到焦点框这是网页设计作业里容易加分但很少有人做的细节。3.4 常用伪类选择器速查与性能提醒CSS 伪类选择器很多作业阶段掌握下表这一组就够用选择器作用使用场景:hover鼠标悬停时命中卡片上浮、链接变色:focus-visible键盘聚焦且可视时命中输入框和链接焦点环:nth-child(odd/even)按序号命中子元素列表隔行变色:not(selector)排除指定元素最后一行的元素不加边框:focus-within元素内部有聚焦项时命中卡片整体高亮用:nth-child做列表斑马纹时HTML 里的子节点必须是同一类型混入注释或文本节点会影响计数规则。:not()的传参越简单越好复杂选择器会降低可读性。CSS 动画这类美化手段要克制作业页面里两三个动画就够全页面漂浮的效果反而让人抓不住重点。优先级方面少用!important多用类选择器控制权重否则后续想覆盖样式时会越改越乱。4. JavaScript把静态页变成可交互的个人站点4.1 脚本放在哪里执行为什么等 DOMContentLoaded个人网页到了 JavaScript 这一步核心不是写过多少特效而是代码在正确时间运行。脚本在 body 底部或用defer属性加载都能保证 DOM 已经解析完但defer的语义更明确且不阻塞 CSS 和 HTML 解析script srcjs/main.js defer/scriptdefer告诉浏览器脚本会在文档解析完成后执行多个defer脚本会按顺序执行。如果你仍习惯把script放 body 末尾逻辑上没有大问题只是defer对“脚本与 DOM 位置无关”这个事实表达得更清楚。为了防止直接访问不存在的节点导致 JavaScript 运行时报错习惯性在入口先包裹一层document.addEventListener(DOMContentLoaded, () { // 初始化和事件绑定都写在这里 });这段代码会在 DOM 树构建完成后触发即使脚本因为历史原因被放在 head 里也不会拿不到节点。VSCode 写代码时容易忽视这类细节但浏览器控制台一旦出现“Cannot read properties of null”第一件事就是检查脚本执行顺序。4.2 滚动高亮与平滑滚动用 IntersectionObserver 而不是硬算个人网页的导航高亮有一种常见实现监听scroll事件每次滚动时获取每个模块的位置再判断当前应该高亮哪一项。这种写法能跑但滚动事件触发频率高每次都读取布局信息容易造成卡顿。我更喜欢用 IntersectionObserver 监听模块与视口的交叉状态const sections document.querySelectorAll(main section[id]); const navLinks document.querySelectorAll(.site-nav a); const observer new IntersectionObserver( (entries) { entries.forEach((entry) { if (entry.isIntersecting) { const currentId entry.target.id; navLinks.forEach((link) { link.classList.toggle( active, link.getAttribute(href) #${currentId} ); }); } }); }, { rootMargin: -20% 0px -70% 0px } ); sections.forEach((section) observer.observe(section));rootMargin: -20% 0px -70% 0px把监听区域压缩成一个靠近页面顶部的横条模块滚动到这个范围内才触发高亮避免连续切换。classList.toggle(className, boolean)的第二个参数是布尔值true 加类、false 去类比手写 if/else 简洁。锚点跳转的平滑效果用 CSS 一行完成html { scroll-behavior: smooth; }设置了scroll-behavior后点击#about这类锚点链接会平滑滚动过去不需要 JavaScript 干预。这个方案好在逻辑集中滚动高亮交给观察器平滑滚动交给 CSS出了错也容易定位。4.3 打字机效果一个函数讲清定时器与递归网页设计作业里常见“打字机”输入效果其实就是定时把字符串逐字写入元素。最简单的写法如下function typeWriter(element, text, speed 100) { let index 0; const timer setInterval(() { element.textContent text.slice(0, index 1); index 1; if (index text.length) { clearInterval(timer); } }, speed); } typeWriter(document.querySelector(.hero-title), 你好我是张一);text.slice(0, index 1)每次取前缀字符串index递增直到长度耗尽clearInterval(timer)停止计时器。如果忘记清理定时器函数结束后回调会继续执行虽然这里 no-op但在复杂页面里可能造成内存浪费。更可控的写法是把定时器换成递归的setTimeoutfunction typeWriter(element, text, index 0, speed 100) { if (index text.length) { return; } element.textContent text.slice(0, index); setTimeout(() typeWriter(element, text, index 1, speed), speed); }递归版本不需要清理定时器每执行一次就在栈上安排下一次但要注意多次调用时用clearTimeout取消上一次的句柄避免两个打字机同时写入打架。无论哪个版本参数speed都需要试手感100 毫秒适中作业演示时 80 毫秒更有节奏感。4.4 暗色模式与表单校验两个常见但容易出错的交互暗色模式是个人网页里效果立竿见影的交互很多作业做了一半就不小心把样式改乱了根本原因是颜色写死在组件里。配合第 3 章的 CSS 变量暗色切换只需要给html加一个类覆盖变量值即可const root document.documentElement; const toggleButton document.querySelector(#theme-toggle); toggleButton.addEventListener(click, () { const isDark root.classList.toggle(dark); localStorage.setItem(theme, isDark ? dark : light); }); root.classList.toggle(dark, localStorage.getItem(theme) dark);classList.toggle(dark)的返回值是布尔值正好表示当前是否处于暗色模式localStorage.setItem(theme, ...)把选择持久化下次打开页面仍是上次的状态。CSS 一侧只需这样覆盖html.dark { --bg: #121212; --text: #e5e5e5; --border: rgba(255, 255, 255, 0.1); }因为所有组件都引用var(--bg)和var(--text)改变量就等于全站换肤。需要提醒的是页面刷新时脚本较晚执行暗色模式可能闪一下白再变黑。常见做法是把这个恢复逻辑单独写成一个小脚本放在 head 里三行代码script if (localStorage.getItem(theme) dark) { document.documentElement.classList.add(dark); } /script表单校验放在作业里可以体现基本逻辑能力。前端校验只做体验服务端仍然要校验。下面这段检查“邮箱是否为空且格式是否正确”const form document.querySelector(#contact-form); form.addEventListener(submit, (event) { event.preventDefault(); const email form.querySelector(#email); const emailPattern /^[^\s][^\s]\.[^\s]$/; if (!email.value.trim() || !emailPattern.test(email.value)) { const error form.querySelector(.error-message); error.textContent 请输入有效的邮箱地址; email.focus(); return; } form.submit(); });event.preventDefault()阻止浏览器默认提交先做校验正则里的[^\s]表示“一个或多个既不是空白也不是 的字符”这个 pattern 只覆盖基础格式但作业演示已经足够。email.focus()让用户出错后直接回到输入框交互比只弹一行提示更完整。5. 一键返回顶部与提交前验证个人网页作业最后的10分钟5.1 用 requestAnimationFrame 手写平滑返回顶部长页面里“一键返回顶部”是高频交互网上模板多用scrollTo({ top: 0, behavior: smooth })浏览器兼容性好但有短板无法自定义时间和缓动手感。我习惯用requestAnimationFrame手动控制代码不长而且能讲清楚原理const backTopBtn document.querySelector(#back-top); function scrollToTop() { const startY window.scrollY; const duration 300; const startTime performance.now(); function step(now) { const progress Math.min((now - startTime) / duration, 1); const easeOutCubic 1 - Math.pow(1 - progress, 3); window.scrollTo(0, startY * (1 - easeOutCubic)); if (progress 1) { requestAnimationFrame(step); } } requestAnimationFrame(step); } backTopBtn.addEventListener(click, scrollToTop);performance.now()返回毫秒级时间戳progress被限制在 0 到 1 之间超过 duration 后不再继续。easeOutCubic是先快后慢的缓动曲线视觉上比线性滚动自然。400ms 以上会显得拖沓300ms 是点击按钮后不觉得太急的手感。按钮显示时机可以用一个 pure 的滚动监听控制window.addEventListener( scroll, () { backTopBtn.hidden window.scrollY window.innerHeight; }, { passive: true } );hidden属性由浏览器原生支持不需要维护 classpassive: true告诉浏览器不阻止默认滚动行为避免滚动性能损耗。5.2 提交前的三个快速检查交作业前花 10 分钟做三个检查比什么都稳。第一步用 VSCode 的 Live Server 或直接在浏览器里打开 html 文件打开 DevTools 的 Console 面板红色报错必须清零特别是“Uncaught TypeError”。第二步DevTools 里把视口切到 320px 宽度左右来回拖动出现横向滚动条就先查图片是否设置了max-width: 100%再查site-header是否用flex-wrap或合理padding控制。第三步打开 Network 面板刷新一次找到返回 404 的文件请求常见原因是css/style.css的斜杠路径写错。验证时如果碰到横向滚动条先给img、pre这类可能溢出的元素补上max-width: 100%大多数个人网页作业的布局问题都出在这一句上。本文还有配套的精品资源点击获取