# 项目四知识巩固题与参考答案

## 任务1：HTML
1. nav 与普通 div 有什么差别？
2. 写出引用同级 assets/canal.svg 的 img，要求说明非实景。
3. href="#about" 为什么没有跳转？给出两项排查。
4. 线路表格为什么需要 caption 和 th？

答案：1. nav 表示导航语义，div 没有特定语义。2. `<img src="assets/canal.svg" alt="运河原创示意图，非实景">`。3. 检查目标 id="about" 是否存在及大小写/拼写是否一致，检查 id 是否重复。4. caption 说明表格主题，th 表示表头，scope 协助辅助技术关联数据。

## 任务2：CSS
1. border-box 的 width 是否包含 padding 和 border？
2. 写出 700px 及以下将 .cards 改为单列的规则。
3. object-fit:cover 会不会裁切图片？
4. 导航在手机溢出时，除了缩小字号还有什么办法？

答案：1. 包含。2. `@media(max-width:700px){.cards{grid-template-columns:1fr;}}`。3. 会按比例填满并裁切，不拉伸。4. 换行、纵向排列或在导航容器内横向滚动；不要让整页溢出。

## 任务3：JavaScript 与 API
1. setInterval(updateClock,1000) 是否从网络校时？
2. fetch 返回 HTTP 500 一定会进入 catch 吗？
3. 为什么要先检查 current，再读 temperature_2m？
4. 缓存与离线历史缓存的区别是什么？
5. 快速切换城市导致旧请求后到达时应如何处理？

答案：1. 不会，Date 读取设备时钟，Asia/Shanghai 只是时区转换。2. 不一定；必须主动检查 response.ok 并抛出异常。3. 避免缺失字段和非数字导致错误界面。4. 缓存说明复用了以前真实响应；离线历史缓存还明确本次联网失败，两者都不能冒充当前实时请求。5. 保存请求序号，仅最后一次选择的响应能更新界面，或主动中止旧请求。

## 任务4：表单与本地存储
1. preventDefault 阻止了什么？
2. localStorage 能直接保存数组吗？
3. get 与 getAll 读取兴趣复选框有何区别？
4. 编号换电脑为什么查不到？
5. 备注应使用 innerHTML 还是 textContent？为什么？
6. 清空查询、删除登记、清空所有 localStorage 是否同一操作？

答案：1. 表单默认提交/导航行为。2. 不能，需 JSON.stringify 序列化，读取后 JSON.parse。3. get 取首项，getAll 返回同名控件的全部值。4. 数据只在本浏览器当前来源存储。5. textContent，输入只作为文字，避免 HTML 注入。6. 不同：清空查询不删数据；removeItem 只删登记键；clear 会删该来源所有键，可能误删天气及其他数据，不应用于本练习。

## 综合实践（20分）
新增一个生态观察卡片（4分），手机下保持单列（4分），新增可读天气状态说明（4分），完成一次登记→刷新→查询→取消删除→确认删除录像或截图（8分）。不得写真实个人信息，不得编造景区票价或开放状态。