OpenCV dnn 加载 YOLO 实现 RTSP 实时目标检测与归档
2026/9/10 15:17:31
简介：这是一份面向大学生静态网页设计期末作业、毕业设计及课程设计的高分参考模板，适合需要快速完成完整网页作品、又希望拿到高分的新手开发者。压缩包为zip格式，共31个文件，包含5个HTML页面、1个CSS样式表、2个JS交互脚本、21张JPG图片及1份README说明文档，总大小约30.27MB。其中HTML构建页面结构，CSS统一整体风格，JS实现日历与表单校验等交互效果，图片则作为页面视觉素材。目前已有514人学习/下载，可见其贴合多数高校静态网页课程要求。资源包含主页、漫画分享、照片墙、留言板和关于我等模块，覆盖图文排版、导航链接、相册展示、表单验证等常见考点；代码逐段注释，目录结构清晰，下载后按README简单部署即可运行，既可直接用于提交，也可作为高分范例参考学习，方便二次修改与个性化定制。
1. 静态网页设计期末作业：先把"完整"和"99分"拆开看
很多同学拿到期末的静态网页设计题目时，第一反应是上网找模板，或者往页面里塞一堆用不上的特效插件，结果交上去的作业要么在老师电脑上图片乱飞，要么 CSS 文件缺了一个导致整页错位。做这门课的作业，目标不是"看起来炫"，而是"代码完整、下载即用"。
99 分和 90 分的差距通常不在技术难度，而在页面是否处处可点、文件是否干净、刷新是否稳定。下面按一份高分的静态网页设计期末作业该有的顺序，从选题、HTML 骨架、CSS 布局、JavaScript 交互一直讲到交作业前的自检清单，中间给出可以直接照改的代码。写之前把思路理清，后面每个页面都是顺手的活。
2. 静态网页的题材选择与文件结构：99分的第一步是"目录不乱"
2.1 先选题：页数、内容与评分点的对应关系
静态网页设计作业最常见的失败不是代码写错，而是题材没选好。期末评分通常看"结构是否完整、样式是否统一、交互是否可用、代码是否规范"，并不看页面里的图片有多花哨。所以选题要优先考虑内容能不能撑起 4～8 个页面：个人作品集、地方美食介绍、校园风景展示、读书笔记、旅游攻略，都是容易凑满素材的类型。
| 题材类型 | 大致页数 | 可以展示的技术点 |
|---|---|---|
| 个人作品集 | 4～6 | 网格布局、页面跳转、图片 hover 效果 |
| 地方美食介绍 | 5～8 | 图文混排、卡片样式、导航锚点 |
| 校园风景展示 | 4～6 | 大图 banner、相册网格、懒加载图片 |
| 读书笔记 | 5～7 | 列表样式、引用块、章节锚点跳转 |
选完题材后，还要确定页面职责，我一般会把页面分成"内容页"和"功能页"两类。内容页负责展示素材，比如作品、风景图、美食介绍，用来体现布局和排版能力；功能页就是"关于我"和"联系我们"，用来放表格、表单和文字说明。两类页面加起来够 5 个以上，结构上就显得完整，不至于让老师觉得"这只是一个单页练习"。
2.2 文件目录这样组织：下载即用的关键是相对路径
"下载即用"这四个字，本质上是"相对路径写对了"。把整个工程文件夹压缩发出去，别人解压后双击打开就能看到完整效果，靠的不是打包技术，而是页面里所有引用都指向自己文件夹内部的相对地址。下面是用 tree 命令看到的常见工程结构：
web_project/ ├── index.html # 首页 ├── about.html # 关于页 ├── gallery.html # 作品/图库页 ├── contact.html # 联系页（含表单） ├── css/ │ └── style.css # 全站共用样式 ├── js/ │ └── main.js # 全站共用脚本 ├── images/ # 页面用到的所有图片 │ ├── hero.jpg │ └── pic-01.png └── README.txt # 给评审看的说明常见错误是图片路径写成D:/web_project/images/hero.jpg这种绝对路径，或者写成../images/hero.jpg却想当然地多退了一层目录。文件夹挪位置之后，这两种写法都会变成破图。正确做法是：CSS 里用url("../images/hero.jpg")，HTML 里用images/hero.jpg，路径基准始终是"当前文件所在位置"，而不是"我电脑上的位置"。
2.3 HTML 骨架里的加分细节：DOCTYPE、meta 与语义化标签
一份能拿高分的静态页 HTML，开头几行就能看出基本功。下面这个骨架可以直接用作所有页面的模板，主要包含 head 里的元信息、body 里的语义化结构，以及底部版权区，每一部分都有对应的打分点。实际使用时只需要替换 title、导航菜单和 main 里的内容，改动量很小。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="个人作品集网站，展示UI作品与摄影练习"> <title>我的作品集 - 首页</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <nav> <ul class="nav-list"> <li><a href="index.html" class="active">首页</a></li> <li><a href="gallery.html">作品</a></li> <li><a href="about.html">关于</a></li> <li><a href="contact.html">联系</a></li> </ul> </nav> </header> <main> <h1>欢迎来到我的作品集</h1> <p>这里展示我在课程期间完成的界面设计与摄影作品。</p> </main> <footer> <p>© 2024 课程期末作业</p> </footer> </body> </html><!DOCTYPE html>让浏览器以标准模式渲染，避免兼容模式的布局偏差；很多"为什么我的页面和同学的不一样"的问题，根源就在少了这一行。viewportmeta 控制移动端预览时的缩放，没有它，手机打开页面会横向缩小到看不清。description对显示效果没直接影响，但它是代码规范性的体现，评审看源码时这里有内容，说明做作业的人不只是在应付。
标签层面，用header、nav、main、footer替代满屏div，页面在没有 CSS 时也能按区块读懂。图片都写alt属性，既是无障碍要求，也避免图片加载失败时显示破图。每个页面只保留一个<h1>，下面按h2、h3逐级展开，这是评分里最常见的规范性扣分点，写多写混都很亏。
提示：页面标题
<title>要和导航里的名称保持一致，比如首页的 title 是"我的作品集 - 首页"，而不是统一都叫"我的作品集"。老师开多个标签页时，标签上能分清每个页面，体验会好很多。
3. 把静态网页做得像设计过：CSS 的三个必拿分模块
3.1 用 CSS 变量定基调，避免五颜六色
作业分数上不去，最常见的原因不是排版难，而是颜色太多。拿高分的做法通常是给全站定两三个主色、一个强调色，统一使用。CSS 自定义属性（变量）能把这种约束写进代码里：
:root { --primary: #2c3e50; --accent: #e67e22; --bg: #f8f9fa; --text: #333; --radius: 10px; } body { background: var(--bg); color: var(--text); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.7; margin: 0; } a { color: var(--accent); text-decoration: none; } .nav-list a.active, .nav-list a:hover { color: var(--primary); border-bottom: 2px solid var(--accent); }变量统一写在:root里，后续每个页面直接引用。想换主题色时只改:root一处，全站同步更新，对比每页单独写颜色的作业，可维护性一眼可见。--radius保证所有卡片、按钮的圆角一致，避免同一页出现三种圆角。line-height: 1.7是正文阅读比较舒服的行高，比默认的 1.2 更适合中文内容，这是很多模板里没调、但实际很影响观感的参数。
3.2 Flex 与 Grid 的选用边界：什么时候用哪一个
页面里最常见的两种布局需求，一是"一行导航横向排开"，二是"作品卡片整齐对齐"。一个用 Flexbox，一个用 Grid，这是期末作业里最稳妥的分工：
/* 导航：Flex 负责一维排列和对齐 */ .nav-list { display: flex; gap: 24px; justify-content: center; align-items: center; list-style: none; } /* 作品网格：Grid 负责二维行列布局 */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .card-grid img { width: 100%; height: auto; border-radius: var(--radius); transition: transform 0.2s ease; } .card-grid img:hover { transform: scale(1.03); }Flex 的gap: 24px直接控制项目间距，不用再给每个li加 margin。justify-content: center管水平居中，align-items: center管垂直居中，两个一配合，导航居中是最快的写法。Grid 的repeat(auto-fill, minmax(240px, 1fr))表示每列至少 240px，容器够宽就多排几列，不够就自动换行，这段代码本身就实现了"不同屏幕下网格自适应"，比写死grid-template-columns: 1fr 1fr 1fr更能拿分。
| 布局场景 | 首选方案 | 判断依据 |
|---|---|---|
| 导航、按钮组、单行对齐 | Flexbox | 一维排列，对齐属性直观 |
| 作品卡片、相册网格 | Grid | 二维行列，自动填充列数 |
| 单元素水平垂直居中 | Flexbox | 两句声明即可解决 |
注意：真要给 Grid 写死列数，也优先用
repeat(3, 1fr)配合minmax做兜底，避免在窄屏上三列被压成一条缝。作业验收时老师通常会把窗口拖窄看一眼，这一步做好能避免很多尴尬。
3.3 媒体查询断点怎么设：响应式不是"加一段就算"
"我加了媒体查询但还是乱"是问得最多的问题之一。断点不是拍脑袋定的，它是配合"内容什么时候放不下"来选的。课堂作业最常见的屏幕是三档：手机竖屏（一般 375～414px）、平板/窄笔记本（768～1024px）、桌面宽屏（1200px 以上）。对应下面这套写法：
/* 默认样式：手机竖屏优先 */ body { font-size: 16px; } /* 宽度 ≥ 768px：平板和窄笔记本 */ @media (min-width: 768px) { body { font-size: 18px; } } /* 宽度 ≥ 1200px：桌面端 */ @media (min-width: 1200px) { .container { max-width: 1140px; margin: 0 auto; } } /* 细节兜底：窄屏下导航竖排 */ @media (max-width: 767px) { .nav-list { flex-direction: column; gap: 12px; } }用min-width写"移动端优先"的好处是：默认样式服务最小屏，后续媒体查询只做增量覆盖。768px 这个断点的来历是 iPad 竖屏宽度，超过它通常按平板布局走；1200px 对应常见桌面内容的舒适宽度。如果只想在作业里体现"我会响应式"，一组 768、一组 1200 就够，断点多加反而容易顾此失彼。最后一段max-width: 767px是配套的收尾，把导航从横排改成竖排，避免小屏上菜单挤成一团。
还有一个全局兜底别漏：img { max-width: 100%; height: auto; }。这句不写在哪个媒体查询里，而是直接放在全局样式，否则图片在窄屏下会把页面撑出横向滚动条，老师拖窗口时会立刻发现。
4. 静态网页的交互与可运行性：JavaScript 加分项和"代码完整"的底线
4.1 三个低成本交互：导航高亮、返回顶部、图片缩放
静态网页设计作业里的 JavaScript 不需要复杂，把"当前页面在导航里高亮""页面滚长后一键回顶""作品图片点击放大"这三个做完，交互分基本稳定。下面是一份可以直接放进js/main.js的示例代码：
// 根据当前文件名高亮对应导航项 const currentPage = location.pathname.split("/").pop() || "index.html"; document.querySelectorAll(".nav-list a").forEach((link) => { if (link.getAttribute("href") === currentPage) { link.classList.add("active"); } }); // 返回顶部：滚动超过 300px 后显示按钮 const backTop = document.getElementById("backTop"); if (backTop) { window.addEventListener("scroll", () => { backTop.style.display = window.scrollY > 300 ? "block" : "none"; }); backTop.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: "smooth" }); }); } // 点击作品图片，放大到新标签页查看 document.querySelectorAll(".card-grid img").forEach((img) => { img.addEventListener("click", () => { window.open(img.src, "_blank"); }); });location.pathname是当前页面的路径，用split("/").pop()取出最后一段文件名，比如gallery.html，再和每个导航链接的href比对，命中的就加上active类。这段代码不依赖某个页面写死，以后新增页面也不需要改 JS。返回顶部的scrollY > 300是显示阈值，页面没滚起来时不显示按钮，避免一打开就浮着一个多余的圆钮。图片放大用window.open新开标签页，不需要引入任何弹窗库，对期末作业完全够用；想做成"页面内放大"效果，那属于额外加分项，不是必需的。
4.2 表单校验与提示：评分表里最容易拿分的隐藏项
联系页放表单是静态网页设计的经典内容，但很多作业做完就放那，不校验、不提示、提交后整个页面刷新。下面这份代码能让表单在提交前做必填和格式检查，并逐条显示中文提示，提交后页面不会刷新，已填写的内容也不会丢失。
<form id="contactForm" novalidate> <label for="name">姓名</label> <input type="text" id="name" required> <label for="email">邮箱</label> <input type="email" id="email" required> <button type="submit">提交</button> <p id="formMsg" class="msg"></p> </form>对应的 JavaScript 放在js/main.js末尾，只处理这一个表单的提交事件：
const form = document.getElementById("contactForm"); const msg = document.getElementById("formMsg"); form.addEventListener("submit", (e) => { e.preventDefault(); const name = document.getElementById("name").value.trim(); const email = document.getElementById("email").value.trim(); if (name.length < 2) { msg.textContent = "姓名至少需要 2 个字符"; msg.style.color = "#c0392b"; return; } if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) { msg.textContent = "请输入正确的邮箱地址"; msg.style.color = "#c0392b"; return; } msg.textContent = "提交成功（示例代码不会真正发送数据）"; msg.style.color = "#27ae60"; });novalidate的作用是关掉浏览器自带的英文气泡提示，让校验逻辑完全由自己的代码控制。e.preventDefault()阻止表单默认的提交刷新行为，这是校验能正常执行的前提。邮箱正则^[^@\s]+@[^@\s]+\.[^@\s]+$要求 @ 前后都有内容，且包含点号，对作业足够用，不需要引入验证框架。全部通过后显示的"提交成功"文案要写清楚"不会真正发送数据"，避免老师误以为你在没有后端的页面里造假数据交互。
提示：期末作业里的表单不需要真的把数据发到服务器。做到"提交前校验 + 明确中文提示 + 页面不刷新"这三件事，就已经超过大多数同学的实现完整性。
4.3 脚本加载顺序与 defer：为什么粘贴的 JS 经常失效
作业里最常见的一个现象是：把网上的 JS 示例粘到</body>前，第一遍打开好用，换台电脑就报Cannot read properties of null。这通常不是代码本身的问题，而是脚本执行时 DOM 还没解析完。最稳的引入方式是给script加defer，并放在head里：
<script src="js/main.js" defer></script>defer让浏览器在 HTML 全部解析完成后再执行脚本，但下载过程不阻塞渲染。这样document.querySelector一定能找到页面里已经存在的元素，前面导航高亮、返回顶部这些依赖 DOM 的代码也就不会报错。区别在于：不加defer时脚本立即执行，如果脚本放在head里，就需要再包一层DOMContentLoaded监听才能安全操作 DOM；多包一层就多一种写错的可能。
另一个顺序问题常出现在复制模板代码时：如果页面引入了外部库，比如字体库、图标库的 CDN 脚本，那么 CDN 那行必须排在自己的main.js之前。浏览器按顺序执行脚本，先引用的先加载，main.js里如果调用了库里的变量，加载顺序反了就会报XXX is not defined。期末作业虽然一般只有项目内部的main.js，但很多同学会顺手复制网上的组件代码，意识到这个顺序约束，排错会快很多。
5. 静态网页作业交付前的自检清单与提交技巧
先做一次真实环境验证。双击打开index.html用的是file://协议，它和真实站点跑在http://下的行为有差异，建议用本地静态服务器验证，这一步能提前暴露大部分路径和脚本问题：
# 在工程根目录启动一个静态文件服务器，默认端口 8080 cd web_project python -m http.server 8080浏览器访问http://localhost:8080后，逐个页面点一遍导航，重点看控制台有没有红色报错。Failed to load resource: 404说明图片或 CSS 路径写错；Uncaught TypeError: Cannot read properties of null说明 JS 在 DOM 未就绪时执行。把控制台调成无报错状态，再往下走。
提交前按这个顺序过一遍：每个导航链接都实际点一次，确认没有指向不存在页面的死链；窗口从手机宽度拖到桌面宽度，确认没有横向滚动条；Chrome 和 Edge 各打开一次，这两个内核是期末评审最常见的环境，不需要做全浏览器兼容；检查images目录，确认页面引用的每张图都在文件夹里，重复命名的图片清理掉。压缩成 zip 时命名为"学号-姓名-静态网页设计作业"，老师解压后按 README 就能运行。README 里写三行即可：运行环境、启动方式（直接打开 index.html 或 python 服务）、页面结构说明。如果能把首页截图贴进 README 开头，批量评审时老师不用打开工程就先知道你的作业长什么样，这一步非常加分。
本文还有配套的精品资源，点击获取