激情与速度6

四、理清文件之间的“引用关系”

理解网页作业的关键是知道“哪个文件负责什么”。比如：

• 页面的文字内容写在html文件里。
• 页面的颜色、大小、间距写在css文件里。
• 页面的动态行为（如点击按钮弹出介绍）写在js文件里。
• 页面的配图放在images文件夹里，并在html中用<img>标签引用。

在html代码中，引用css文件用的是<link href="css/style.css">，引用图片用的是<img src="images/nanchang.jpg">。如果路径写错了，图片或样式就加载不出来，这是初学者常遇到的问题。

五、一个小建议：先理清楚，再动手改

拿到一份成品源文件后，建议先用浏览器打开index.html看看效果，然后对照文件夹和代码，逐步找到“导航文字在哪一行”“背景图片在哪里引用”。对于零基础同学，不用急于理解每一行代码，先建立起“页面 == 结构 + 样式 + 资源”的思维模式，后续学习就会顺利很多。

理解了这些，你就能轻松拆解任何一份HTML网页设计作业的源文件结构了。

从零开始理解HTML网页设计作业的文件结构

很多刚接触HTML的同学，拿到一份完整的网页设计作业成品源文件时，第一反应往往是“文件好多，不知道从哪里看起”。其实，只要掌握几个关键点，理解结构并不难。下面我们以一份典型的江西南昌地方文化主题网页作业为例，带你一步步梳理。

一、先搞清楚“根目录”和“文件夹”

通常，一份网页作业源文件会打包成一个文件夹，这个文件夹就是整个网站的“根目录”。你会在里面看到几个常见的组成部分：

• index.html：这是网站的首页，也是大多数作业默认的入口文件。双击它，就能在浏览器里看到页面效果。
• css文件夹：存放所有样式文件（后缀为.css）。比如style.css里定义了字体颜色、页面布局、背景图片等。想改外观，主要修改这里。
• js文件夹：存放JavaScript文件（后缀为.js）。如果页面有轮播图、点击弹窗等动态效果，代码就写在这里。
• images文件夹：存放页面用到的图片。比如南昌滕王阁的照片、八一广场的素材等。
• 其他页面文件：比如“about.html”（关于页）、“culture.html”（文化页），它们和index.html平级，通过链接互相跳转。

二、首页文件（index.html）的内部骨架

用任意文本编辑器（如记事本、VS Code）打开index.html，你会看到一堆尖括号标签。不要慌，我们只看关键结构：

1. DOCTYPE声明和html标签：文件最顶上一行，告诉浏览器“这是一个HTML文档”。
2. head区域：这里放页面的“大脑信息”，比如标题（title标签，显示在浏览器标签页上）、链接到css样式文件（link标签）、页面编码设置等。这部分在浏览器里不直接显示。
3. body区域：所有用户能看到的内容都写在这里。通常包括：
   • 顶部导航栏（nav或header部分）——包含网站名称、菜单链接。
   • 主体内容区（main或section部分）——比如介绍南昌历史的文字、景点列表。
   • 底部信息（footer部分）——版权声明、联系方式等。

三、常见布局如何对应到代码

如果你看到页面上有“左边图片、右边文字”的排版，代码里一般会用