代码及注释 | Notion

太棒了！下面把 BOM 操作示例 拆成最小可运行组件：bom.html、style.css、script.js，并逐行中文注释。该组件覆盖“DOM 与 BOM 操作、事件绑定、window\.location、window\.scrollTo”等课程标准里的能力点。

1) `bom.html`

<!DOCTYPE html> <!-- 声明 HTML5 文档类型，确保浏览器以标准模式渲染 -->
<html lang="zh-CN"> <!-- 页面主语言为中文，便于读屏与拼写检查 -->
<head> <!-- 文档头部区域（元信息、样式等） -->
  <meta charset="UTF-8"> <!-- 指定字符编码为 UTF-8，避免中文乱码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 移动端视口，保证响应式显示 -->
  <title>BOM 操作示例</title> <!-- 浏览器标签栏标题 -->
  <link rel="stylesheet" href="style.css"> <!-- 引入外部样式表 -->
</head>
<body> <!-- 页面主体开始 -->

  <!-- 外层卡片：与截图一致的“模块”视觉区块 -->
  <section class="card"> <!-- 语义化分区，方便无障碍与样式控制 -->
    <h2>BOM 操作示例</h2> <!-- 模块标题 -->

    <!-- 当前地址行：左侧文字 + 右侧可点击链接（显示当前 URL） -->
    <p class="url-row"> <!-- 一行文字区域 -->
      <span>当前地址：</span> <!-- 提示文案 -->
      <!-- 用 a 标签展示并可点击当前地址；文本内容由 JS 动态填充 -->
      <a id="currentUrl" href="#" aria-label="当前页面地址"></a> <!-- href 稍后用 JS 设置为真实地址 -->
    </p>

    <!-- 操作按钮区：两个大按钮，分别“返回顶部”“跳转到百度” -->
    <div class="btn-group"> <!-- 按钮容器，便于统一留白与响应式 -->
      <button id="toTop" class="btn btn-outline">返回顶部</button> <!-- 返回顶部按钮 -->
      <!-- 链接样式做成按钮形态；默认在新标签页打开百度 -->
      <a id="toBaidu" class="btn btn-outline" href="<https://www.baidu.com>" target="_blank" rel="noopener">
        跳转到百度
      </a>
    </div>
  </section>

  <script src="script.js"></script> <!-- 引入交互脚本 -->
</body>
</html>

2) `style.css`

/* ========== 基础重置 & 页面基调 ========== */
* { box-sizing: border-box; }               /* 让 padding/border 计入元素总宽度，布局更直观 */
body {
  margin: 0;                                /* 移除默认外边距，便于全宽布局 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
                                            /* 选择常见系统字体，保证中英混排可读性 */
  color: #212529;                           /* 近黑色正文 */
  background: #fff;                         /* 纯白背景，干净清晰 */
  line-height: 1.6;                         /* 提升文本可读性 */
  padding: 24px;                            /* 页面内边距，避免内容贴边 */
}

/* ========== 卡片容器 ========== */
.card {
  border: 1px solid #dee2e6;                /* 淡灰边框，形成模块感 */
  border-radius: 12px;                      /* 圆角与现代风格 */
  padding: 20px;                            /* 内边距 */
  max-width: 1100px;                        /* 适度限制宽度，便于阅读 */
  margin: 0 auto;                           /* 居中显示 */
  background: #fff;                         /* 白色卡片 */
}

/* 标题样式（与截图风格接近） */
.card > h2 {
  margin: 0 0 16px;                         /* 标题与内容的间距 */
  font-size: 28px;                          /* 稍大字号 */
  font-weight: 700;                         /* 加粗强调 */
}

/* 当前地址行：链接使用更醒目的颜色 */
.url-row {
  margin: 12px 0 16px;                      /* 上下间距 */
  font-size: 18px;                          /* 稍大字号便于展示 URL */
}
.url-row a {
  color: #d63384;                           /* 品红色系，类似截图中的醒目链接 */
  text-decoration: none;                    /* 去下划线，视觉更整洁 */
  word-break: break-all;                    /* URL 太长时换行折断 */
}

/* ========== 按钮样式（轮廓按钮） ========== */
.btn-group {
  display: grid;                            /* 网格布局便于做“整行按钮” */
  gap: 12px;                                /* 两个按钮之间的间距 */
}
.btn {
  display: inline-flex;                     /* 行内弹性盒，便于水平垂直居中 */
  align-items: center;                      /* 垂直居中 */
  justify-content: center;                  /* 水平居中 */
  width: 100%;                              /* 占满整行（与截图一致） */
  height: 48px;                             /* 按钮高度 */
  border-radius: 8px;                       /* 圆角按钮 */
  font-size: 18px;                          /* 字号稍大 */
  text-decoration: none;                    /* a 标签也当按钮用，去下划线 */
  cursor: pointer;                          /* 悬停显示手型 */
  transition: background .2s, color .2s, border-color .2s;
                                            /* 交互过渡动画更顺滑 */
}
.btn-outline {
  background: #fff;                         /* 轮廓按钮为白底 */
  color: #0d6efd;                           /* 文本为主题蓝 */
  border: 1px solid #0d6efd;                /* 蓝色描边 */
}
.btn-outline:hover {
  background: #0d6efd10;                    /* 悬停轻微上色（10% 透明度） */
}

3) `script.js`

// ========== 1. 获取页面元素 ==========
const urlAnchor = document.getElementById('currentUrl'); // 显示“当前地址”的 <a> 元素
const toTopBtn  = document.getElementById('toTop');      // “返回顶部”按钮
const toBaidu   = document.getElementById('toBaidu');    // “跳转到百度”链接（样式为按钮）

// ========== 2. 填充当前地址 ==========
const currentHref = window.location.href;                // 通过 BOM 的 window.location 获取当前完整地址
urlAnchor.textContent = currentHref;                     // 把地址作为可读文本放进去（避免 XSS 执行）
urlAnchor.href = currentHref;                            // 同时把链接指向当前页，便于右键复制/打开

// ========== 3. 返回顶部 ==========
toTopBtn.addEventListener('click', () => {               // 监听按钮点击事件
  // scrollTo：把滚动条移动到指定位置，这里是页面顶部（0, 0）
  // behavior: 'smooth' 让滚动有平滑动画，更友好
  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
});

// ========== 4. 跳转到百度（默认在新标签页，由 HTML 的 target="_blank" 控制） ==========
// 这里无需写 JS；但如果希望在同标签页中跳转，可以改用下面的写法：
// toBaidu.addEventListener('click', (e) => {
//   e.preventDefault();                                   // 阻止 a 标签默认的新开行为
//   window.location.href = toBaidu.href;                  // 同窗口跳转到百度
// });

教学要点对齐

BOM：window.location.href 读取/设置当前地址，window.scrollTo() 控制滚动。
DOM：getElementById 选取元素、事件绑定、动态修改节点文本与属性。
DevTools：Elements 面板观察按钮/链接状态与样式变化，Console 里手动调用 scrollTo、查看 location。以上与《课程标准》中的“DOM 与 BOM 操作”“调试与基础安全”的能力点一致。

需要我把这 3 个文件打包成一个可下载的压缩包，或者再补一份“45 分钟课堂流程（导入→演示→操作→总结→提交物）”吗？

1) bom.html

2) style.css

3) script.js

教学要点对齐

1) `bom.html`

2) `style.css`

3) `script.js`