学习网站代码，可以先把目的拆成三件事：用 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 拼写和浏览器控制台中的过失提醒。
完成基础版本后，可以把训练偏向改成自己的项目，再为每个作品添加问题、简介和状态说明。网站代码的学习重点不是一次写出许多特效，而是看懂结构、样式和行为各自认真什么，并能从一个小改动最先验证效果。
