这门课不把 HTML 拆成一堆互不相干的标签。我们会从一个空文件开始，连续完成同一个项目：一份名为“城市漫游指南”的多页面网站。每学到一种结构，就立刻把它加进项目。最后你会得到首页、路线页、行程页和报名页，并知道怎样检查它们。
这一章先做最小版本。完成后，你会亲手创建一个 HTML 文件，用浏览器打开它，并能解释浏览器究竟读取了什么。
我们准备做的网站包含四个页面：
index.html：首页，告诉访客网站是做什么的。routes.html：路线页，展示图片、路线说明、音视频和地图。schedule.html：行程页，用表格安排一天的时间。contact.html：报名页，用表单收集访客填写的信息。课程会始终围绕这四个文件推进。你不用等到最后才开始“做项目”，现在写下的第一行代码就是项目的一部分。
HTML 负责描述内容的结构和含义。CSS 负责外观，JavaScript 负责更复杂的交互。这门课先把结构写扎实，所以页面一开始看起来很朴素，这是正常结果。
在你容易找到的位置新建一个文件夹，命名为 city-walk。再在里面新建一个纯文本文件，把文件名改成 index.html。
city-walk/
└── index.html文件扩展名必须是 .html，不能是 .html.txt。如果系统隐藏了扩展名，请先打开“显示文件扩展名”。编辑器可以使用 VS Code、记事本或任何纯文本编辑器，不要使用会自动加入排版格式的文字处理软件。
打开 index.html，输入下面的内容并保存：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>城市漫游指南</title>
</head>
<body>
<h1>城市漫游指南</h1>
<p>用一天时间，重新认识你生活的城市。</p>
</body>
</html>双击 index.html，或把它拖进浏览器。浏览器标签页会显示“城市漫游指南”，页面里会出现一个标题和一段文字。
如果页面没有变化，按下面的顺序检查：
确认刚才编辑的文件已经保存。很多“浏览器没反应”的问题只是忘了保存。
确认浏览器打开的是 city-walk/index.html，而不是另一个同名文件。
刷新页面。浏览器不会自动知道本地文件刚刚被你修改过。
HTML 是 HyperText Markup Language 的缩写，中文通常译作“超文本标记语言”。“标记”指的是用标签说明内容的角色。例如：
<h1>城市漫游指南</h1><h1> 是开始标签，</h1> 是结束标签，中间的文字是内容。三者合在一起构成一个 HTML 元素。浏览器看到 h1，就知道这段文字是页面的主标题。
再看这一行：
<html lang="zh-CN">lang="zh-CN" 是属性。属性为元素补充信息，这里告诉浏览器和辅助技术：当前文档的主要语言是简体中文。
你暂时不需要记住示例中的所有标签。下一章会逐层拆开这份文档。现在先建立一个准确的认识：HTML 不是用来“画页面”的，它把一份内容标记成标题、段落、链接、图片、表格或表单，浏览器再根据这些标记构建页面。
把段落改成你所在城市的真实描述，再增加一个二级标题和一段文字：
<body>
<h1>城市漫游指南</h1>
<p>用一天时间，重新认识杭州。</p>
<h2>今天从哪里出发</h2>
<p>我们从运河边出发，步行经过老街，最后在公园结束行程。</p>
</body>保存、刷新，再观察页面。你已经完成了最基本的开发循环：修改源文件、保存、在浏览器检查结果。
这一章的项目结果只有一个文件，但它可以被浏览器正确读取。下一章我们会把这份文档的骨架写完整，并弄清每一层为什么存在。