网站代码常见错误排查：从复现问题到修复验证

网站代码基础入门，最适合从一个能在浏览器中打开的静态网页开始。先用 HTML 写出页面结构，再用 CSS 调整外观，最后用 JavaScript 增加交互。下面会从文件创建、代码连接、浏览器运行到接口约定，带你完成一个不依赖付费工具的基础网站，并说明每段代码为什么这样写。

一、先理解网站代码的三层关系

一个基础网站通常由三类代码配合完成。HTML 负责“页面有什么”，例如标题、段落、按钮和表单；CSS 负责“页面怎么显示”，例如颜色、间距、宽度和布局；JavaScript 负责“用户操作后发生什么”，例如点击按钮后修改文字、校验输入或请求后端数据。

HTML：提供页面结构和可识别的元素。
CSS：通过选择器找到 HTML 元素，再设置视觉样式。
JavaScript：通过元素的 id、class 或标签取得页面节点，并执行交互逻辑。

这三者之间存在清晰的代码契约：HTML 中的元素名称或标识需要与 CSS、JavaScript 中的选择器保持一致。例如 HTML 写了 id="message"，JavaScript 才能通过 document.querySelector('#message') 找到它。如果名称不一致，代码通常不会按预期运行。

二、准备免费的基础开发环境

入门阶段不需要购买专用软件。准备一个现代浏览器、一个纯文本编辑器和一个用于保存文件的文件夹即可。Windows 可以使用记事本或其他免费编辑器，macOS 和 Linux 也可以使用系统自带文本编辑器。重点是保存文件时使用正确的扩展名，而不是把 HTML 当成普通文本文件保存。

新建一个名为 my-site 的文件夹，并在里面创建以下三个文件：

index.html：网站的页面入口。
style.css：页面样式文件。
script.js：页面交互文件。

浏览器打开文件夹中的 index.html 后，会先解析 HTML，再根据 link 标签加载 CSS，根据 script 标签加载 JavaScript。文件名可以变化，但引用路径必须准确；如果文件放在不同文件夹，HTML 中的路径也要同步修改。

三、从 index.html 写出第一个网页

把下面的内容保存为 index.html。代码使用了标准 HTML 结构，适合直接在浏览器中打开。

<!doctype html>

<head>

  <title>我的第一个网页</title>

</head>

<body>

    <h1>我的第一个网页</h1>

    <p id="message">点击按钮查看页面变化</p>

    <button id="changeBtn" type="button">点击修改文字</button>

  </main>

</body>

</html>

doctype 用于声明文档类型，lang="zh-CN" 表示页面主要使用中文。charset="UTF-8" 可以正确处理常见中文字符。viewport 设置让页面在手机屏幕上按照设备宽度显示。link 标签负责引入 CSS，script 标签负责引入 JavaScript，defer 表示 HTML 解析完成后再执行脚本，能减少脚本找不到页面元素的情况。

四、用 CSS 设置基础布局

把下面内容保存为 style.css。这里没有使用框架，便于新手观察每条样式如何影响页面。

body {

  margin: 0;

  min-height: 100vh;

  display: grid;

  place-items: center;

  background: #f2f5f8;

  font-family: Arial, sans-serif;

}

.card {

  width: min(90%, 420px);

  padding: 28px;

  background: white;

  border-radius: 12px;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

  text-align: center;

}

button {

  padding: 10px 16px;

  border: 0;

  border-radius: 6px;

  background: #2563eb;

  color: white;

  cursor: pointer;

}

这里的 body 是页面主体选择器，display: grid 和 place-items: center 让卡片水平、垂直居中。.card 中的点号表示选择 class 为 card 的元素，HTML 中的 class="card" 与它正好对应。样式修改后，保存文件并刷新浏览器即可看到结果。

五、用 JavaScript 添加可验证的交互

把下面内容保存为 script.js。它做的事情很明确：找到按钮和段落，监听按钮点击事件，然后修改段落的文字。

const button = document.querySelector('#changeBtn');

const message = document.querySelector('#message');

button.addEventListener('click', () => {

  message.textContent = '网页已经执行了 JavaScript。';

});

querySelector 会按照 CSS 选择器查找页面元素，#changeBtn 对应 HTML 中的按钮 id，#message 对应段落 id。addEventListener 建立“点击”与处理函数之间的关系，textContent 则负责修改文字内容。

这个例子可以直接验证代码是否连接正确：打开网页时看到原始文字，点击按钮后文字发生变化。如果按钮没有反应，应依次检查三件事：script.js 文件名是否正确、HTML 中的 id 是否与 JavaScript 完全一致、浏览器控制台是否显示语法错误。大小写、引号和括号都可能影响执行结果。

六、理解页面与接口之间的契约

仅使用 HTML、CSS 和 JavaScript 时，这个网页可以完全在本地运行，不需要后端接口。如果要实现登录、保存订单、查询商品或读取数据库，就需要前端与服务器约定接口。接口不是“写一个 fetch 就自动存在”，前端请求的地址、请求方法和返回数据必须由服务端实际提供。

一个清晰的接口契约至少应说明以下内容：

请求地址：例如服务端约定的接口路径，而不是随意填写一个不存在的地址。
请求方法：查询通常使用 GET，创建数据通常使用 POST，具体以服务端约定为准。
参数位置：参数可能放在查询字符串、请求体或请求头中。
返回格式：常见格式是 JSON，但字段名和数据类型必须以接口文档为准。
错误处理：需要区分网络失败、HTTP 状态错误和返回数据不符合预期等情况。

下面是一段接口调用结构示例。/api/profile 只是占位路径，只有在服务端确实实现了同一路径和返回格式时才能获得真实数据。

fetch('/api/profile', {

  method: 'GET',

  headers: { 'Accept': 'application/json' }

})

  .then(response => {

    if (!response.ok) throw new Error('请求失败');

    return response.json();

  })

  .then(data => {

    console.log(data);

  })

  .catch(error => {

    console.error(error);

  });

这段代码只表达了调用流程，并没有虚构接口返回字段。若服务端返回的数据是 { "name": "张三" }，前端才可以根据实际字段使用 data.name；如果服务端返回的是数组或字段名称不同，处理方式也必须相应改变。

七、从本地运行到逐步扩展

完成三个文件后，双击 index.html，先确认页面结构和样式，再点击按钮验证 JavaScript。每次只修改一个部分，能够更快定位问题。可以按照以下顺序继续练习：

在 HTML 中增加输入框，并为它设置唯一 id。
在 JavaScript 中读取输入值，判断内容是否为空。
用 CSS 设置输入框、提示文字和错误状态。
把静态文字替换成数组中的多条数据，练习循环生成页面内容。
最后再接入已经明确文档、路径和返回结构的后端接口。

遇到页面空白时，先查看 HTML 标签是否闭合；样式没有生效时，检查 CSS 文件路径和选择器；交互没有反应时，检查脚本路径、元素 id 和浏览器控制台。只要保持 HTML 结构、CSS 选择器、JavaScript 逻辑以及接口字段之间的一致性，就能从这个最小示例逐步扩展出导航栏、表单、列表页和基础管理页面。