核心概念：网站源代码是什么？
网站源代码就是构成网站的“原材料”,它主要由三种技术组成：
- HTML (超文本标记语言)：骨架，负责定义网页的结构和内容，比如标题、段落、图片、链接等,它就像人体的骨骼。
- CSS (层叠样式表)：衣服和妆容，负责网页的视觉表现，比如颜色、字体、布局、间距等,它决定了网站好不好看。
- JavaScript (JS)：行为和动作，负责网页的交互功能，比如点击按钮弹出窗口、轮播图、表单验证等，它让网站“活”起来。
这三者协同工作,共同呈现给你看到的最终网页。
准备工作：搭建你的“工作台”
在开始写代码之前，你需要准备一个简单的本地环境，你不需要安装复杂的服务器软件，只需要一个代码编辑器。
第一步：安装代码编辑器
代码编辑器是一个专门用来编写和编辑代码的工具，它能提供语法高亮、自动补全等功能,极大地提高编码效率。
- 强烈推荐：Visual Studio Code (VS Code)
- 优点：免费、强大、插件生态极其丰富,是目前全球最受欢迎的代码编辑器。
- 下载地址：https://code.visualstudio.com/
- 安装建议：安装时，勾选 "Add to PATH" 选项,方便你从命令行启动它。
第二步：创建项目文件夹
在你的电脑上创建一个文件夹，用来存放你的网站文件，在桌面创建一个名为 my-first-website 的文件夹。
第三步：用 VS Code 打开项目文件夹
- 打开你刚刚创建的
my-first-website文件夹。 - 右键点击文件夹，选择 “显示更多选项” -> “通过 Code 打开” (Open with Code)。
- VS Code 就打开了你的项目,你可以在这里创建和编辑文件。
分步指南：从零开始构建你的网站
我们将按照“创建骨架 -> 添加样式 -> 增加交互”的顺序来构建一个简单的个人介绍页面。
第一步：创建 HTML 骨架 (index.html)
在 VS Code 中，右键点击编辑区，选择“新建文件”，并将其命名为 index.html。.html 后缀非常重要,它告诉浏览器这是一个网页文件。
在 index.html 文件中输入以下代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的个人主页</title>
<!-- 在这里我们将链接 CSS 文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>你好，我是张三</h1>
<p>一个热爱前端开发的程序员</p>
</header>
<main>
<section>
<h2>关于我</h2>
<p>我是一名前端开发者，喜欢用代码创造美好的用户体验，我精通 HTML, CSS 和 JavaScript。</p>
</section>
<section>
<h2>我的项目</h2>
<ul>
<li>项目一：个人博客网站</li>
<li>项目二：在线待办事项应用</li>
<li>项目三：天气查询小程序</li>
</ul>
</section>
</main>
<footer>
<p>© 2025 我的主页. 保留所有权利.</p>
</footer>
<!-- 在这里我们将链接 JavaScript 文件 -->
<script src="script.js"></script>
</body>
</html>
代码解释：
<!DOCTYPE html>：声明这是一个 HTML5 文档。<html>：整个网页的根元素。<head>：包含网页的元信息，比如标题、字符编码、引入的 CSS 文件等,这些内容不会直接显示在页面上。<body>：包含所有在网页上可见的内容，比如标题、段落、图片等。<h1>,<p>,<ul>,<li>等都是 HTML 标签,用来定义不同的内容结构。<link rel="stylesheet" href="style.css">：这行代码告诉浏览器，去加载一个名为style.css的文件,并把它应用到当前页面上。<script src="script.js"></script>：这行代码告诉浏览器，去加载一个名为script.js的文件，并执行里面的 JavaScript 代码。
第二步：添加 CSS 样式 (style.css)
你的网站看起来很朴素，让我们给它“穿上衣服”。
在 VS Code 中，再次新建一个文件，命名为 在 代码解释： 保存 让我们为网站添加一点“魔法”,让它能响应用户的操作。 在 VS Code 中，新建一个文件，命名为 在 style.css，在 index.html 文件中，确保 <head> 标签里有我们刚才添加的 <link>
style.css 文件中输入以下代码：/* 基础样式重置 */
body, h1, p, ul, li {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 2rem 1rem;
}
header h1 {
font-size: 2.5rem;
}
区域样式 */
main {
max-width: 800px;
margin: 2rem auto;
padding: 1rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
section {
margin-bottom: 2rem;
}
section h2 {
border-bottom: 2px solid #eee;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
color: #555;
}
/* 页脚样式 */
footer {
text-align: center;
padding: 1rem;
margin-top: 2rem;
background-color: #333;
color: #fff;
}
body { ... }：设置整个页面的默认字体、背景色和文字颜色。header { ... }：设置 <header> 部分的背景色、文字颜色和内边距,让它看起来像一个顶部导航栏。main { ... }：设置主要内容区域的宽度、外边距（使其居中）、背景色和圆角,让它像一个卡片。section h2 { ... }：为每个小标题添加下划线,使其更突出。style.css 文件，然后回到浏览器，刷新 index.html 页面,你应该能看到一个样式美化后的网页了！第三步：增加 JavaScript 交互 (script.js)
script.js，同样，确保在 index.html 的 </body> 标签前有 <script src="script.js"></script> 这行代码。script.js 文件中输入以下代码：
// 等待整个 HTML 文档加载完毕后，再执行此代码
document.addEventListener('DOMContentLoaded', function() {
// 获取所有的 <h2> 标签
const sectionTitles = document.querySelectorAll('main section h2');
// 遍历每个 h2 标签
sectionTitles.forEach(title => {
// 创建一个新的按钮元素
const button = document.createElement('button');
button.textContent = '显示详情';
button.style.marginLeft = '10px';
button.style.padding = '5px 10px';
button.style.cursor = 'pointer';
// 为按钮添加点击事件监听器
button.addEventListener('click', function() {
// 获取当前按钮所在的 section
const section = title.parentElement;
// 切换下一个兄弟元素（即 <p> 或 <ul>）的显示状态
const content = section.querySelector('p, ul');
if (content) {
if (content.style.display === 'none') {
content.style.display = 'block';
button.textContent = '隐藏详情';
} else {
content.style.display = 'none';
