学习网站代码
，可以先把目的拆成三件事：用 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 拼写和浏览器控制台中的过失提醒。

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