学习网站代码，可以先把目标拆成三件事：用 HTML 安排标题、段落和区块，用 CSS 设置颜色与布局，再用 JavaScript 添加点击反馈。下面以一个简单的个人作品集为例，从结构梳理到代码运行，逐步搭出一个易读、适配窄屏、按钮可交互的小网站。
先认识网站代码的三层分工
HTML 是结构。标题、段落、列表、按钮分别承担不同作用。写清标题与段落的层级，浏览器才能识别章节，读者也能迅速找到作品介绍。常见标签包括 <header>（页首）、<main>（主要区域）、<section>（主题区块）、<h1>（主标题）和 <p>（段落）。
CSS 是外观。它控制字体、颜色、边距、宽度与排列方式。比如给主体设置最大宽度，可以避免大屏上的介绍文字铺得太宽；使用媒体查询，则能让窄屏布局更舒适。
JavaScript 是行为。它可以响应点击、切换介绍文字或检查输入。初学时不必一开始就写复杂功能，先让一个按钮完成清晰的小动作，就能理解事件监听和文字更新的关系。
四步搭建一个小网站
- 列出首页要展示的项目。先写出主标题、简短介绍、学习方向和联系提示。每个区块只突出一个主题，避免还没写代码就塞进过多文字。
- 搭好 HTML 骨架。用语义标签组织页首、自我介绍与练习清单，并为主标题和分区标题安排清楚的层级。按钮使用真正的
<button>，而不是用普通文字假装可点击。 - 添加 CSS 样式。先处理整体宽度、字体、颜色和区块间距，再检查窄屏时是否需要调整。样式应服务于阅读，不要为了效果牺牲文字对比度。
- 接入交互并检查。让按钮点击后更新一段自我介绍，再检查标签是否闭合、按钮是否能操作、屏幕变窄后文字是否仍然易读。
网站代码示例：个人作品集首页
下面是一份可以保存为 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 拼写和浏览器控制台中的错误提示。
完成基础版本后，可以把练习方向改成自己的项目，再为每个作品添加标题、简介和状态说明。网站代码的学习重点不是一次写出很多特效，而是看懂结构、样式和行为各自负责什么，并能从一个小改动开始验证结果。