HTML+CSS+JS综合项目实战：从零搭建个人作品集网页

简介这份压缩包是面向网页开发初学者的 HTML 综合实战训练材料围绕多个完整网页实例帮助学习者从零搭建页面结构、熟悉常用标签与资源组织方式。包内共含12个文件主要为 3 个 html 页面文件和 9 张 jpg 图片素材整体体积约 1.2MB轻量便于直接打开练习。其中 index.html 作为主入口展示基础框架覆盖标题、meta、链接、段落、图像等核心元素index2.html 与 index3.html 进一步扩展了布局、表格、列表、表单及按钮、输入框等交互元素图片素材涵盖案例效果图、banner、logo、CSS/JS 截图等可在练习时对照视觉设计。通过该实战可同时了解 CSS 内联样式、内部或外部样式表对颜色、字体、尺寸和位置的控制并学会合理管理 img 目录下的图片资源以优化页面加载。资源已有 565 人学习适合需要快速上手 HTML 并完成入门级综合项目的学生或自学者。 做前端的人应该都经历过这种阶段单个 HTML 标签都认识CSS 属性也能背几条可一旦要独立完成一个 html网页综合项目实战脑子里的知识就全乱成一锅粥。这个状态我太熟了。今天这篇就来把这件事拆开讲清楚用一个完整的个人作品集页面作为例子带你走一遍 HTML、CSS、JS 基础语法是怎么落到一个能打开、能交互、能真正拿给别人看的网页上的也帮准备做网页制作练习的新手提供一个可以直接照着抄的模板。这个项目适合谁刚学完 HTML 基础、CSS 基础、JavaScript 入门但没写过完整页面的人也适合在学校要做网页设计作业的同学。整个项目不依赖框架不依赖脚手架一个编辑器加一个浏览器就能做完核心目的只有一个让你把碎片知识拼成完整的实战能力。1. 项目的整体设计与想法1.1 为什么做个人作品集页面综合项目实战最容易犯的毛病是贪大。我见过很多新手上来就想做淘宝首页、京东首页结果写了两天就崩溃连导航下拉菜单都搞不定。个人页面最大的好处是克制信息量适中不足以让人失控又足够覆盖入门阶段必须掌握的核心模块。我的建议是做一个个人作品集首页。这个页面看起来简单但它能覆盖这些知识点HTML 常用文本标签标题、段落、列表、强调。表格标签用来展示技能熟练度或项目清单。表单标签做一个联系我表单处理输入和提交。图片位置控制头像、项目截图怎么摆放怎么居中。CSS 布局用 Flex 或 Grid 做导航栏、卡片栅格。JavaScript 交互平滑滚动、返回顶部、按钮状态反馈。一套走下来你基本能把 HTML、CSS、JS 三大块串成一条线。页面做完以后你也不是只会写标签堆砌而是对结构、表现、行为这三层有了体感。1.2 目录结构与技术选型我在正式动手前先定好文件目录。很多新手喜欢把 CSS 直接写在 HTML 文件里JS 也塞到 body 末尾这样做小练习没问题但综合项目我建议从一开始就分文件。html-web-project/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── images/ └── avatar.jpg选型上我坚持用纯 HTML CSS JS不用 Bootstrap不用 Tailwind也不用任何前端框架。原因很直白这一阶段的目的是把基础语法吃透。框架负责帮你解决布局和交互但也容易让你跳过为什么这样写的思考。目录分隔的意义在后期会特别明显。比如样式文件越来越大你要改动某个模块时打开 style.css 全局搜索选择器就够了不需要在一堆 HTML 里翻来翻去。JS 单独放文件还能顺便养成行为层跟结构层分离的前端工程习惯。2. 页面基础骨架与核心标签细节2.1 头部信息与DOCTYPE一个网页最早让人忽视却最容易出错的地方就是!doctype html这一行。它不是一个普通注释它的作用是告诉浏览器请用标准模式解析页面。少了这一行IE 时代的怪癖模式会让你的 CSS 渲染结果完全不可控。现在虽然浏览器差异小了很多但这一行仍然应该成为肌肉记忆。我一般会把页面基础骨架直接保存成一个模板片段每次新建项目就从这段开始写!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content个人作品集页面展示项目与技能 title我的个人作品集/title link relstylesheet hrefcss/style.css /head body !-- 页面内容 -- script srcjs/main.js/script /body /html有两个细节我吃了不少亏。第一个是langzh-cn它影响屏幕阅读器的发音和搜索引擎对页面语言的判断纯英文页面写成en中文页面写zh-cn不要不管不顾。第二个是meta charsetutf-8如果漏掉或放到 title 后面中文内容在某些环境下会显示成乱码。viewport标签对移动端适配很关键没有它手机浏览器会按 980px 宽度渲染页面你做出来的响应式就会直接失效。2.2 语义化标签与页面整体结构早期写 HTML 时我习惯全部用div堆结构后来被同事喷过一回才改过来。语义化标签的价值不是花架子而是让页面结构读起来有主次。举个例子个人作品集首页我通常会这样搭骨架header nav导航栏/nav /header main section idabout关于我/section section idskills技能表格/section section idprojects项目卡片/section section idcontact联系表单/section /main footer页脚/footerheader表示页面头部nav表示导航区域main代表页面主体内容section是独立的内容分区。这样的结构对搜索引擎更友好同时也方便你用 CSS 选择器做模块化样式管理。还有一个实际收益屏幕阅读器用户可以借助这些标签快速跳转这也是容易被新手忽略的体验细节。不要一上来就想着炫技。先把结构理清楚再考虑外观。综合项目里很多时候页面看着乱不是样式问题而是结构层级没有规划好。3. 关键模块的实操过程与实现3.1 导航栏与首屏Banner导航栏是每个页面都绕不开的模块。我的做法是先用无序列表写导航项再做横向布局nav classnavbar div classlogoMy Site/div ul classnav-links lia href#about关于/a/li lia href#skills技能/a/li lia href#projects项目/a/li lia href#contact联系/a/li /ul /nav对应 CSS 里最核心的一行是display: flex。Flex 布局是目前做导航栏最稳妥的方案不需要用浮动也基本不用再去清浮动.navbar { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: rgba(255, 255, 255, 0.95); z-index: 999; } .nav-links { display: flex; gap: 24px; list-style: none; }position: sticky是导航吸顶的常用方式。它跟fixed最大的区别是sticky 元素依然占据文档流位置不会导致页面顶部内容被遮挡这一点在实际使用中特别实用。rgba背景加一点半透明页面滚动时能看到后面的内容隐约透过来视觉上比纯白背景舒服。首屏 Banner 我一般放一句话和一张背景图。背景图如果直接放在div里可以用background-size: cover让图片铺满容器。如果希望图片不裁剪、只显示一部分就可以用contain。这两个值的取舍取决于你要的是填满还是完整展示。3.2 图片位置控制与技能表格热搜里频繁出现html如何改变图片位置我猜很多新手是在图片存储路径和居中问题上卡住了。先说居中。图片要水平居中最简单的方式是给父容器加text-align: center如果同时要垂直居中Flex 是最好的方案.image-wrapper { display: flex; justify-content: center; align-items: center; height: 200px; }头像这类固定尺寸图片我还会加一句object-fit: cover。它的作用是把图片按容器比例裁剪填满避免图片被强行拉伸变形。cover是裁剪多余部分contain是保持完整但不保证填满二选一要看需求。技能展示用表格很自然也是练习表格标签的好机会。一张简单的技能表table classskill-table thead tr th技能方向/th th熟练度/th /tr /thead tbody trtdHTML 语义化/tdtd熟练/td/tr trtdCSS 布局/tdtd熟练/td/tr trtdJavaScript 基础/tdtd掌握中/td/tr /tbody /table表格样式上记住三件事border-collapse: collapse合并相邻边框padding控制单元格内边距nth-child做隔行变色。隔行变色需要给tbody tr加样式.skill-table { width: 100%; border-collapse: collapse; } .skill-table th, .skill-table td { border: 1px solid #ddd; padding: 10px 16px; text-align: left; } .skill-table tbody tr:nth-child(odd) { background: #f7f7f7; }这里有个容易踩的细节我用nth-child(odd)而不是nth-child(1)一行行写是因为当表格内容是从数据库或 JS 动态渲染时奇数行和偶数行会自动保持交替效果不需要额外改 HTML。3.3 联系表单与JavaScript交互表单是综合项目的交互担当。我做的联系表单通常包含姓名、邮箱、留言三个字段form idcontact-form label forname姓名/label input typetext idname namename required label foremail邮箱/label input typeemail idemail nameemail required label formessage留言/label textarea idmessage namemessage rows5 required/textarea button typesubmit发送/button /form纯前端项目里没有后端提交表单会触发页面刷新或跳转演示效果会很突兀。我的做法是在 JS 里拦截默认提交行为做一个简单的提交成功提示const form document.getElementById(contact-form); form.addEventListener(submit, function (event) { event.preventDefault(); const name document.getElementById(name).value.trim(); const email document.getElementById(email).value.trim(); if (!name || !email) { alert(请填写姓名和邮箱); return; } alert(提交成功我会尽快回复你); form.reset(); });event.preventDefault()是这里的关键它的意思是阻止浏览器默认行为。很多新手会忘记这一步导致每次点提交页面就刷新。required属性虽然能在浏览器层面拦一下空字段但我在 JS 里依然做了一次校验这样即使以后自定义按钮触发提交逻辑依然可靠。返回顶部按钮也是这个项目里建议加入的交互。最基础的方法是const backToTop document.getElementById(back-to-top); window.addEventListener(scroll, function () { if (window.scrollY 300) { backToTop.style.display block; } else { backToTop.style.display none; } }); backToTop.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); });window.scrollY用来读取当前页面滚动了多少像素。大于 300 时显示按钮小于 300 时隐藏避免页面还没怎么滚就弹出一个按钮。scrollTo配合behavior: smooth可以实现平滑滚动这个参数是现代浏览器提供的比早年用animate写一长串 JS 简单太多。如果你想在页面里加一点有人气的效果可以尝试用 CSS 写一个 3D 旋转卡片组件核心属性是transform-style: preserve-3d和rotateY。这个不难但演示起来非常出效果适合放在作品集的项目展示区。4. 常见问题与排查技巧实录4.1 双击HTML文件无法正常预览怎么办HTML文件无法预览是热搜词里的高危问题我当年也在这上面浪费过时间。最常见的情况是双击index.html后浏览器打开了但页面全白或者样式、图片全丢。全白通常是 JS 报错阻塞了渲染按 F12 打开开发者工具切到 Console 面板看红色报错信息。样式和图片全丢多半是路径问题。在本地双击打开时CSS 如果写的地址是/css/style.css这种根路径开头浏览器会把/解析成磁盘根目录自然找不到。本地项目路径中./、../、/的区别一定要心里有数./表示当前目录../表示上一级目录/一般留给线上环境或服务器根目录。另一个隐蔽的问题是用记事本编辑文件后保存为 UTF-8 带 BOM 格式页面可能显示乱码或出现空白字符。建议使用 VS Code 这类编辑器右下角能直接看到编码格式统一设置成 UTF-8 就好。4.2 样式不生效、图片不显示的经典原因样式不生效我排查顺序一般是路径、缓存、选择器、语法。路径问题刚才说过。缓存问题也很常见尤其是改完 CSS 后刷新页面看到的还是旧样式。快捷键Ctrl F5强制刷新可以解决大部分缓存问题。选择器问题比如.nav-links li a和.nav-links li a不一样前者会选中所有后代后者只选中直接子元素如果层级写错样式就静默失效。语法问题则要靠开发工具里的 Elements 面板选中目标元素后看 Styles 区域是否有黄色感叹号或红色删除线。图片不显示最常见的原因是图片文件不在images目录里或者文件名大小写对不上。在 Linux 服务器上Avatar.jpg和avatar.jpg是两个完全不同的文件本地 Windows 不区分大小写可能看着没问题一部署到线上就挂。所以项目里图片命名我习惯统一用小写加短横线例如project-cover.jpg。4.3 表单与脚本交互的坑表单交互最大的坑就是没有阻止默认提交这个前面已经讲过。另一个坑是label的for属性必须和input的id一致否则点击文字不会聚焦到输入框。设计细节上按钮类型如果是button默认不会触发表单提交想提交就要写成submit这也是新手经常搞混的。脚本交互的另一个高频问题是script标签放的位置。如果 JS 放在head里并且在document.getElementById时页面还没加载到对应元素就会报null错误。最简单的办法是把script放到body结束前或者用DOMContentLoaded事件包裹逻辑document.addEventListener(DOMContentLoaded, function () { // 在这里操作DOM });调试 JS 时不要只会用alert学会使用console.log输出中间变量再用debugger断点逐步排查效率会高很多。遇到样式不更新的问题除缓存外也要检查是不是写了相同的类名导致选择器优先级互相打架。CSS 的优先级规则id class 标签内联样式最高!important会打破正常规则能不用就不用。5. 项目收尾从能跑到能用5.1 把页面做得更完整的小细节一个综合项目做到这里已经能跑起来了但距离像样还差几个收尾细节。第一是给页面加一个内边距和最大宽度限制内容宽度建议控制在1000px到1200px这样在大屏上不会一条线拉到整个屏幕观感好很多。第二是给所有可点击元素加上:hover样式哪怕是简单的颜色变化交互感也会立刻不同。第三是给区块加上滚动时的锚点偏移因为导航栏 fixed 或 sticky 会让标题被遮住可以用scroll-margin-top解决section { scroll-margin-top: 70px; }另一个让我前期很受益的习惯是把注释写清比如 导航栏、关于模块、返回顶部按钮。你回头改代码时很长时间都靠这些注释快速定位尤其是项目文件多起来以后。5.2 后续还能往哪几个方向扩展这个项目做完以后如果你想继续练手有几个方向我觉得性价比很高。一是把页面内容做成可以切换主题的深浅色模式锻炼 CSS 变量的使用能力。二是用原生 JS 实现一个简单的图片懒加载提升页面性能的感知。三是把项目卡片区域改成 CSS Grid 栅格布局理解 Grid 和 Flex 的适用场景差异。如果你以后接触 Python 桌面开发可以用 PyQt5 的QTextBrowser或QWebEngineView显示 HTML 内容做本地小工具时会很实用。想把页面内容整理成文档也可以利用 Pandoc 把 HTML 转成 Markdown但那只适合结构简单的页面复杂样式转换后基本都要手动调整。还有人想把表格数据导出成 WPS 表格支持的 CSV 文件这只要用 JS 把表格内容拼接成 CSV 文本就能实现也算是一个不错的延伸练习。我自己的经验是做完这个综合项目后不要急着立刻开始下一个大项目。先把页面重新读一遍问自己三个问题HTML 结构能不能更语义化CSS 里的重复代码能不能抽成公共类JS 的交互逻辑有没有明显可以简化成函数的地方。我每次重构自己写的页面都能发现至少三处可以优化的点这种挑自己毛病的过程比不断做新页面更能提升基础能力。最后分享一个我一直在用的办法写代码之前先在纸上画出页面的结构草图标清楚哪个区域是头部哪个区域是内容区内容区里要放哪些模块。草图不需要好看能看明白就行。这个习惯能帮你避免写着写着忽然发现某个模块漏掉了也能让你在真正动键盘之前心里先有一张清晰的地图。本文还有配套的精品资源点击获取