网站代码示例：从零搭建一个可运行的网页

APP下载

网站代码示例：从零搭建一个可运行的网页

2026-10-01 09:23:58 字号：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 事件之后，可以继续加入表单、图片、卡片布局以及更多页面功能，逐步扩展成完整的网站。

标签锅炉改造实战化演练阻抗控制受灾人员救助

责任编辑: 柴静

我要评论

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

表情加粗图片发表

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

房企7月融资规模同比增长债务重组获批约万亿元

2026-09-17 15:22:58 寻亲服务
澳大利亚S&P/ASX 200指数最新上涨0.2%，报8802.0点

2026-09-17 02:59:58
记者：拉科已经接触自由球员阿达玛-特拉奥雷

2026-09-20 20:08:58 户储
【酒井法子】Guanbare (加油吧)

2026-09-26 02:49:58 受害人救助
ETF命名迎统一规范投资者将告别“一头雾水”

2026-09-21 08:31:58 减速器
美“创世纪计划”启动！港股芯片高能反转，首只聚焦港股芯片产业链的港股信息技术ETF(159131)放量大涨超3%

2026-09-18 03:55:58 分布式事务
美伊据悉商定延长休战60天协议有待特朗普批准

2026-09-30 15:33:58 临时安置点
电力设备股集体飙涨！哈尔滨电气涨逾11%，行情有望继续？

2026-09-20 08:39:58 华润
部分民办本科出现招生难

2026-09-19 23:56:58 对赌协议
法院受理恒大地产破产清算案

2026-09-24 00:38:58
电影《八仙！》提档7月18日上映

2026-09-23 06:01:58
第七届新浪财经金麒麟食品饮料行业菁英分析师：第一名国金证券

2026-09-18 20:41:58 柔性抓手

搜索

   观察者头条查看全部

商K遭严打,小妹转战陪玩评论 54

嘉欣丝绸龙虎榜数据（6月18日）评论 10

县城里年轻人开始共享前任了评论 14

东阳光算电协同铺路 AI算力基建转型得失评论 07

农化医药企业降本增收路径清晰评论 25

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

1

零售银行的下一战场在哪评论 86   赞 846839

2

计算能力通货膨胀”指南：为何使用AI变得更便宜而计算公司却赚更多钱？评论 37   赞 8238232

3

销量、毛利率双升友发集团前三季度业绩增长4倍第三季度净利润同比激增2320.53%评论 29   赞 96325

4

国茂股份：国茂精密传动（常州）有限公司未持有杭州云深处科技股份有限公司股权评论 91   赞 98770143

5

*ST奥维录得7天5板评论 27   赞 88309776

6

国家发改委主任，与5家企业负责人座谈评论 13   赞 712359

   最新视频查看全部

淡水泉投资：全球资产配置再平衡，中国私募应向世界讲好中国故事，增强中国资产全球吸引力

歌礼制药-B早盘涨逾10% 昨日公司耗资1592.75万港元回购130.6万股

伊朗大使希望中国能成为中东安全担保人，外交部回应

减持红旗连锁1360万股未及时披露永辉超市收警示函
最新闻 Hot
快讯