网站代码开发流程：从需求到上线的完整步骤

网站代码示例可以帮助初学者快速理解网页是怎样运行的。一个基础网站通常由 HTML、CSS 和 JavaScript 组成：HTML 负责页面结构，CSS 负责颜色、间距与布局，JavaScript 负责按钮交互和动态效果。下面以“个人介绍页”为例，分别提供可直接运行的网站代码示例。

一个网站通常需要哪些代码

基础网页文件及作用
文件	主要作用
index.html	定义标题、文字、图片、按钮和页面区域
style.css	设置字体、颜色、尺寸、布局和移动端样式
script.js	实现点击按钮、提示信息等交互功能

将下面三个文件放在同一个文件夹中，并确保文件名完全一致。保存后双击 index.html，即可在浏览器中查看页面。

HTML网站代码示例：搭建页面结构

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">
    <div class="container header-content">
      <strong class="logo">我的小站</strong>
      <nav>
        <a href="#home">首页</a>
        <a href="#about">关于我</a>
        <a href="#contact">联系我</a>
      </nav>
    </div>
  </header>

  <main>
    <section id="home" class="hero container">
      <p class="eyebrow">WELCOME</p>
      <h1>用代码记录每一个想法</h1>
      <p>这是一个简洁的个人网站代码示例，你可以根据需要替换文字和颜色。</p>
      <button id="helloBtn">点击查看欢迎信息</button>
      <p id="message" aria-live="polite"></p>
    </section>

    <section id="about" class="about container">
      <h2>关于这个页面</h2>
      <p>HTML 负责内容结构，CSS 负责视觉样式，JavaScript 负责页面交互。</p>
    </section>
  </main>

  <footer id="contact">
    <p>欢迎通过邮件与我交流。</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

其中，class 用于让 CSS 找到对应元素，id 通常用于定位某个具体区域。导航中的 href="#about" 会跳转到页面中 id 为 about 的区域，不需要额外页面也能实现站内定位。

CSS网站代码示例：让页面更清晰美观

HTML 页面可以直接显示内容，但默认样式比较简单。将以下代码保存为 style.css，就能为上面的网页增加卡片式布局、按钮样式和移动端适配。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #24324a;
  background: #f4f7fb;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  line-height: 1.7;
}

.container {
  width: min(92%, 960px);
  margin: 0 auto;
}

.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e7ebf2;
}

.header-content {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  color: #2563eb;
  font-size: 20px;
}

nav {
  display: flex;
  gap: 18px;
}

nav a {
  color: #52627a;
  text-decoration: none;
}

nav a:hover {
  color: #2563eb;
}

.hero {
  padding: 100px 0 80px;
  text-align: center;
}

.eyebrow {
  color: #2563eb;
  font-size: 13px;
  letter-spacing: 3px;
  font-weight: bold;
}

.hero h1 {
  margin: 12px 0;
  font-size: clamp(32px, 6vw, 58px);
  line-height: 1.2;
}

.hero p {
  color: #667085;
}

button {
  margin-top: 16px;
  padding: 12px 22px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: #2563eb;
  cursor: pointer;
  font-size: 15px;
}

button:hover {
  background: #1d4ed8;
}

#message {
  min-height: 28px;
  color: #2563eb;
  font-weight: bold;
}

.about {
  padding: 34px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(30, 55, 90, 0.08);
}

footer {
  margin-top: 60px;
  padding: 28px;
  color: #667085;
  text-align: center;
  background: #eaf0f8;
}

@media (max-width: 600px) {
  .header-content {
    flex-direction: column;
    justify-content: center;
    padding: 14px 0;
  }

  .hero {
    padding: 64px 0 56px;
  }

  .about {
    padding: 24px;
  }
}

这段样式使用了 flex 实现导航对齐，使用 max-width 控制内容宽度，并通过 @media 处理手机屏幕。当浏览器宽度小于 600 像素时，顶部内容会改为纵向排列，文字和间距也更适合小屏幕阅读。

JavaScript网站代码示例：增加按钮交互

JavaScript 可以监听用户操作，并修改页面上的内容。将下面的代码保存为 script.js，点击按钮后就会在页面中显示欢迎信息。

const helloBtn = document.querySelector("#helloBtn");
const message = document.querySelector("#message");

helloBtn.addEventListener("click", function () {
  message.textContent = "你好，欢迎来到我的网站！";
});

querySelector 用来找到 HTML 中的元素，addEventListener 用来监听点击事件，textContent 则可以修改元素中的文字。后续还可以把这个方法用于表单验证、菜单展开、图片切换和弹窗提示。

如何把网站代码示例改成自己的页面

先替换文本：修改标题、介绍内容、联系方式和页脚信息，保留 HTML 标签结构即可。
再调整颜色：在 CSS 中修改 color 和 background 的值，让页面符合个人或品牌风格。
补充页面区块：可以增加作品展示、服务说明、常见问题或留言区域，并为每个区域设置不同的 id。
最后测试交互：检查按钮是否能点击、导航是否能定位、手机屏幕上是否出现横向滚动。

例如，想增加一个项目展示区域，可以在 main 中加入下面的 HTML：

<section class="projects container">
  <h2>我的项目</h2>
  <div class="project-list">
    <article class="project-card">
      <h3>项目一</h3>
      <p>这是一个网站设计项目的简短介绍。</p>
    </article>
    <article class="project-card">
      <h3>项目二</h3>
      <p>这是另一个网页开发项目的简短介绍。</p>
    </article>
  </div>
</section>

再配合下面的 CSS，就能让两个项目并排显示，并在较窄屏幕上自动变成单列：

.project-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.project-card {
  padding: 22px;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  background: #ffffff;
}

@media (max-width: 600px) {
  .project-list {
    grid-template-columns: 1fr;
  }
}