网站代码前端和后端区别：职责、技术与协作方式

APP下载

网站代码前端和后端区别：职责、技术与协作方式

2026-09-08 10:10:28 字号：A- A A+ 来源：观察者网

网站代码示例可以帮助初学者快速理解网页是怎样运行的。一个基础网站通常由 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;
  }
}

运行和排查网站代码时要注意什么

三个文件必须放在同一文件夹中，且 href 和 src 中的文件名要保持一致。
文件建议使用 UTF-8 编码保存，否则中文可能显示为乱码。
修改 CSS 或 JavaScript 后，要刷新浏览器查看效果；如果页面没有变化，可以尝试强制刷新。
按钮没有反应时，检查 HTML 中的 id 是否与 JavaScript 中的选择器完全一致。
页面出现横向滚动时，应检查固定宽度、较大的图片或不换行文本。

这套网站代码示例适合制作简单的个人主页、作品集、活动介绍页和企业展示页。掌握 HTML 结构、CSS 样式和 JavaScript 事件之后，可以继续加入表单、图片、卡片布局以及更多页面功能，逐步扩展成完整的网站。

rmfhzdxwqxi9kk7wxecqpijvqejp2b7

标签平台责任全托管交叉检查等保2.0

责任编辑: 罗昌平

我要评论

请自觉遵守互联网相关的政策法规，共同营造“阳光、理性、平和、友善”的跟评互动环境。

表情加粗图片发表

观察者网用户管理制度逛社区有料？来写文章

宇树科技说不得！

2026-09-07 09:33:28 失业金
中药上市公司半年报纷纷提及加大创新药研发

2026-09-03 19:31:28
美湖股份：副总经理颜丽娟因个人身体原因辞职

2026-09-02 15:57:28 廉洁素质
【AcFun独家】gtav流程_1 序幕、难兄难弟

2026-08-25 20:10:28 长牙带刺
空军无人机发现雪山发生雪崩并通报预警

2026-08-31 04:53:28 集体讨论
911第1654名遇难者身份获确认

2026-08-31 17:55:28 白银
俄乌冲突逼近临界点了吗

2026-08-23 15:29:28 OLTP
伟创电气：2025年第三季度归属于上市公司股东的净利润同比增长10.03%

2026-08-30 16:33:28 实践能力
东北首家上市农商行拟港股退市，吉林金控超30亿元要约收购

2026-08-24 23:17:28 人机协作
狂卖500万份成全球第一！《盛世天下》到底是怎么赢麻的？

2026-09-01 21:16:28
2025年Q3 夏威夷果品类战报：传统巨头与新兴品牌正面交锋

2026-08-29 00:31:28
全球首个三折叠屏手机产线揭秘，17999 元起华为 Mate XTs 非凡大师已开售

2026-09-01 20:03:28 信访维稳

搜索

   观察者头条查看全部

四大“超级周期”与“制度改革”--韩国股市的涨幅才开始？评论 23

基础建设业CFO群体观察：隧道股份葛以衡收入为第二名近两倍金埔园林金宇西年薪不足30万评论 08

苏宁易采云布局工业品赛道，推出自主品牌酷博睿评论 17

美伊停火协议留下诸多未解难题两国欠缺互信等才是真正考验评论 84

林允穿恨天高奔向粉丝评论 17

   风闻 · 24小时最热查看全部

1

沃什放鹰重挫黄金，机构激辩金价走势评论 74   赞 3073589

2

母婴用品消费避坑指南：纸尿裤风波后，家长该如何保护孩子评论 81   赞 1410488

3

3倍牛股，停牌核查！股价严重脱离基本面评论 44   赞 63870

4

中央纪委通报：5人因任性用权、搞“政绩工程”、违规举债等问题，受到严肃处理评论 15   赞 24314731

5

美国被爆施压欧盟对中印加税，冯德莱恩最新回应评论 14   赞 942298

6

细节拆解黑神话钟馗实机评论 47   赞 28631022

   最新视频查看全部

英国国债保持涨势长期债券领涨

大和：百威亚太第四季中国业务仍审慎评级“买入”

网易-S：预计11月20日公布三季报，Q3一致预期营收239.00~292.98亿，同比-8.8%~11.8%

迹象显示基金发行回暖逾70亿“热股”再现
最新闻 Hot
快讯