简介这是一份面向高校计算机与数字媒体专业学生的HTML5期末课程设计作业资源聚焦传统节日文化主题解决前端基础技能综合实践需求。资源包含端午节主题的3个完整页面首页、详情页、列表页覆盖HTML5语义化结构、CSS3 Flex/Grid布局与动画效果、JavaScript交互逻辑如轮播图、Lightbox图库、平滑滚动、表单验证等适合作为Web前端入门到进阶的实战范例。压缩包共61个文件含3个HTML主页面、3个CSS样式文件、13个JS脚本含jQuery插件与自定义逻辑、25张PNG素材图及8个GIF动效资源整体大小2.13MB结构清晰便于分模块学习与调试。目前已有331人学习下载资源附带完整可运行项目结构、多浏览器兼容处理及响应式适配代码开箱即用适合课程作业参考、技术复现与教学演示。1. 用 HTML5CSS3JS 做端午节主题网页不是套模板而是练透语义化结构、响应式布局与交互逻辑的硬功夫很多大学生交 HTML5 期末作业时直接复制粘贴“端午节网页模板”结果div classbox1套三层、img src1.jpg没 alt、JavaScript 全写在 HTML 里——老师一眼看出没动手。其实一个合格的端午节三页网站首页、习俗页、诗词页核心不在“多炫”而在结构是否符合 HTML5 语义规范比如用article包裹屈原故事用nav管理顶部导航、CSS 是否真正实现移动端适配不是只加个meta viewport就算响应式、JS 是否解决真实交互需求如点击粽子图标展开食材列表而非仅触发alert(你好)。这三页作业本质是 Web 前端开发最小闭环内容组织HTML、视觉表达CSS、行为控制JS缺一不可。适合刚学完 HTML 标签、CSS 盒模型和基础 DOM 操作的大二学生也适合想检验自己能否脱离框架手写完整页面的转行者。下面不讲空泛概念直接从零开始把每个页面的骨架、样式断点、交互触发点全部拆解清楚。2. 用 HTML5 语义化标签搭出可访问、易维护的三页骨架拒绝 div 堆砌2.1 首页结构用headermainsection构建清晰内容流首页不是堆图而是信息分层。顶部必须用header包裹 logo 和主导航主体内容按逻辑切分为section第一个 section 放节日导语含h1端午节/h1第二个放龙舟竞渡图用figurefigcaption语义化图文关系第三个放今日习俗卡片用article表示独立内容单元。底部用footer统一版权信息。关键点在于所有div必须有明确语义替代方案。例如传统写法div idnav应改为nav aria-label主菜单并为屏幕阅读器提供可理解的标签。!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title粽香千年 · 端午节文化网页/title link relstylesheet hrefcss/style.css /head body header h1粽香千年/h1 nav aria-label主菜单 ul lia hrefindex.html aria-currentpage首页/a/li lia hrefcustoms.html端午习俗/a/li lia hrefpoems.html经典诗词/a/li /ul /nav /header main section classhero h2五月五日午赠我一枝艾/h2 p端午节又称端阳节、重午节是中华民族重要的传统节日之一.../p /section section classdragon-boat figure img srcimages/dragon-boat.jpg alt端午节龙舟竞渡实景多支队伍奋力划桨水面飞溅水花 width800 height450 figcaption千帆竞发百舸争流——端午龙舟赛盛况/figcaption /figure /section section classcustoms-cards article h3挂艾草与菖蒲/h3 p民谚有云“清明插柳端午插艾”。艾草与菖蒲有驱虫避疫之效.../p /article !-- 其他习俗卡片 -- /section /main footer pcopy; 2024 端午节文化网页 · 计算机学院前端课程作业/p /footer script srcjs/main.js/script /body /html提示meta nameviewport是响应式的起点但不是终点aria-currentpage让辅助技术知道当前页面位置img的alt属性必须描述图像内容不能留空或写“图片”。2.2 习俗页与诗词页用detailssummary实现无 JS 折叠内容兼顾可访问性与轻量习俗页需罗列吃粽子、佩香囊、系五彩绳等 5–6 项习俗每项配简短说明和小图标。若全用 JS 控制展开/收起会增加复杂度且影响 SEO。更优解是使用原生details标签——它自带折叠状态管理键盘用户可用 Tab 键聚焦、Enter 键切换屏幕阅读器自动播报“已折叠/已展开”。诗词页同理将《离骚》节选、《乙卯重五诗》等 3 首诗分别放入details点击summary即展开全文。!-- customs.html 片段 -- section classcustoms-list details open summary 挂艾草与菖蒲/summary p端午时节家家户户门前悬挂新鲜艾草与菖蒲。艾草气味浓烈可驱蚊虫菖蒲形似宝剑民间认为能斩除邪祟.../p /details details summary 吃粽子/summary p粽子以箬叶包裹糯米内馅多样。北方多甜粽豆沙、枣泥南方偏爱咸粽鲜肉、蛋黄.../p /details /section注意details默认支持open属性控制初始状态summary内可嵌入 emoji 或小图标增强视觉提示无需额外 CSS 即可工作但可通过details[open] summary::after添加箭头符号。2.3 三页共用的标准化头部与导航用 CSS:target实现锚点高亮减少 JS 依赖三页导航栏需统一且当前页面对应菜单项要高亮。常见错误是用 JS 监听 URL 变化再操作 class。更简洁方案是利用 CSS:target伪类为每个导航链接设置href#index、href#customs并在对应页面的body上添加idindex等标识。然后用 CSS 规则nav a[href$index]:target { color: #e74c3c; }实现高亮。这样既免去 JS 初始化逻辑又保证 URL 锚点跳转时样式同步更新。/* css/style.css */ nav a { color: #333; text-decoration: none; padding: 8px 16px; border-radius: 4px; } nav a:hover { background-color: #f8f9fa; } /* 当前页面锚点匹配时高亮 */ nav a[href$index]:target, nav a[href$customs]:target, nav a[href$poems]:target { color: #e74c3c; font-weight: bold; background-color: #fff5f5; }提示:target依赖 URL 中的#锚点因此需确保三页的body id...与导航href后缀严格一致此方案在 IE9 完全兼容比 JS 方案更可靠。3. 用移动优先的 CSS 断点与 Flex/Grid 布局让三页在手机、平板、桌面都呼吸自然3.1 移动端基础用 rem viewport 缩放控制字体与间距避免 1px 线条模糊移动端最易被忽视的是单位一致性。若全用px缩放时文字与容器比例失调若只用%嵌套过深易失控。推荐rem为基准单位 viewport缩放微调在html标签上设置font-size: 16px即 1rem 16px所有字体、边距、圆角均用rem。针对 iPhone X 等刘海屏在 CSS 中添加媒体查询修正/* css/style.css */ html { font-size: 16px; } media screen and (min-width: 375px) { html { font-size: 17px; /* 适配 375px 宽度设备 */ } } media screen and (min-width: 414px) { html { font-size: 18px; /* 适配 414px 宽度设备 */ } } /* 所有尺寸基于 rem */ .hero h2 { font-size: 1.5rem; /* 24px */ margin-bottom: 1rem; /* 16px */ }提示rem相对于根元素字体大小不受父级影响比em更稳定viewport的initial-scale1.0确保页面不缩放但需配合user-scalableno慎用影响可访问性。3.2 平板与桌面用 Flexbox 实现导航栏水平居中Grid 布局卡片网格导航栏在桌面端需水平铺开而非移动端的垂直堆叠。用media (min-width: 768px)触发 Flex 布局nav ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; } nav li { margin: 0 8px; } nav a { padding: 10px 20px; }习俗页的卡片网格是典型 Grid 应用场景。6 项习俗需在桌面端 3×2 排列平板端 2×3手机端 1×6。用grid-template-columns配合repeat(auto-fit, minmax(...)))自适应.customs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; padding: 1rem; } /* 平板端最多 2 列 */ media (max-width: 767px) { .customs-cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } /* 手机端强制单列 */ media (max-width: 479px) { .customs-cards { grid-template-columns: 1fr; } }注意auto-fit比auto-fill更智能能收缩空列minmax(250px, 1fr)表示每列最小 250px最大均分剩余空间gap替代margin实现网格间隙更简洁。3.3 用 CSS 伪类选择器实现悬停动画与状态反馈替代部分 JS 功能鼠标移入事件hover是高频交互但新手常滥用 JS。CSS 提供了更高效方案a:hover改变链接颜色button:hover添加阴影甚至用keyframes做平滑过渡。例如首页龙舟图下方的“了解更多”按钮悬停时背景色渐变、图标旋转.btn-more { display: inline-block; padding: 8px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; transition: all 0.3s ease; /* 关键启用过渡 */ } .btn-more:hover { background: #2980b9; transform: translateY(-2px); } .btn-more:hover::after { content: →; animation: slideIn 0.3s ease; } keyframes slideIn { from { opacity: 0; transform: translateX(5px); } to { opacity: 1; transform: translateX(0); } }提示transition必须指定属性如background或all并设duration和timing-functiontransform性能优于top/left浏览器会启用 GPU 加速::after伪元素可动态添加内容避免 HTML 冗余。4. 用原生 JavaScript 实现三个真实交互粽子计数器、诗词朗读控制、返回顶部4.1 粽子计数器用dataset存储初始值addEventListener绑定点击事件首页常设“今日已吃粽子”计数器点击粽子图标 1。关键不是实现加法而是数据与 DOM 分离将初始值存于i标签的>!-- index.html -- div classzongzi-counter i idzongzi-icon classicon-zongzi>// js/main.js const zongziIcon document.getElementById(zongzi-icon); const countDisplay document.getElementById(count-display); // 从 localStorage 或 dataset 读取初始值 let count parseInt(localStorage.getItem(zongziCount)) || parseInt(zongziIcon.dataset.count) || 0; function updateCount() { count; countDisplay.textContent count; localStorage.setItem(zongziCount, count); } // 绑定点击与键盘事件支持空格/Enter zongziIcon.addEventListener(click, updateCount); zongziIcon.addEventListener(keydown, (e) { if (e.key Enter || e.key ) { e.preventDefault(); updateCount(); } });注意tabindex0使i可聚焦rolebutton告知辅助技术这是按钮e.preventDefault()阻止空格键滚动页面localStorage存储字符串需parseInt转换。4.2 诗词朗读控制用SpeechSynthesisAPI 实现文本转语音带暂停/继续诗词页需“点击朗读”功能。现代浏览器原生支持window.speechSynthesis无需第三方库。核心是创建SpeechSynthesis实例用SpeechSynthesisUtterance包装文本并监听onend事件重置按钮状态。// js/poems.js function speakPoem(text) { const utterance new SpeechSynthesisUtterance(text); utterance.lang zh-CN; utterance.rate 0.9; // 语速 0.9 倍 utterance.pitch 1; // 音调正常 // 朗读结束时恢复按钮 utterance.onend () { const btn document.querySelector(.speak-btn); btn.textContent ▶ 朗读; btn.classList.remove(speaking); }; window.speechSynthesis.speak(utterance); } // 绑定按钮 document.querySelectorAll(.speak-btn).forEach(btn { btn.addEventListener(click, function() { const poemText this.closest(article).querySelector(p).textContent; if (this.classList.contains(speaking)) { window.speechSynthesis.cancel(); this.textContent ▶ 朗读; this.classList.remove(speaking); } else { this.textContent ⏸ 暂停; this.classList.add(speaking); speakPoem(poemText); } }); });提示speechSynthesis.cancel()可中断当前朗读langzh-CN确保中文发音准确需在 HTTPS 环境或本地文件file://下测试HTTP 站点可能被浏览器禁用。4.3 一键返回顶部用scrollIntoView替代scrollTop兼容性更好且平滑页面过长时需返回顶部按钮。老方案用document.body.scrollTop 0但存在兼容性问题IE 与 Chrome 行为不一。现代标准是element.scrollIntoView({ behavior: smooth })只需一个空div idtop-anchor/div放在header前按钮href#top-anchor即可完全无需 JS。但若需动态显示/隐藏按钮则用 JS 监听滚动// js/main.js const backToTopBtn document.getElementById(back-to-top); window.addEventListener(scroll, () { if (window.scrollY 300) { backToTopBtn.style.display block; } else { backToTopBtn.style.display none; } }); backToTopBtn.addEventListener(click, (e) { e.preventDefault(); document.getElementById(top-anchor).scrollIntoView({ behavior: smooth }); });!-- HTML 中添加锚点 -- div idtop-anchor/div header.../header !-- 返回按钮 -- a href#top-anchor idback-to-top classback-to-top aria-label返回顶部 ↑ /a注意scrollIntoView的behavior: smooth在 Chrome/Firefox/Edge 均支持Safari 15.4 支持aria-label为无障碍用户提供说明e.preventDefault()阻止默认跳转确保 JS 控制。5. 用 VS Code 实时预览与 DevTools 验证三页效果快速定位 HTML 结构、CSS 断点、JS 执行问题5.1 VS Code 插件配置Live Server Auto Rename Tag提升编码效率VS Code 是大学生最常用编辑器但常忽略插件价值。安装Live Server插件后右键 HTML 文件选择 “Open with Live Server”即可启动本地服务器如http://127.0.0.1:5500保存即刷新无需手动打开文件。搭配Auto Rename Tag修改header开始标签时闭合标签/header自动同步避免标签错位。此外Prettier格式化代码ESLint检查 JS 语法错误如未声明变量三者组合可减少 70% 低级错误。提示Live Server 默认端口 5500若被占用可在设置中修改index.html必须放在项目根目录否则路径解析异常格式化快捷键ShiftAltFWindows或ShiftOptionFMac。5.2 Chrome DevTools 实战用 Elements 面板检查语义化缺失Console 面板调试 JS 错误当页面显示异常先打开 Chrome DevToolsF12。Elements 面板是 HTML 结构医生点击左上角箭头图标悬停页面元素右侧自动高亮对应代码若发现div classheader立即右键 Edit as HTML 改为header检查img是否缺失altnav是否遗漏aria-label。Console 面板是 JS 诊断室运行console.log(document.querySelectorAll(article).length)查看诗词页文章数量输入speechSynthesis.getVoices()确认中文语音引擎是否加载若报错Cannot read property textContent of null说明querySelector选择器写错需回 HTML 核对 class 名。# 在 Console 中快速验证 document.querySelector(nav).ariaLabel // 应返回 主菜单 localStorage.getItem(zongziCount) // 查看粽子计数是否持久化 window.innerWidth // 查看当前视口宽度验证断点注意DevTools 的Mobile ToggleCtrlShiftM可模拟不同设备尺寸测试响应式效果Network面板查看 CSS/JS 文件是否 404确认路径正确。5.3 三页联调技巧用window.location.pathname动态判断当前页面复用同一份 JS三页共用main.js但某些功能仅在特定页面生效如首页的粽子计数器诗词页的朗读按钮。若为每页写独立 JS维护成本高。更优方案是用window.location.pathname获取当前路径条件执行// js/main.js const currentPage window.location.pathname.split(/).pop(); if (currentPage index.html || currentPage ) { initZongziCounter(); initBackToTop(); } if (currentPage poems.html) { initPoemSpeaker(); } if (currentPage customs.html) { // 习俗页暂无 JS 交互留空 } function initZongziCounter() { // 粽子计数器逻辑 } function initPoemSpeaker() { // 诗词朗读逻辑 }提示pathname返回/index.html用split(/).pop()提取文件名此方案避免重复引入 JS也方便后期扩展若部署到子目录需用location.href替代pathname做更精确匹配。本文还有配套的精品资源点击获取