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

2026-09-23 05:31:49 发布于人民日报

网站代码基础入门可以从一个最小网页开始：先用 HTML 写出内容结构，再用 CSS 调整布局和样式，最后用 JavaScript 增加点击、校验和数据交互。准备一个免费的文本编辑器和浏览器即可完成第一次练习，不需要一开始就购买服务器或学习复杂框架。完成本文步骤后，你将得到一个能在浏览器中打开、具备基本交互，并且知道何时需要接入接口的简单网站。

网站代码基础入门从哪里开始？

新手最容易把“网站”理解成一整套复杂系统，其实网页前端通常可以先拆成三层。HTML负责标题、段落、按钮、表单等内容结构；CSS负责颜色、间距、宽度和响应式布局；JavaScript负责点击事件、数据校验和页面状态变化。

只展示固定内容时：HTML 加 CSS 就可以完成个人介绍页、产品说明页或静态活动页。
需要点击后改变内容时：加入 JavaScript，例如展开菜单、切换标签和提交前校验。
需要保存用户数据时：通常还要有后端服务和接口，例如登录、评论、订单或数据库查询。

建议先建立一个名为 my-site 的文件夹，再创建下面三个文件。文件名和路径要保持一致，否则浏览器可能找不到样式或脚本。

my-site/
├─ index.html
├─ style.css
└─ script.js

学习时可以使用任意能够保存纯文本的编辑器，以及常见浏览器。把代码保存后，直接双击 index.html，就能看到第一个本地网页。这个方式适合入门和静态页面练习；如果后续使用模块化代码、接口代理或构建工具，再改用本地开发服务器。

怎样按步骤写出第一个可运行页面？

第一步：先写 HTML 内容结构

打开 index.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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<h1>我的第一个网页</h1>
<p>用 HTML、CSS 和 JavaScript 完成基础练习。</p>
</header>
<main class="container">
<section class="card">
<h2>学习目标</h2>
<p>掌握页面结构、基本样式和按钮交互。</p>
<button id="messageButton">点击查看提示</button>
<p id="message" aria-live="polite"></p>
</section>
<section class="card">
<h2>留下称呼</h2>
<form id="nameForm">
<label for="name">你的名字</label>
<input id="name" name="name" required>
<button type="submit">提交</button>
</form>
<p id="result" aria-live="polite"></p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>

这里的 id 是 JavaScript 查找元素的标识，class 主要用于 CSS 统一设置样式，label 则能让表单字段更容易理解和操作。写 HTML 时，先保证标签嵌套完整，再考虑页面是否好看。

第二步：用 CSS 调整网页外观

打开 style.css，加入以下样式。CSS 的选择器会根据标签名、类名或 id 找到 HTML 元素，并为其设置显示效果。

* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, "Microsoft YaHei", sans-serif;
color: #24324a;
background: #f4f7fb;
}
.site-header {
padding: 48px 20px;
text-align: center;
color: white;
background: #2563eb;
}
.container {
width: min(92%, 760px);
margin: 28px auto;
}
.card {
margin-bottom: 20px;
padding: 24px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}
button {
padding: 10px 16px;
border: 0;
border-radius: 6px;
color: white;
background: #2563eb;
cursor: pointer;
}
input {
display: block;
width: 100%;
max-width: 360px;
margin: 8px 0 14px;
padding: 10px;
border: 1px solid #cbd5e1;
border-radius: 6px;
}
@media (max-width: 480px) {
.site-header {
padding: 32px 16px;
}
.card {
padding: 18px;
}
}

box-sizing: border-box可以让宽度计算更直观，max-width能避免内容在大屏幕上过宽，媒体查询则用于调整手机屏幕下的间距。初学时不必记住所有 CSS 属性，先观察“选择器—属性—效果”的对应关系。

第三步：用 JavaScript 增加交互

打开 script.js，为按钮和表单添加事件。下面的代码只在当前页面中处理数据，不会自动把名字发送到服务器。

const messageButton = document.querySelector("#messageButton");
const message = document.querySelector("#message");
const nameForm = document.querySelector("#nameForm");
const nameInput = document.querySelector("#name");
const result = document.querySelector("#result");
messageButton.addEventListener("click", () => {
message.textContent = "按钮交互已经生效。";
});
nameForm.addEventListener("submit", (event) => {
event.preventDefault();
const name = nameInput.value.trim();
if (!name) {
result.textContent = "请输入称呼后再提交。";
return;
}
result.textContent = `你好，${name}！`;
});

保存三个文件后重新打开或刷新 index.html。点击按钮应显示提示，提交空表单时应显示校验信息，输入名字后应显示问候语。如果页面没有变化，先检查文件是否真的保存，再按浏览器开发者工具中的错误提示检查路径、拼写和括号。

页面能打开之后，什么时候需要接口？

上面的示例是前端本地交互，刷新页面后数据会消失。如果需求是“提交后保存”“从服务器读取商品列表”或“登录后返回用户信息”，就需要后端提供接口。此时不能只在前端假设接口存在，而要先明确双方遵守的接口契约。

静态页面与接口页面的适用条件
需求情况	适合的实现	主要限制
固定文字、图片和简单展示	HTML + CSS	内容更新需要修改文件
仅在浏览器内切换或校验	HTML + CSS + JavaScript	数据通常不能长期保存
登录、查询、保存、多人共享数据	前端 + 后端接口 + 数据库	需要明确请求、响应和错误规则

一个接口契约至少要写清楚请求方法、路径、参数、成功响应、失败响应和身份要求。例如，假设后端约定提供一个商品查询接口，其契约可以写成：

请求方法：GET
请求路径：/api/products
查询参数：keyword，可选，字符串
成功响应：
{
"code": 0,
"data": [
{ "id": 1, "name": "练习商品", "price": 19.9 }
]
}
失败响应：
{
"code": 400,
"message": "keyword 参数格式不正确"
}

这只是接口设计示例，不代表当前页面已经拥有该地址。只有后端实际部署了相同路径，并按照约定返回数据，前端请求才有可验证的结果。当前端需要调用这个接口时，可以使用类似下面的代码：

async function loadProducts(keyword = "") {
const params = new URLSearchParams({ keyword });
const response = await fetch(`/api/products?${params}`);
if (!response.ok) {
throw new Error(`HTTP 状态异常：${response.status}`);
}
const result = await response.json();
if (result.code !== 0) {
throw new Error(result.message || "业务处理失败");
}
return result.data;
}

如果后端规定使用 POST，前端就不能继续用 GET；如果返回字段叫 items，前端也不能直接读取 data。接口联调时应以实际契约和真实响应为准，不要因为示例代码可以运行，就认为服务器已经具备对应能力。