Web前端开发教程：创建HTMLCSSJS页面并运行交互效果

作者：袖梨 2026-09-01

在前端开发内容学习中，Web前端开发教程：创建HTML CSS JS页面并运行交互效果是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

本文用一个最小页面完成 Web 前端开发入门闭环：创建 index.html、style.css 和 script.js 三个文件，分别负责页面结构、视觉样式和按钮交互，最后用浏览器打开页面验证点击效果。完成后，你会知道前端页面为什么要拆成三类文件，以及如何从静态页面逐步加入交互逻辑。

完成效果预览：点击按钮后页面文字会发生变化

前端开发不是只背 HTML、CSS、JavaScript 的概念，而是把三者组合成可运行页面。本文的验收结果很明确：浏览器能打开本地 HTML 页面，按钮有样式，点击按钮后提示文字从“等待点击”变成“按钮已点击”。

练习时建议新建一个空文件夹，只放本文需要的三个文件。这样文件关系更清楚，也便于判断问题出在结构、样式还是脚本引用上。

HTML、CSS、JavaScript 三文件连接到浏览器预览的前端开发工作流概念图

HTML 负责结构，CSS 负责样式，JavaScript 负责交互，最终在浏览器中验证效果

创建前端练习目录

先在桌面或工作目录中新建一个文件夹，例如 frontend-demo。在这个目录里创建三个文件：index.html、style.css 和 script.js。

这三个文件的职责不同。HTML 负责写页面元素，CSS 负责控制颜色、间距和布局，JavaScript 负责响应用户操作。入门阶段先把职责分开，后面学习框架时会更容易理解组件化和工程化。

编写 index.html 页面结构

打开 index.html，写入基础 HTML 结构，并在 head 中引入 CSS，在 body 结束前引入 JavaScript。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>前端交互练习</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="card">
    <h1>我的第一个前端页面</h1>
    <p id="message">等待点击</p>
    <button id="actionBtn">点击我</button>
  </main>
  <script src="script.js"></script>
</body>
</html>

这里的 id="message" 和 id="actionBtn" 很重要，后面的 JavaScript 会通过它们找到页面元素并修改内容。

编写 style.css 美化页面

接着打开 style.css，给页面加上简单样式。样式不需要复杂，但要能看出 CSS 对页面外观的影响。

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Arial, sans-serif;
  background: #f5f7fb;
}
.card {
  width: 360px;
  padding: 32px;
  text-align: center;
  border-radius: 16px;
  background: white;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
button {
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: #4169e1;
  cursor: pointer;
}

保存后刷新浏览器，如果页面居中、按钮变成蓝色，就说明 CSS 文件已经成功加载。

编写 script.js 实现按钮交互

最后打开 script.js，通过 DOM API 获取按钮和文字区域，再给按钮绑定点击事件。

const button = document.getElementById('actionBtn');
const message = document.getElementById('message');

button.addEventListener('click', () => {
  message.textContent = '按钮已点击';
  button.textContent = '已完成';
});

这段代码做了三件事：找到按钮、找到文字节点、监听点击事件。点击按钮后，JavaScript 会修改页面中的文本内容，这就是最基础的前端交互。