简介这套「HTML网页综合项目实战」面向HTML零基础到初级前端学习者用多个可运行的页面实例串联标签语法、页面结构与样式控制帮助读者从看懂代码过渡到独立完成一个结构完整、视觉统一的静态网页项目。压缩包共12个文件以9张jpg案例效果图与素材图、3个html页面为主整体约1.2MB体积轻便便于在本地逐页对照练习也适合课堂演示或课后作业复用。已有567人学习下载。内容覆盖标题与元信息设置、链接段落图像插入以及表格、列表、表单、按钮输入框等常用元素的组织方式读者可借效果图复现布局练习img目录下的图像路径引用与资源管理并通过内联、内部或外部样式表调整颜色、字体、尺寸和位置理解结构与表现分离的基本思路。完成后能积累一套可改可扩的页面模板为后续CSS布局和响应式设计打底。1. 从一堆标签到能上线的站点html网页综合项目实战到底练什么很多人学 HTML 的路径是这样的标签能默写单页能拼出来一到 html网页综合项目实战 就卡住——导航在每个页面各抄一遍改一处要改五处样式越加越乱删一行不知道会塌哪里。综合项目练的不是标签记忆而是把语义结构、响应式布局、表单校验、资源与性能串成一条能交付的链路。它解决的是「页面能看但不能用、能用但改不动」的中间地带。适合已经会写单个页面、想往完整站点推一步的人也适合带新人的工程师拿它当验收清单。下面这套做法是我带过几轮之后沉淀下来的骨架照着走能少返工两次。2. 项目骨架怎么定页面地图、语义骨架与目录约定综合项目最容易翻车的地方不在写标签而在开工前没定骨架。等到第五个页面开始复制粘贴时才发现导航结构不一致、类名各写各的、图片散落在三个目录里这时候重构的成本比从零写一遍还高。所以我会先把页面地图、语义骨架、目录约定这三件事钉死再动手写第一行 HTML。这三件事加起来大概半小时但能省掉后面至少两个晚上的返工。2.1 五个页面的地图怎么画首页、列表、详情、表单、关于页面数量定在五个是有讲究的。少于四个练不到模板复用和导航状态多于六个一个人做不完最后往往烂尾在后半程。我给综合项目的标准配置是首页做信息聚合列表页做重复结构渲染详情页做长内容与侧栏表单页做校验与反馈关于页做静态内容排版。先画一张表把每个页面的角色、必备模块、出口写清楚。这张表就是后面的开发清单也是验收时的对照物。文件页面角色必须具备的模块主要出口index.html首页首屏横幅、推荐卡片组、订阅入口列表页、详情页list.html列表页筛选条、卡片网格、分页详情页detail.html详情页面包屑、主内容、侧栏推荐列表页、表单页form.html表单页分组表单、校验提示、提交反馈详情页about.html关于页图文混排、时间线、联系信息首页导航路径也要一起定通常三条全局导航每页顶部一致、面包屑详情页回列表、页脚导航辅助入口。三条路径定完页与页之间的关系就闭合了不会出现「点进去出不来」的孤岛页面。做综合项目时孤岛页面是最常见的结构性问题验收时一眼就能看出来。2.2 语义骨架落地header/main/article/footer 各管什么有了地图接下来写一份所有页面共用的骨架。这份骨架只写一次后面每个页面复制过去改内容区结构就不会跑偏。!DOCTYPE html html langzh-CN head meta charsetutf-8 !-- 移动端必须写否则窄屏会按 980px 缩放媒体查询全部失效 -- meta nameviewport contentwidthdevice-width, initial-scale1 title产品列表 · 站点名/title meta namedescription content一句话说清本页内容控制在 80 字以内 link relstylesheet href./assets/css/base.css link relstylesheet href./assets/css/layout.css /head body !-- 键盘用户第一个 Tab 就能跳过导航直达正文 -- a classskip-link href#main跳到主要内容/a header classsite-header nav classnav aria-label主导航 a classnav__brand href./index.html站点名/a button classnav__toggle typebutton aria-expandedfalse aria-controlsnav-list菜单/button ul classnav__list idnav-list lia href./index.html aria-currentpage首页/a/li lia href./list.html列表/a/li lia href./form.html表单/a/li lia href./about.html关于/a/li /ul /nav /header main idmain nav classbreadcrumb aria-label面包屑 ol lia href./index.html首页/a/li li aria-currentpage列表/li /ol /nav article classcontent!-- 页面主体 --/article /main footer classsite-footer p© 站点名/p /footer !-- defer不阻塞解析DOM 就绪后按顺序执行 -- script src./assets/js/main.js defer/script /body /html几个参数值得单独说。langzh-CN决定屏幕阅读器的发音和浏览器断词规则写错会导致中文被按英文读。aria-currentpage标出当前页视觉上再加一条下划线导航状态就统一了不用每页手动加 class。main全页只能有一个它是屏幕阅读器跳读的锚点写成多个等于把锚点废掉。defer比把脚本放到底部更好读也不会阻塞首屏。skip-link这个类很多人省掉但它是成本最低的可访问性改进默认用绝对定位移到视口外:focus时移回来。.skip-link{ position: absolute; left: -9999px; top: 0; background: #fff; padding: 8px 16px; z-index: 100; } .skip-link:focus{ left: 8px; }2.3 目录与命名约定assets 下四类资源怎么分综合项目的目录一旦超过三层找文件就开始靠记忆这属于典型的自找麻烦。我固定的结构是这样mkdir -p site/assets/{css,js,img,fonts} cd site touch index.html list.html detail.html form.html about.html touch assets/css/base.css assets/css/layout.css assets/css/components.css touch assets/js/main.js assets/js/form.js对应关系是base.css放重置和变量layout.css放页面级栅格与容器components.css放按钮、卡片、表单控件这类可复用单元。三个文件按加载顺序引入后面的能覆盖前面的改动时目标很明确。命名规则三条写进项目说明里让协作的人照做全小写加连字符不用中文和空格空格在 URL 里会被编码成%20本地能开线上 404图片按用途加前缀card-、banner-、icon-页面多起来之后统一收进pages/根目录只留入口文件。类名我用「块-元素-修饰符」的轻量版本.card、.card__title、.card--featured。不追求严格规范只要求同一类东西只有一个名字。综合项目里最常见的类名问题不是不规范而是同一个东西有三套叫法list、item-list、list-wrap各写一遍最后谁也不敢删。3. 布局落地从三个断点到图片占位的三层写法布局这一章的核心判断只有一个先定断点再定容器最后才是组件。顺序反了就会出现「每个组件里都写一遍媒体查询」的局面改一个间距要翻五个文件。我的做法是把间距、最大宽度、主色这类跨页面的值全部提到 CSS 变量里断点只改变量组件一律读变量。3.1 移动优先的三个断点320/768/1200 怎么定断点不是越多越好。综合项目里我固定三档默认样式服务 320px 起的窄屏768px切平板1200px切桌面。理由很实际——这三个值覆盖了绝大多数设备的布局分界而且三档刚好对应「单列、双列、三列」三种栅格形态再细就是给自己找事。写法一律用min-width这就是所谓的移动优先。好处是基础样式永远是最简单的单列窄屏不用写任何覆盖规则。:root{ --gutter: 16px; /* 页面左右留白 */ --max-width: 1200px; /* 内容区最大宽度 */ --gap: 16px; /* 卡片间距 */ --brand: #1f6feb; } /* 平板只改变量组件不用动 */ media (min-width: 768px){ :root{ --gutter: 24px; --gap: 20px; } } /* 桌面继续放大留白避免内容贴边 */ media (min-width: 1200px){ :root{ --gutter: 32px; --gap: 24px; } } .wrap{ width: 100%; max-width: var(--max-width); margin-inline: auto; /* 水平居中不写 margin:0 auto 也不会被覆盖 */ padding-inline: var(--gutter); }margin-inline和padding-inline是逻辑属性在从左到右的文档里等价于左右但语义更清楚也不会和上下间距的简写打架。这类小选择在综合项目里积少成多最后决定了改样式时是「改一行」还是「试半天」。还有一点max-width加margin-inline:auto的组合比width:1200px安全得多。后者在 1024px 的屏幕上会直接撑出横向滚动条这是新手最常踩的坑之一。3.2 导航与卡片Flex 与 Grid 各用在哪一层一句话分工一维排列用 Flex二维网格用 Grid。导航是一维一行元素卡片区是二维多行多列所以两者不该用同一套写法。.site-header{ position: sticky; /* 吸顶注意祖先不能有 overflow:hidden */ top: 0; z-index: 10; background: #fff; border-bottom: 1px solid #e5e7eb; } .nav{ display: flex; align-items: center; gap: var(--gap); min-height: 56px; } /* 主导航推到右侧品牌名自然留在左边 */ .nav__list{ display: flex; gap: 20px; margin-inline-start: auto; list-style: none; padding: 0; } /* 卡片区自动填充屏幕多宽就排多少列 */ .cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }auto-fill和minmax(240px, 1fr)这个组合值得记住容器宽度除以 240 能排几列就排几列每列再均分剩余空间。它替代了以往「写三个媒体查询改列数」的做法一套规则从手机管到宽屏。这里是auto-fill而不是auto-fit——两者在卡片数量少于列数时表现不同auto-fit会把空轨道塌掉导致卡片被拉宽列表页用auto-fill更稳。sticky生效有个前提从元素到滚动容器之间的所有祖先都不能有overflow: hidden或overflow: auto。这条我后面还会在避坑章里展开因为它属于那种「代码看着完全没问题但就是不生效」的玄学问题。3.3 图片占位与 srcset把 CLS 摁在 0.1 以内图片是综合项目里最容易拖垮体验的一环。两个指标最直观加载慢、加载完页面跳。前者靠尺寸和格式后者靠宽高占位。figure classcard__media img src./assets/img/card-480.jpg srcset./assets/img/card-480.jpg 480w, ./assets/img/card-800.jpg 800w, ./assets/img/card-1200.jpg 1200w sizes(min-width: 1200px) 360px, (min-width: 768px) 45vw, 92vw width1200 height800 loadinglazy decodingasync alt产品包装正面图 /figure逐项解释。srcset列出三档宽度的候选图sizes告诉浏览器「在不同视口下这张图实际占多宽」浏览器用「显示宽度 × 像素密度」自己挑最合适的那张。sizes写错等于白写最常见的错误是全写成100vw结果手机也去下 1200px 的大图。width和height必须写原始像素值浏览器据此算出宽高比在图片下载完成前就预留好空间——这是把 CLS 压下去最直接的手段配合 CSS 里的aspect-ratio或height:auto使用。loadinglazy只给首屏以下的图片加。首屏大图加了反而拖慢最大内容绘制属于典型的优化变劣化。decodingasync让解码不阻塞渲染成本几乎为零。再补一条容器规则防止图片撑破布局.card__media img{ display: block; width: 100%; height: auto; /* 配合 width/height 属性自动保持比例 */ object-fit: cover; }display:block是为了去掉行内元素底部那几像素的基线间隙这个间隙在卡片对齐时特别明显属于看一眼不知道为什么、查一下才知道的老问题。4. 交互与表单不引入框架把校验、菜单和弹层写干净综合项目做到这一步静态部分已经能看了。剩下的是「能用」表单能不能提交、手机上菜单能不能打开、弹层能不能关掉。这三件事用原生能力完全够不需要任何框架而且原生方案自带可访问性省掉大量手工补丁。我的原则是能用 HTML 属性解决的不写 JS必须写 JS 的一定要同步更新 ARIA 状态。4.1 原生表单校验约束属性配上 aria-live 提示浏览器自带校验但默认气泡的样子和语言不可控位置也经常挡住输入框。做法是给表单加novalidate关掉原生气泡自己接管提示但校验规则仍然交给浏览器算。form classform novalidate div classform__row label foremail邮箱/label input idemail nameemail typeemail required minlength6 autocompleteemail aria-describedbyemail-tip !-- aria-live 让提示被读出polite 表示不打断当前朗读 -- p idemail-tip classform__tip aria-livepolite/p /div button typesubmit提交/button /formconst form document.querySelector(.form); const tip document.querySelector(#email-tip); const email form.elements.email; // 失焦时给一次即时反馈比等到提交才报错友好 email.addEventListener(blur, () { // validity 是浏览器算好的结果集直接读不重复写正则 if (email.validity.typeMismatch) { tip.textContent 邮箱格式不对检查一下 前后; } else if (email.validity.tooShort) { tip.textContent 至少 ${email.minLength} 个字符; } else { tip.textContent ; } }); form.addEventListener(submit, (event) { event.preventDefault(); // 综合项目没有后端先拦住默认提交 if (!form.checkValidity()) { // 聚焦第一个不合法的控件用户不用自己找 form.querySelector(:invalid)?.focus(); return; } tip.textContent 提交成功演示环境不入库; form.reset(); });validity对象是这套方案的核心它把required、type、minlength、pattern全部算好你只读结果。自己写正则去校验邮箱是典型的重复造轮子还容易写出把合法地址判错的规则。checkValidity()触发一次整体校验并返回布尔值配合:invalid选择器就能定位到出错的那个控件。需要跨字段校验时比如确认密码用setCustomValidity挂错误const pwd2 form.elements.confirm; pwd2.addEventListener(input, () { pwd2.setCustomValidity( pwd2.value form.elements.password.value ? : 两次输入不一致 ); });注意setCustomValidity是粘性的设了错误之后必须显式设回空字符串否则表单永远提交不了。这个坑几乎每个人都会踩一次。4.2 汉堡菜单两条路details/summary 与按钮切换窄屏导航折叠有两种写法。第一种是纯 HTMLdetails classnav__mobile summary菜单/summary ul lia href./index.html首页/a/li lia href./list.html列表/a/li /ul /details零 JS、自带展开收起、键盘可操作缺点是样式定制受限summary的默认三角标记在部分环境下要去掉还得额外写list-style和伪元素。适合对视觉要求不高的项目。第二种是按钮加 JS控制力更强但要自己维护状态button classnav__toggle typebutton aria-expandedfalse aria-controlsnav-list菜单/button ul classnav__list idnav-list.../ulconst toggle document.querySelector(.nav__toggle); const list document.querySelector(#nav-list); toggle.addEventListener(click, () { const expanded toggle.getAttribute(aria-expanded) true; toggle.setAttribute(aria-expanded, String(!expanded)); list.hidden expanded; // hidden 属性等价于 display:none但优先级更低 });aria-expanded不是装饰屏幕阅读器靠它播报「已展开/已折叠」只改hidden不改它等于只对明眼人有效。hidden属性比直接改style.display好因为它语义明确而且能被 CSS 的[hidden]{display:none}统一兜底。两条路怎么选项目里只有一处折叠用details折叠点多、还要联动动画和焦点用按钮方案。综合项目我一般用后者因为能顺便练状态管理。4.3 dialog 弹层showModal 带来的焦点管理以前做弹层要自己算焦点陷阱、自己监听 Esc、自己加遮罩现在一个元素解决。dialog idconfirm classdialog form methoddialog h2确认移除/h2 p移除后需要重新添加。/p button valuecancel取消/button button valueok确认/button /form /dialogconst dialog document.querySelector(#confirm); document.querySelector(.js-remove).addEventListener(click, () { dialog.showModal(); // 模态焦点锁在弹层内背景不可交互 }); dialog.addEventListener(close, () { // returnValue 就是被点按钮的 value省掉一个事件监听 if (dialog.returnValue ok) { console.log(执行移除); } });showModal()和show()的区别是前者带模态语义背景自动加::backdrop、焦点被限制在弹层内、Esc 自动关闭并触发close事件。这些以前要写几十行 JS现在一行。表单里的methoddialog让按钮直接回传value并关闭弹层连提交逻辑都省了。样式上补两行就够.dialog::backdrop{ background: rgb(0 0 0 / 0.45); } .dialog{ border: 0; border-radius: 8px; padding: 24px; max-width: 420px; }如果目标环境确实不支持dialog退化方案是给它加open属性让它常驻显示功能不至于完全不可用。这比引一个弹层库划算。5. 避坑与排查html网页综合项目实战里最容易返工的五个地方下面五条都是我在综合项目里反复遇到的症状看着莫名其妙原因基本都在一两行代码上。每条按「现象 → 原因 → 解决」写遇到同类问题可以直接对照。5.1 导航吸顶失效先查祖先的 overflow现象position: sticky写了top: 0也写了滚动时导航纹丝不动跟static没区别。原因sticky的参照物是最近的滚动容器。只要它到body之间任何一个祖先元素有overflow: hidden、overflow: auto或overflow: scroll粘附就会在那个容器内部发生而容器本身不滚动于是看起来完全失效。最常见的来源是给外层加了overflow-x: hidden来消除横向滚动条。解决把overflow-x: hidden从祖先上挪走改用body { overflow-x: clip }或者在真正溢出的那个元素上单独裁剪。排查手段很直接在开发者工具里从导航往上逐层看计算样式找到第一个overflow不是visible的祖先就地改掉。5.2 移动端横向滚动条三个高频来源现象手机上页面能左右拖动右侧多出一条空白。原因按出现频率排一是某个元素写了固定宽度比如width: 1200px的横幅二是用了100vw做宽度而vw包含滚动条宽度桌面端会溢出几个像素三是卡片加了负margin或者transform: translateX做视觉出血超出容器没裁掉。解决容器统一用width: 100%加max-width全宽元素改用width: 100%而不是100vw负边距方案必须在父级配overflow-x: clip。验证方法是在开发者工具里给所有元素临时加outline: 1px solid red一眼就能看到谁越界了。5.3 表单提示重复弹两次novalidate 漏了现象自己写的错误提示出来了紧接着浏览器原生气泡也弹出来两条信息叠在一起位置还打架。原因form上没加novalidate。原生校验在提交时依然会跑只是你自己也监听了submit并输出提示于是两套 UI 同时出现。解决表单标签上补novalidate校验逻辑全部走checkValidity()和validity对象。注意novalidate只关掉气泡展示不关掉校验能力约束属性和validity全部照常工作。这个属性名有点误导实际含义是「不显示原生提示」。5.4 图片加载后页面跳动宽高和 lazy 的配合现象首屏内容先渲染出来图片一加载完下面的文字整体往下推一截。原因img没写width和height浏览器在图片下载完成前不知道它多高只能按 0 高度排版。另外首屏大图也加了loadinglazy导致它被推迟到布局之后才加载跳动更明显。解决所有img都写原始像素的width和heightCSS 里配height: auto浏览器会自动按比例预留空间。首屏图去掉loadinglazy可以加fetchpriorityhigh提示优先加载。改完用性能面板录一次CLS 一般能落到 0.1 以内。5.5 汉堡菜单缩放窗口后消失hidden 属性被写死现象手机宽度下打开菜单然后把窗口拉宽到桌面尺寸再拉回来菜单按钮显示「已折叠」但列表也不见了或者反过来一直展开着。原因JS 用hidden属性控制显隐这个属性是写死在元素上的内联状态媒体查询管不到它。窗口跨过断点时CSS 已经把导航切成横排但hidden还在元素依然不显示。解决用matchMedia监听断点越过 768px 时把hidden和aria-expanded一起复位。const mq window.matchMedia((min-width: 768px)); function syncNav(e){ if (e.matches) { // 进入桌面宽度强制展开清掉移动端状态 list.hidden false; toggle.setAttribute(aria-expanded, true); } else { // 回到窄屏默认收起 list.hidden true; toggle.setAttribute(aria-expanded, false); } } mq.addEventListener(change, syncNav); syncNav(mq); // 首屏也要跑一次避免初始状态错位关键在最后一行。很多人只挂监听不初始化首次加载时如果窗口已经是宽屏状态就停在 HTML 里写的默认值上。这类「只在特定操作顺序下复现」的问题光看代码很难发现得按真实操作路径走一遍。6. 上线前的最后一公里一份能照着跑的交付自检综合项目做完不等于能交。我一般留半天做自检顺序固定先跑资源完整性再过可访问性最后看性能。资源检查用一段脚本就够把 HTML 里所有相对路径抽出来逐个验证是否存在。#!/usr/bin/env bash # 在站点根目录执行抽出所有 ./ 或 ../ 开头的引用逐个判断文件是否存在 grep -rhoE (src|href)\.{1,2}/[^] --include*.html . \ | sed -E s/.*([^])/\1/ \ | sort -u \ | while read -r p; do [ -e $p ] || echo 缺失: $p done这段脚本按站点根目录解析相对路径多页面放在子目录时会有误报属于已知局限人工复核一下即可。它的价值在于把「漏了一张图」这种低级错误挡在交付前。跑之前先用python3 -m http.server 8080起个本地静态服务因为在file://协议下部分资源加载行为和生产环境不一致容易漏掉问题。剩下的检查项列成表逐条打勾检查项判定标准操作手段文档结构每页仅一个main标题从h1起不跳级逐页看大纲当前页状态导航高亮与aria-current一致五页各点一次图片替代文本内容图有描述性alt装饰图alt搜索alt统计表单可操作性每个控件有labelTab 顺序合理全程只用键盘填一遍焦点可见所有可聚焦元素有可见焦点环Tab 走查不放过按钮首屏性能首屏图不 lazy字体不阻塞渲染网络面板看首屏请求交付整洁无copy、test、.DS_Store之类临时文件目录对比自检里最容易被跳过的是键盘走查但它恰恰回报最高。我自己的血泪经验是只用鼠标点一遍觉得一切正常换成键盘之后发现弹层打开后焦点还留在背景按钮上Esc 关不掉用户直接卡死。这类问题在演示时不会暴露上线后一定被投诉。还有一个习惯值得养成每改完一处立刻在窄屏和宽屏之间来回拉两次。综合项目里绝大多数布局 bug 都发生在断点切换的那一瞬间静态截图看不出来只有来回拖窗口才会现形。带新人的时候我也这么要求比事后补救省事得多。这套流程跑顺之后一个五人页面的综合项目大概两天能出可交付版本剩下时间全花在打磨细节上。值不值得做我的判断是如果你只能写单页这是性价比最高的一次跨越如果你已经在用框架回来手写一遍反而能把很多「框架帮我做了但不知道为什么」的地方补上。希望帮到你。本文还有配套的精品资源点击获取