学习网站代码，可以先把目标拆成三件事：用 HTML 安排标题、段落和区块，用 CSS 设置颜色与布局，再用 JavaScript 添加点击反馈。下面以一个简单的个人作品集为例，从结构梳理到代码运行，逐步搭出一个易读、适配窄屏、按钮可交互的小网站。

先认识网站代码的三层分工

HTML 是结构。标题、段落、列表、按钮分别承担不同作用。写清标题与段落的层级，浏览器才能识别章节，读者也能迅速找到作品介绍。常见标签包括 <header>（页首）、<main>（主要区域）、<section>（主题区块）、<h1>（主标题）和 <p>（段落）。

CSS 是外观。它控制字体、颜色、边距、宽度与排列方式。比如给主体设置最大宽度，可以避免大屏上的介绍文字铺得太宽；使用媒体查询，则能让窄屏布局更舒适。

JavaScript 是行为。它可以响应点击、切换介绍文字或检查输入。初学时不必一开始就写复杂功能，先让一个按钮完成清晰的小动作，就能理解事件监听和文字更新的关系。

四步搭建一个小网站

1. 列出首页要展示的项目。先写出主标题、简短介绍、学习方向和联系提示。每个区块只突出一个主题，避免还没写代码就塞进过多文字。
2. 搭好 HTML 骨架。用语义标签组织页首、自我介绍与练习清单，并为主标题和分区标题安排清楚的层级。按钮使用真正的 <button>，而不是用普通文字假装可点击。
3. 添加 CSS 样式。先处理整体宽度、字体、颜色和区块间距，再检查窄屏时是否需要调整。样式应服务于阅读，不要为了效果牺牲文字对比度。
4. 接入交互并检查。让按钮点击后更新一段自我介绍，再检查标签是否闭合、按钮是否能操作、屏幕变窄后文字是否仍然易读。

网站代码示例：个人作品集首页

下面是一份可以保存为 index.html 的完整入门示例。HTML、CSS 和 JavaScript 放在同一个文件里，方便观察三层代码如何配合；掌握后，再把样式和脚本拆到独立文件。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>林间的作品集</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      color: #243044;
      background: #f3f6fa;
      line-height: 1.7;
    }
    header, main, footer {
      width: min(900px, 92%);
      margin: 0 auto;
    }
    header { padding: 42px 0 18px; }
    section {
      margin: 16px 0;
      padding: 22px;
      background: #fff;
      border-radius: 12px;
    }
    button {
      padding: 10px 16px;
      border: 0;
      border-radius: 6px;
      color: #fff;
      background: #315fc4;
      cursor: pointer;
    }
    button:focus-visible { outline: 3px solid #f2a900; }
    footer { padding: 12px 0 30px; }
    @media (max-width: 520px) {
      header { padding-top: 26px; }
      section { padding: 16px; }
    }
  </style>
</head>
<body>
  <header>
    <h1>林间的作品集</h1>
    <p>记录我学习网页制作的过程与练习。</p>
  </header>
  <main>
    <section aria-labelledby="about-title">
      <h2 id="about-title">我在学习什么</h2>
      <p id="intro">目前从网页骨架、基础样式和简单交互开始。</p>
      <button id="more" type="button">展开介绍</button>
    </section>
    <section aria-labelledby="work-title">
      <h2 id="work-title">练习方向</h2>
      <ul>
        <li>用语义标签整理标题、段落和列表</li>
        <li>用 CSS 调整间距与配色</li>
        <li>用 JavaScript 响应按钮点击</li>
      </ul>
    </section>
  </main>
  <footer><p>持续练习，逐步完善。</p></footer>
  <script>
    const button = document.querySelector("#more");
    const intro = document.querySelector("#intro");
    button.addEventListener("click", () => {
      intro.textContent = "我正在制作小型练习作品，并尝试让文字在手机与电脑屏幕上清晰呈现。";
      button.textContent = "介绍已展开";
      button.disabled = true;
    });
  </script>
</body>
</html>

读懂示例中的关键代码

文档开头的 <!doctype html> 声明文档采用 HTML 结构，lang="zh-CN" 标注主要语言，字符集和视口设置则帮助浏览器正确显示中文并适配移动设备。<header>、<main> 与 <footer> 把作品集分成页首、主体和页尾；两个 <section> 分别承载自我介绍与练习方向。

CSS 中的 width: min(900px, 92%) 表示主体宽度不超过 900 像素，同时在较窄屏幕上留出边缘空间。box-sizing: border-box 让宽度计算更直观；媒体查询在视口宽度不超过 520 像素时收紧间距。颜色、字号和边距都可以按自己的设计调整，但要保持正文文字与背景之间有足够反差。

脚本先用 querySelector 找到按钮和介绍段落，再通过 addEventListener 监听点击。点击发生后，textContent 更新介绍，按钮文字也随之改变，并通过 disabled 避免重复触发。这里的选择器依赖 HTML 中的 id，如果修改了 id，脚本里的名称也要一起改。

写完后检查这些细节

• 标题层级是否清楚：作品集首页只设置一个 <h1>，主题区块再使用 <h2>。
• 标签是否成对闭合，属性值是否放在引号内；改动代码后，可以重新打开文件查看效果。
• 窄屏下是否出现横向滚动，自我介绍是否容易阅读，按钮是否有明显的操作反馈。
• 交互是否能完成预期动作；如果按钮没有反应，先检查 id 拼写和浏览器控制台中的错误提示。

完成基础版本后，可以把练习方向改成自己的项目，再为每个作品添加标题、简介和状态说明。网站代码的学习重点不是一次写出很多特效，而是看懂结构、样式和行为各自负责什么，并能从一个小改动开始验证结果。