网站代码基础入门：免费分步搭建可运行网页

2026-09-22 18:02:29 发布于凤凰网

网站代码基础入门，最适合从一个能在浏览器中打开的静态网页开始：用 HTML 编写页面结构，用 CSS 调整外观，用 JavaScript 增加交互。如果后续还需要登录、保存数据或读取商品信息，再按照接口契约连接后端。下面按不同开发目标分支说明，使用浏览器和免费代码编辑器即可完成基础练习。

先确定起点：静态网页还是数据网站

如果只是制作个人介绍页、活动展示页或产品落地页，HTML、CSS、JavaScript 就能完成主要功能，不需要先学习数据库和服务器。如果页面需要账号登录、订单提交、评论保存或实时数据，则必须增加后端接口，前端代码本身不能凭空生成真实数据。

只展示内容：先学习文件结构、标签、样式和按钮事件，目标是让页面正常打开并能交互。
需要读写数据：在静态页面基础上学习请求方法、接口地址、参数格式、状态码和返回 JSON，目标是让前后端按照同一份约定通信。

如果目标是先做静态页面：从三个文件开始

新建一个文件夹，例如 my-website，在其中建立三个文件：index.html、style.css 和 script.js。其中 index.html 是浏览器默认打开的入口，style.css 管理页面外观，script.js 负责点击、输入和显示隐藏等行为。

第 1 步：写出 HTML 页面结构

先把内容分成标题、说明文字和操作区域。HTML 标签的选择应当对应内容含义，而不是只为了调整位置。标题使用 h1，普通说明使用 p，按钮使用 button，这样页面结构更清晰，也便于后续维护。

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="card">
<h1>欢迎来到我的网页</h1>
<p>这是一个网站代码基础入门练习。</p>
<button id="helloBtn">点击查看提示</button>
<p id="message"></p>
</main>
<script src="script.js"></script>
</body>
</html>

第 2 步：用 CSS 处理可读性和布局

基础样式不必一开始追求复杂效果，先保证文字清楚、内容有间距、按钮容易识别。CSS 通过选择器找到 HTML 元素，再为它设置颜色、宽度、内边距和布局方式。

* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 40px 16px;
font-family: Arial, sans-serif;
background: #f3f4f6;
}
.card {
max-width: 520px;
margin: 0 auto;
padding: 28px;
background: #ffffff;
border-radius: 12px;
}
button {
padding: 10px 16px;
border: 0;
border-radius: 6px;
color: #ffffff;
background: #2563eb;
cursor: pointer;
}

第 3 步：添加一个可验证的交互

JavaScript 的入门重点是找到元素、监听事件、修改页面内容。下面的代码不依赖任何接口，保存文件后即可验证：点击按钮，页面中的提示文字会发生变化。

const button = document.querySelector('#helloBtn');
const message = document.querySelector('#message');
button.addEventListener('click', function () {
message.textContent = '按钮已经正常工作！';
});

完成后直接双击 index.html，浏览器应当能显示页面。点击按钮没有反应时，优先检查三个文件是否位于同一目录、文件名大小写是否一致，以及 index.html 中的 href 和 src 路径是否写对。

如果页面需要保存或读取数据：先定义接口契约

当页面需要商品列表、用户资料或表单提交时，重点就从“页面能否显示”变成“前端和后端是否遵守同一份约定”。接口地址、请求方法、参数名称、返回字段和错误状态都必须由实际后端提供或双方明确约定，不能因为前端写了 fetch，就认为接口已经存在。

下面是一个示例接口契约，仅用于说明开发时应确认的内容，实际地址和字段必须替换成项目后端真实提供的定义：

商品列表接口示例契约
项目	约定示例
请求方法	GET
请求路径	/api/products
请求参数	可选 page、keyword
成功状态	200
返回结构	包含 items 数组和 total 数字
常见错误	401 未登录、404 资源不存在、500 服务异常

前端请求可以按照这份约定处理，但只有后端确实提供对应路径时才会成功：

fetch('/api/products', {
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
.then(function (response) {
if (!response.ok) {
throw new Error('请求失败：HTTP ' + response.status);
}
return response.json();
})
.then(function (data) {
const products = data.items || [];
console.log('收到商品数量：' + products.length);
})
.catch(function (error) {
console.error(error.message);
});

如果接口需要提交表单，必须继续确认请求体格式。例如后端要求 JSON，前端通常要设置 Content-Type: application/json，并使用 JSON.stringify 处理对象；如果后端要求表单格式，写法就不同。不要只凭字段名称猜测接口，应该以接口文档、后端代码或双方确认的契约为准。