写出完整的 HTML 文档骨架
上一章的页面已经能打开。这一章我们不急着添加更多内容，先把文档骨架弄明白。骨架写对之后，后面的标题、图片、表格和表单才有稳定的位置。
一份可以反复使用的起始模板
把 index.html 调整为下面的结构。以后创建其他页面，也可以从这份模板开始。
html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>城市漫游指南</title>
</head>
<body>
<h1>城市漫游指南</h1>
<p>用一天时间，重新认识你生活的城市。</p>
</body>
</html>这段模板分为三层：文档类型声明、根元素 <html>，以及根元素里的 <head> 和 <body>。
文档类型和根元素
第一行是文档类型声明：
html
<!doctype html>它告诉浏览器按现代 HTML 标准解析页面。它不是普通元素，没有结束标签，也不负责显示内容。实际项目中，把它固定放在第一行即可。
接下来是整个文档的根元素：
html
<html lang="zh-CN">
<!-- head 和 body 都放在这里 -->
</html>一个页面只有一个 <html> 根元素。lang="zh-CN" 能帮助屏幕阅读器选择正确的发音，也能帮助搜索引擎理解页面语言。
head 放页面信息
<head> 里的内容通常不会直接显示在网页正文中。它保存的是给浏览器、搜索引擎和外部工具使用的信息。
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>城市漫游指南</title>
</head>这三行各有明确用途：
charset="UTF-8"规定字符编码，能正确表示中文和多数常用字符。viewport让页面宽度跟随设备宽度，为手机浏览做好准备。<title>决定浏览器标签页标题，也常被搜索结果和收藏夹使用。
charset 应尽量放在 <head> 前部。title 应具体说明当前页面，不能让四个页面全部叫“新页面”。
body 放访客看得到的内容
网页正文都放在 <body> 里：
html
<body>
<h1>城市漫游指南</h1>
<p>用一天时间，重新认识你生活的城市。</p>
</body>标题、段落、链接、图片、列表、表格和表单都属于正文。一个文档只有一个 <body>。
不要把页面标题 <title> 和正文标题 <h1> 混在一起。title 放在 head，主要出现在浏览器标签页；h1 放在 body，是页面里能看到的主标题。
嵌套必须保持清楚
HTML 元素可以包含其他元素，这叫嵌套。后打开的元素要先关闭：
html
<!-- 正确 -->
<p>推荐从<strong>运河路线</strong>开始。</p>
<!-- 错误：strong 和 p 的结束顺序交叉了 -->
<p>推荐从<strong>运河路线</p></strong>统一缩进能把父子关系显示出来。课程示例使用两个空格缩进。浏览器通常会尽力修复错误结构，但“页面看起来没坏”不等于代码正确；错误嵌套可能影响样式、脚本和辅助技术。
有些元素没有内容，不需要结束标签，常见的有：
html
<meta charset="UTF-8">
<img src="images/river.jpg" alt="傍晚的河岸步道">
<br>
<hr>
<input type="email" name="email">它们叫空元素。不要写成 <img>图片</img>。
用注释留下只给开发者看的说明
注释不会显示在页面正文中：
html
<!-- 首页主标题 -->
<h1>城市漫游指南</h1>注释适合说明暂时难懂的结构或待办事项，不要把密码、令牌、内部地址等敏感信息写进去。访客仍然可以通过“查看网页源代码”看到注释。
创建其余三个页面
现在复制 index.html 三次，得到下面的目录：
files
city-walk/
├── index.html
├── routes.html
├── schedule.html
└── contact.html先只改每个文件的 <title> 和 <h1>：
html
<!-- routes.html -->
<title>漫游路线｜城市漫游指南</title>
<h1>漫游路线</h1>
<!-- schedule.html -->
<title>一日行程｜城市漫游指南</title>
<h1>一日行程</h1>
<!-- contact.html -->
<title>报名参加｜城市漫游指南</title>
<h1>报名参加</h1>分别打开四个文件，确认浏览器标签页和页面主标题都对应当前内容。现在项目的多页面骨架已经建立，下一章开始填充首页正文。