简介：本资源是高校《Web编程基础》课程期末设计项目成果，主题为静态网页“我的家乡”，面向大二计算机类专业学生及Web前端初学者，提供可直接复用的网页开发范例与完整工程实践参考。压缩包共40个文件，含12张JPG/JFIF/ PNG格式的家乡实景图与UI素材、2个HTML主页面（index.html与denglu.html）、2个CSS样式文件（tupian.css与top_banner.css）、2个JS交互脚本（tupian.js与top_banner.js），以及2份Word版设计说明文档、1个README.md和1段六盘水城市介绍MP4视频，整体大小41.26MB。已有101人学习下载，内容结构清晰，涵盖首页布局、顶部横幅、图片轮播、登录页跳转等典型静态网页模块，配套设计文档详述开发目标、技术选型与实现逻辑，MP4视频直观呈现网页运行效果，便于理解页面动效与内容组织方式。
1. 静态网页不是“静态”的——它是一套可复现、可验证、可教学的 Web 基础能力闭环
大二学生交上一份「我的家乡」静态网页作业，压缩包里只有 HTML/CSS/JS 文件和几十张本地图片，没有后端、不连数据库、不调 API——但恰恰是这种“最朴素”的结构，暴露出 Web 编程基础中最关键的三道坎：语义化标签是否合理、CSS 层叠与盒模型是否真正理解、JavaScript 事件驱动逻辑是否能闭环响应。这不是“写完就能跑”的玩具项目，而是检验<meta charset="utf-8">是否真被读懂、<link rel="stylesheet">路径是否在多级目录下仍稳定、document.getElementById()是否在 DOM 加载完成前就执行的实战沙盒。适合刚学完 HTML5 结构、CSS 选择器优先级、JS 事件监听机制的学生做「反向调试训练」：把一个能运行的成品拆开，逐行验证每个class是否被正确应用、每个src是否指向真实资源、每个onclick是否触发预期行为。它不追求炫技，但每处细节都直指 Web 开发第一课的核心命题——浏览器如何把文本解析成可交互界面。
2. 从 index.html 入口开始：HTML 结构语义化与文档类型声明的实操校验
2.1 文档类型与语言属性必须显式声明，否则 CSS/JS 行为不可控
打开index.html，首行必见<!doctype html>，紧接着是<html lang="zh-cn">。这不是装饰性代码，而是浏览器渲染引擎的开关指令。若缺失或写成<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">，Chrome 会触发怪异模式（Quirks Mode），导致box-sizing: border-box失效、Flex 布局错位、甚至querySelectorAll()返回空 NodeList。验证方法：在开发者工具 Console 中执行document.compatMode，返回"CSS1Compat"才表示标准模式启用成功。
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的家乡 · 六盘水</title> <link rel="stylesheet" href="css/top_banner.css"> <link rel="stylesheet" href="css/tupian.css"> </head>提示：
<meta charset="utf-8">必须紧贴<head>开始，且不能写成<meta http-equiv="Content-Type" content="text/html; charset=utf-8">——后者在 HTTP 头已存在时会被忽略，而前者是 HTML5 强制要求的字符集声明方式。
2.2 标签语义化不是“用对了就行”，而是要形成可访问性与 SEO 友好的 DOM 树
观察index.html中的主体结构，典型片段如下：
<main> <section id="banner"> <div class="banner-content"> <h1>六盘水——中国凉都</h1> <p>平均气温19.7℃，夏季平均气温仅19.2℃</p> </div> </section> <section id="introduction"> <h2>城市名片</h2> <article> <h3>地理特征</h3> <p>地处贵州西部……</p> </article> <article> <h3>人文风情</h3> <p>彝族火把节……</p> </article> </section> </main>这里的关键在于：
<main>是页面唯一主内容容器，屏幕阅读器会直接跳转至此；<section>按主题划分逻辑区块，id值（如banner）需全局唯一且与 CSS/JS 中引用严格一致；<article>表示独立成篇的内容单元（如地理、人文），其内部<h3>是该单元的标题层级，不能跳级使用<h1>；- 所有
<img>必须含alt属性，例如<img src="images/liupanshui.jpg" alt="六盘水明湖湿地公园航拍图">，缺失则违反 WCAG 2.1 AA 级可访问性标准。
验证工具：在 Chrome 中右键 → “检查” → Elements 面板，展开 DOM 树，确认<h1>至<h6>层级连续无跳跃；使用 Lighthouse 工具运行「Accessibility」审计，重点查看「Image elements have[alt]attributes」项是否通过。
2.3 资源路径必须遵循相对定位规则，跨目录引用需用../显式回退
项目中 CSS/JS/图片分散在css/、js/、images/子目录，index.html位于根目录。因此所有资源引用必须基于index.html的位置计算相对路径：
| 资源类型 | 正确写法 | 错误写法 | 后果 |
|---|---|---|---|
| CSS 文件 | <link rel="stylesheet" href="css/top_banner.css"> | <link rel="stylesheet" href="/css/top_banner.css"> | 前者在本地双击打开时可加载，后者因/指向根域名，在 file:// 协议下失效 |
| JS 文件 | <script src="js/top_banner.js"></script> | <script src="js/top_banner.js?ver=1.0"></script> | 添加版本参数虽利于缓存控制，但本项目无构建流程，反而增加 404 风险 |
| 图片 | <img src="images/009.jpg" alt="..."> | <img src="009.jpg"> | 后者会尝试在根目录找图片，而实际文件在images/下 |
注意：
README.md中若未说明目录结构，新手常误将images/文件夹拖入css/目录下，导致所有src="images/xxx.jpg"404。验证方法：在浏览器 Network 面板过滤Img类型，查看 status 列是否全为200。
3. CSS 分层治理：从 top_banner.css 到 tupian.css 的盒模型与响应式实践
3.1 三行模式 CSS 文件结构：重置、布局、组件样式必须物理隔离
项目中top_banner.css与tupian.css并非随意命名，而是体现典型的「分层 CSS 架构」：
top_banner.css：负责顶部横幅区域的绝对定位、背景图覆盖、文字居中等强视觉控制，属于布局层；tupian.css：管理图片网格、悬停放大、圆角裁剪等视觉效果，属于组件层；- 二者均未包含
* { margin: 0; padding: 0; }这类全局重置——这恰是教学设计的精妙之处：让学生意识到重置必须显式声明，且应置于所有样式之前。
典型top_banner.css片段分析：
#banner { position: relative; height: 500px; background: url('../images/banner001.jpeg') no-repeat center center; background-size: cover; } .banner-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }关键参数说明：
background-size: cover确保背景图完全覆盖容器，即使图片宽高比与容器不匹配；transform: translate(-50%, -50%)是现代居中方案，替代过时的margin-top: -Xpx；text-shadow第三个参数4px是模糊半径，值越大阴影越虚，此处取0.5是为兼顾可读性与美观。
3.2 CSS 鼠标移入事件驱动的视觉反馈必须绑定到具体元素，而非伪类滥用
tupian.css中大量使用:hover实现图片悬停效果，但教学重点在于事件目标必须明确。例如：
.photo-grid img { width: 100%; transition: transform 0.3s ease, filter 0.3s ease; } .photo-grid img:hover { transform: scale(1.05); filter: brightness(1.1) contrast(1.05); }这里transition必须写在常态规则中（.photo-grid img），而非:hover里，否则首次悬停时无过渡动画。transform: scale(1.05)的1.05是放大比例，超过1.1易导致边缘像素撕裂；filter中brightness()和contrast()组合使用，比单纯opacity更符合真实光影逻辑。
提示：若发现悬停无反应，先检查
.photo-grid容器是否设置了overflow: hidden（防止放大后溢出），再确认img标签是否被父级div的display: flex或float干扰了尺寸继承。
3.3 移动端适配依赖 viewport 元标签与媒体查询，非简单缩放
index.html中<meta name="viewport" content="width=device-width, initial-scale=1.0">是响应式基石。但仅此不够，top_banner.css中需补充媒体查询：
@media screen and (max-width: 768px) { #banner { height: 300px; } .banner-content h1 { font-size: 1.5rem; } }此处768px是常见平板断点，height从500px降至300px避免移动端过度留白；font-size用rem单位而非px，确保用户调整系统字体大小时标题同步缩放。验证方法：Chrome DevTools 切换设备模拟器（如 iPhone SE），观察横幅高度是否收缩、文字是否清晰可读。
4. JavaScript 事件驱动：tupian.js 与 top_banner.js 的 DOM 操作边界
4.1 页面加载时机决定 JS 执行顺序，DOMContentLoaded 是安全基线
index.html底部引入两个 JS 文件：
<script src="js/top_banner.js"></script> <script src="js/tupian.js"></script>二者均未使用defer或async，因此按顺序阻塞解析执行。关键逻辑在top_banner.js中：
document.addEventListener('DOMContentLoaded', function() { const banner = document.getElementById('banner'); if (banner) { banner.addEventListener('click', function() { alert('点击横幅可跳转至六盘水政府官网'); }); } });DOMContentLoaded事件确保 DOM 树构建完成，但图片等资源可能未加载完毕——这正是教学意图：让学生理解「DOM 就绪」与「资源就绪」的区别。若将addEventListener写在脚本顶部（无事件包装），则getElementById可能返回null，因 HTML 尚未解析到<section id="banner">。
4.2 tupian.js 的图片轮播逻辑暴露了 setInterval 与闭包的经典陷阱
tupian.js中实现简易轮播：
let currentIndex = 0; const images = document.querySelectorAll('.photo-grid img'); function showNextImage() { images[currentIndex].style.display = 'none'; currentIndex = (currentIndex + 1) % images.length; images[currentIndex].style.display = 'block'; } setInterval(showNextImage, 3000);问题在于：若页面存在多个.photo-grid区域，querySelectorAll会返回全部img，导致轮播混乱。修复方案是限定作用域：
const photoGrids = document.querySelectorAll('.photo-grid'); photoGrids.forEach(grid => { const images = grid.querySelectorAll('img'); let index = 0; function rotate() { images.forEach((img, i) => img.style.display = i === index ? 'block' : 'none'); index = (index + 1) % images.length; } setInterval(rotate, 3000); });此处forEach创建独立闭包，每个轮播实例拥有自己的index和images变量，避免全局变量污染。
4.3 事件委托优化性能：用父容器监听子元素 click，而非遍历绑定
tupian.js中图片点击放大功能，若为每张图单独绑定click事件：
// 低效写法（不推荐） images.forEach(img => { img.addEventListener('click', function() { // 放大逻辑 }); });正确做法是事件委托：
document.querySelector('.photo-grid').addEventListener('click', function(e) { if (e.target.tagName === 'IMG') { const modal = document.getElementById('image-modal'); const modalImg = document.getElementById('modal-img'); modalImg.src = e.target.src; modal.style.display = 'block'; } });e.target.tagName === 'IMG'确保只响应图片点击，e.target.src直接获取被点击图片的原始路径。这种方式无论新增多少图片，只需一次事件绑定，内存占用恒定。
5. 本地开发环境配置与常见故障排查：HBuilderX 中 HTML/CSS/JS 的协同调试
5.1 HBuilderX 配置要点：服务启动路径与实时预览必须匹配项目结构
在 HBuilderX 中打开本项目时，必须右键index.html→ 「设为首页」，否则内置服务器默认访问index.htm或default.html。启动服务后，地址栏显示http://127.0.0.1:8020/，此时：
- 所有
href、src路径以http://127.0.0.1:8020/为根； css/top_banner.css对应 URL 为http://127.0.0.1:8020/css/top_banner.css；- 若误将
index.html拖入css/目录下，则服务根路径变为http://127.0.0.1:8020/css/，导致所有相对路径失效。
验证方法：启动服务后，在浏览器地址栏手动拼接http://127.0.0.1:8020/images/009.jpg，若图片正常显示，证明路径配置正确。
5.2 四类高频故障的精准定位指令
当页面出现空白、样式丢失、JS 报错时，按以下顺序执行终端指令快速定位：
| 故障现象 | 定位指令 | 说明 |
|---|---|---|
| 页面完全空白 | curl -s http://127.0.0.1:8020/ | head -n 20 | 查看 HTML 响应头与前20行，确认<!doctype html>是否存在、<head>中 CSS/JS 路径是否拼写错误 |
| 图片 404 | curl -I http://127.0.0.1:8020/images/009.jpg | 返回HTTP/1.1 200 OK表示文件存在，404 Not Found则检查文件名大小写（Linux 区分大小写）及扩展名（.jfifvs.jpg） |
| CSS 未生效 | chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1 | 在 Chrome 地址栏粘贴此链接（需开启远程调试），进入 Elements 面板，右侧 Styles 栏查看.banner-content是否被top_banner.css正确应用，检查!important是否被更高优先级规则覆盖 |
JS 报错Cannot read property 'addEventListener' of null | grep -r "getElementById" js/ | 在项目根目录执行，定位哪一行 JS 试图操作不存在的 DOM 元素，再核对index.html中对应id是否拼写一致 |
5.3 一键返回顶部功能的 HTML+CSS+JS 三件套实现
项目未包含返回顶部按钮，但这是 Web 编程基础必练功能。在index.html底部添加：
<button id="back-to-top" style="position:fixed;bottom:20px;right:20px;width:40px;height:40px;border-radius:50%;background:#007bff;color:white;font-size:18px;box-shadow:0 2px 5px rgba(0,0,0,0.2);display:none;">↑</button>在tupian.js末尾追加：
const backToTop = document.getElementById('back-to-top'); window.addEventListener('scroll', () => { backToTop.style.display = window.scrollY > 300 ? 'block' : 'none'; }); backToTop.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); });window.scrollY > 300设定触发阈值，避免用户刚下滑就显示按钮；behavior: 'smooth'启用原生滚动动画，无需额外库。此功能完美融合 HTML 结构、CSS 定位、JS 事件监听三大知识点，是期末作业加分项的典型范式。
本文还有配套的精品资源，点击获取
