访客主要阅读 body，浏览器和搜索引擎还会读取 head。课程开始时我们只写了字符编码、视口和标题，现在要为每个页面补上准确摘要，并理解样式、图标和脚本资源怎样接入。
标题应该先说明当前页面，再说明站点名称：
<!-- index.html -->
<title>城市漫游指南｜周末步行路线</title>
<!-- routes.html -->
<title>漫游路线｜城市漫游指南</title>
<!-- schedule.html -->
<title>一日行程｜城市漫游指南</title>
<!-- contact.html -->
<title>报名参加｜城市漫游指南</title>四个页面使用相同标题，会让浏览器标签页、收藏夹和搜索结果难以区分。标题要具体，但不要堆满关键词。
页面摘要使用 meta：
<meta
name="description"
content="查看适合周末完成的城市步行路线，包括距离、预计用时、沿途地点和出发提醒。"
>摘要不直接显示在正文中，搜索引擎可能把它用于搜索结果，但不保证一定采用。它仍然应该准确描述当前页面，而不是写宣传口号。
可以为四个页面分别写：
<!-- 首页 -->
<meta name="description" content="城市漫游指南提供可在一天内完成的河岸、老街和公园步行路线。">
<!-- 路线页 -->
<meta name="description" content="查看城市漫游路线的距离、预计用时、经过地点、图片和出发提醒。">
<!-- 行程页 -->
<meta name="description" content="查看运河慢行线从集合到结束的时间、地点和活动安排。">
<!-- 报名页 -->
<meta name="description" content="填写城市漫游活动报名信息，选择日期、路线和同行人数。">每个页面保留这一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">没有它，移动浏览器可能先按较宽的虚拟画布排版，再把整页缩小。它不会自动让所有内容适配手机，但会提供正确的布局视口。
准备一个图标文件 images/favicon.png 后，可以这样引用：
<link rel="icon" href="images/favicon.png" type="image/png">以后学习 CSS 时，可以创建 styles.css 并在每页接入：
<link rel="stylesheet" href="styles.css">link 是空元素。rel 说明当前文档与目标资源的关系，href 是资源路径。只有真正创建了文件再加入链接，避免页面产生无意义的 404 请求。
这门课不写 JavaScript，但你需要认得常见接入方式：
<script src="scripts/main.js" defer></script>defer 让浏览器下载脚本时继续解析 HTML，并在文档解析完成后按顺序执行脚本。script 不是空元素，即使使用 src 也要有结束标签。
不要从不明来源复制脚本地址。脚本能在页面环境中执行代码，应像依赖其他程序一样核对来源和用途。
routes.html 的完整 head 可以写成：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
name="description"
content="查看城市漫游路线的距离、预计用时、经过地点、图片和出发提醒。"
>
<title>漫游路线｜城市漫游指南</title>
<link rel="icon" href="images/favicon.png" type="image/png">
</head>把同样的基础结构应用到其余页面，同时替换各自的 title 和 description。
head 中标签的顺序不完全固定。常见做法是先写字符编码和视口，再写摘要与标题，最后接入图标、样式和脚本。关键是每项内容准确，路径真实存在。
打开四个页面，逐项确认：
下一章我们会继续完善路线页，加入原生音频、视频和字幕。它们同样依赖准确的文件路径。