从零开始用HTML/CSS/JS搭建个人网站：新手完整实战指南
1. 项目概述：为什么从零开始搭建个人网站
在数字身份日益重要的今天，拥有一个个人网站，就像在互联网上拥有一个永不打烊的、完全由你掌控的“数字客厅”。它不仅是展示你技能、项目和思想的绝佳窗口，更是你个人品牌的核心载体。无论是求职、接洽自由职业项目，还是纯粹记录生活与学习，一个简洁、专业的个人网站所带来的价值，远超你的想象。
很多人听到“做网站”就觉得是程序员的事，需要掌握复杂的框架和服务器知识。其实不然，一个基础的个人展示网站，其核心就是HTML。HTML（超文本标记语言）是构成所有网页的骨架，它定义了网页的结构和内容。配合上CSS（层叠样式表）来“化妆”美化，以及一点点JavaScript来增加“互动”，你就能亲手搭建出一个独一无二的线上空间。这个过程本身，就是一次极佳的学习之旅，它能帮你理解互联网最基本的工作原理。
我见过太多人因为畏惧技术细节而迟迟没有动手。今天，我们就抛开那些复杂的工具链和概念，回归最本质的HTML，从零开始，一步步构建一个结构清晰、风格简约、完全可用的个人网站。即使你之前一行代码都没写过，跟着这篇指南，你也能在几个小时内看到自己的网站雏形在浏览器中运行起来。
2. 核心思路与工具准备：化繁为简的起点
在动手写代码之前，理清思路和准备好趁手的工具，能让整个过程事半功倍。我们的目标是制作一个“简单”的个人网站，这里的“简单”指的是技术栈的轻量和核心功能的聚焦，而非最终效果的简陋。
2.1 网站结构与内容规划
一个典型的个人网站，通常包含以下几个核心页面，我们可以先从单页面开始，将所有内容集中在一个HTML文件里，这是最简单的方式：
- 首页/关于我：这是网站的门面，通常包含你的姓名、一张头像、一句简短的标语或职业身份介绍，以及最重要的——导航栏。
- 作品集/项目展示：展示你的工作成果、项目案例。对于开发者，可以是GitHub项目链接；对于设计师，可以是作品图集；对于写作者，可以是文章列表。
- 博客/文章列表（可选）：如果你有持续写作的习惯，可以规划一个区域来展示你的文章摘要。
- 联系我：提供让访客联系你的方式，如邮箱、社交媒体链接（领英、Twitter等）。
对于初版，我强烈建议采用单页长滚动设计。即所有上述内容按顺序排列在一个页面上，通过页面内的锚点链接进行跳转。这样做的好处是结构极其简单，开发速度快，且用户体验在移动设备上非常流畅。
2.2 开发环境与工具选择
你不需要安装任何庞大的IDE（集成开发环境）。我们的原则是：轻量、快速、零成本。
- 代码编辑器：这是你写代码的地方。我首推Visual Studio Code，它免费、强大、插件生态丰富，对前端开发非常友好。当然，记事本、Sublime Text、甚至在线编辑器如 CodePen 都可以。
- 浏览器：Google Chrome或Microsoft Edge。它们内置了强大的开发者工具，可以实时查看和调试你的HTML/CSS/JavaScript代码，是学习过程中不可或缺的“显微镜”。
- 本地运行：HTML文件是纯文本文件，直接双击就能在浏览器中打开运行，无需任何服务器环境。这大大降低了入门门槛。
注意：在VS Code中，我建议安装“Live Server”插件。当你编写代码时，它可以启动一个本地服务器并自动刷新浏览器页面，让你每次保存代码后都能立刻看到效果，体验极佳。
2.3 设计风格与资源准备
在编码前，想好大致的视觉风格能指导你的CSS编写。对于个人网站，极简主义和内容优先是永不过时的安全选择。
- 配色方案：选择一个主色（用于重点按钮、链接），一个辅色，再加上黑、白、灰作为背景和文字色。可以去Coolors.co或Adobe Color寻找配色灵感。例如，深蓝色（#2c3e50）作为主色，搭配浅灰色（#ecf0f1）背景和深灰色（#34495e）文字，就是一种经典、专业的搭配。
- 字体：网页字体首选系统安全字体，如
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif。这套字体栈能确保在不同操作系统上都有清晰、一致的显示效果。如果想用特殊字体，可以考虑Google Fonts上的开源字体，但初期建议保持简单。 - 图片资源：准备一张高质量的头像照片（建议正方形，至少500x500像素）。项目展示如果需要图片，也请提前准备好并优化尺寸（宽度建议在1200像素以内），太大的图片会影响加载速度。
3. 从零编写HTML：构建网站的骨架
现在，我们打开VS Code，创建一个新文件夹，比如叫my-personal-site，然后在里面新建一个文件，命名为index.html。这个文件名是约定俗成的，它代表网站的首页。
3.1 HTML文档的基本结构
在index.html中，输入以下代码，这是一个标准的HTML5文档结构：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>你的名字 | 个人网站</title> <link rel="stylesheet" href="style.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> <body> <!-- 网站的所有内容都将写在这里 --> <h1>你好，世界！</h1> </body> </html>代码逐行解析：
<!DOCTYPE html>：声明文档类型为HTML5，告诉浏览器用最新的标准来解析。<html lang="zh-CN">：根元素，lang="zh-CN"属性非常重要，它声明文档的主要语言是简体中文，有助于搜索引擎和屏幕阅读器正确工作。<head>：头部区域，包含的是给浏览器和搜索引擎看的“元信息”，不会直接显示在页面上。<meta charset="UTF-8">：设置字符编码为UTF-8，确保中文等字符能正确显示。<meta name="viewport" ...>：移动端适配的关键。它告诉浏览器视口的宽度等于设备宽度，初始缩放为1倍，这对于网站在手机上的正常显示至关重要。<title>：浏览器标签页上显示的标题，也是搜索引擎结果中显示的标题，务必认真填写。<link rel="stylesheet" href="style.css">：链接外部CSS样式表文件，我们下一步会创建它。<link rel="icon" ...>：指定网站的图标（favicon），显示在浏览器标签页上。可以先准备一个简单的.ico文件，或暂时省略。
<body>：身体区域，这里面的所有内容都会显示在浏览器窗口中。<!-- ... -->：这是HTML注释，不会显示，用于给自己或他人做代码说明。
保存文件，然后直接用浏览器打开这个index.html，你应该能看到“你好，世界！”的大标题。恭喜，你的第一个网页诞生了！
3.2 使用语义化标签构建内容区块
接下来，我们用更具语义的HTML5标签来替换掉<h1>，构建完整的页面结构。语义化标签（如<header>,<nav>,<main>,<section>,<footer>）不仅让代码结构更清晰，也便于搜索引擎理解和辅助设备访问。
将<body>中的内容替换为以下结构：
<body> <!-- 顶部导航栏 --> <header class="site-header"> <nav class="main-nav"> <a href="#" class="logo">我的名字</a> <ul class="nav-links"> <li><a href="#home">首页</a></li> <li><a href="#about">关于</a></li> <li><a href="#projects">项目</a></li> <li><a href="#contact">联系</a></li> </ul> </nav> </header> <!-- 主页英雄区域 --> <section id="home" class="hero"> <div class="hero-content"> <img src="assets/avatar.jpg" alt="你的名字的头像" class="avatar"> <h1>你好，我是 <span class="highlight">[你的名字]</span></h1> <p class="tagline">一名[你的职业/身份]，专注于[你的领域]。</p> <a href="#projects" class="btn">查看我的作品</a> </div> </section> <!-- 关于我区域 --> <section id="about" class="about"> <h2>关于我</h2> <div class="about-content"> <p>这里是一段详细的自我介绍。可以讲述你的教育背景、工作经历、技能栈、兴趣爱好等。尽量真诚、具体，让访客能快速了解你。</p> <p>例如：我是一名前端开发爱好者，热衷于用代码构建美观且实用的用户体验。熟练掌握HTML、CSS、JavaScript，并正在学习React框架。</p> <h3>技能</h3> <ul class="skills"> <li>HTML5 & CSS3</li> <li>JavaScript (ES6+)</li> <li>响应式设计</li> <li>Git版本控制</li> </ul> </div> </section> <!-- 项目展示区域 --> <section id="projects" class="projects"> <h2>项目展示</h2> <div class="project-grid"> <article class="project-card"> <img src="assets/project1-thumb.jpg" alt="项目一预览"> <div class="project-info"> <h3>个人博客系统</h3> <p>使用纯静态HTML/CSS/JS构建的响应式博客，支持文章分类和搜索。</p> <a href="#" class="project-link">查看详情</a> </div> </article> <article class="project-card"> <img src="assets/project2-thumb.jpg" alt="项目二预览"> <div class="project-info"> <h3>天气查询小程序</h3> <p>基于公开API开发的天气应用，展示实时天气和未来预报。</p> <a href="#" class="project-link">查看详情</a> </div> </article> <!-- 可以复制更多 project-card --> </div> </section> <!-- 联系我区域 --> <section id="contact" class="contact"> <h2>保持联系</h2> <p>如果你对我的工作感兴趣，或者想聊聊合作，欢迎通过以下方式找到我。</p> <div class="contact-links"> <a href="mailto:your.email@example.com" class="contact-link">📧 发送邮件</a> <a href="https://github.com/yourusername" target="_blank" class="contact-link">🐙 GitHub</a> <a href="https://linkedin.com/in/yourusername" target="_blank" class="contact-link">💼 LinkedIn</a> </div> </section> <!-- 页脚 --> <footer class="site-footer"> <p>© <span id="current-year"></span> [你的名字]. 保留所有权利。</p> <p>本网站由纯手工编写。</p> </footer> <!-- 返回顶部按钮 --> <button id="back-to-top" title="返回顶部">↑</button> <!-- 链接外部JavaScript文件 --> <script src="script.js"></script> </body>结构解析与实操要点：
- 导航栏 (
<nav>): 使用无序列表<ul>包裹链接<a>是构建导航的标准做法。href="#about"这样的值是锚点链接，点击后会滚动到页面内id="about"的元素处。 - 分区 (
<section>): 每个主要部分都用<section>包裹，并赋予一个唯一的id。这既是为了语义，也是为了锚点跳转。 - 项目卡片 (
<article>): 用<article>标签包裹每个独立项目，表示其是一个独立的内容单元。里面包含图片、标题、描述和链接。 - 页脚 (
<footer>): 放置版权信息和一些次要链接。我们通过一小段JavaScript来自动更新年份。 - 返回顶部按钮: 这是一个常见的用户体验优化。我们先在HTML中创建按钮，样式和功能通过CSS和JS来实现。
- 图片路径: 注意
src="assets/avatar.jpg"，这假设你在项目文件夹里创建了一个assets文件夹，并把图片放了进去。务必确保文件路径正确，否则图片无法加载。 - 占位符: 将
[你的名字]、[你的职业]等内容替换成你自己的信息。
实操心得：在编写HTML时，脑中要时刻想着“结构”和“语义”。不要滥用
<div>，而是优先使用<header>,<nav>,<main>,<section>,<article>,<footer>这些标签。良好的语义结构是写出高质量、易维护代码的第一步，也对SEO（搜索引擎优化）非常友好。
4. 使用CSS进行美化：为骨架注入灵魂
HTML搭建了毛坯房，CSS就是负责精装修。我们在项目文件夹中创建一个新文件，命名为style.css。然后在HTML的<head>里已经通过<link>标签引入了它。
4.1 基础重置与全局样式
首先，我们需要一个“CSS重置”或“标准化”样式，来消除不同浏览器对默认样式的差异，为后续样式提供一个干净的起点。在style.css文件顶部添加：
/* 1. 基础重置与全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* 启用平滑滚动 */ } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.6; color: #333; /* 主文字颜色 */ background-color: #f8f9fa; /* 浅灰色背景 */ max-width: 1200px; /* 限制最大宽度，避免在大屏幕上过宽 */ margin: 0 auto; /* 水平居中 */ padding: 0 20px; /* 左右留出内边距 */ } img { max-width: 100%; /* 图片响应式：宽度不超过容器 */ height: auto; /* 高度自动，保持比例 */ display: block; /* 消除图片底部的间隙 */ } a { color: #3498db; /* 链接主色 */ text-decoration: none; /* 去掉下划线 */ transition: color 0.3s ease; /* 颜色变化过渡效果 */ } a:hover { color: #2980b9; /* 鼠标悬停时链接颜色变深 */ } ul, ol { list-style-position: inside; /* 列表符号在内部 */ } .btn, .project-link, .contact-link { display: inline-block; padding: 12px 24px; background-color: #3498db; color: white; border-radius: 4px; font-weight: 500; border: none; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; } .btn:hover, .project-link:hover, .contact-link:hover { background-color: #2980b9; transform: translateY(-2px); /* 悬停时轻微上浮 */ }关键点解析：
box-sizing: border-box;：这是一个非常重要的属性。它让元素的width和height属性包含了内容、内边距和边框，但不包含外边距。这使得布局计算变得直观和可控，强烈建议全局设置。scroll-behavior: smooth;：为页面的锚点跳转（如点击导航栏的“关于我”）添加平滑滚动效果，提升用户体验。max-width: 1200px; margin: 0 auto;：这是实现页面内容居中的经典方法。内容区域最大宽度为1200px，在更宽的屏幕上居中显示，保证阅读舒适度。img样式：max-width: 100%是实现图片响应式的核心，确保图片不会撑破其容器。
4.2 导航栏样式设计
导航栏是网站的门面，需要清晰、易用，并且在页面滚动时保持良好的可访问性。
/* 2. 导航栏样式 */ .site-header { background-color: rgba(255, 255, 255, 0.95); /* 半透明白色背景 */ backdrop-filter: blur(10px); /* 毛玻璃效果，提升质感 */ position: fixed; /* 固定定位，始终在顶部 */ top: 0; left: 0; width: 100%; z-index: 1000; /* 确保在最上层 */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加层次感 */ } .main-nav { max-width: 1200px; margin: 0 auto; padding: 1rem 20px; display: flex; justify-content: space-between; /* 左右分布：logo和菜单 */ align-items: center; } .logo { font-size: 1.5rem; font-weight: bold; color: #2c3e50; } .nav-links { display: flex; gap: 2rem; /* 使用gap属性设置列表项间距，更现代 */ } .nav-links li { list-style: none; } .nav-links a { color: #34495e; font-weight: 500; padding: 0.5rem 0; position: relative; } .nav-links a:hover { color: #3498db; } /* 为当前活动导航项添加下划线指示器 */ .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3498db; transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; }技巧与避坑：
position: fixed;：让导航栏固定在顶部。注意，这会让导航栏脱离正常文档流，可能会遮挡住页面顶部的内容。因此，我们通常需要在页面主体（如第一个<section>）的顶部添加padding-top或margin-top，其值等于导航栏的高度，以避免内容被遮挡。我们将在后面的.hero部分处理。backdrop-filter: blur(10px);：这个属性可以创建毛玻璃背景效果，非常现代。但需要注意浏览器兼容性（对旧版浏览器需有降级方案，比如纯色背景）。gap属性：是Flexbox和Grid布局中设置子项间距的现代方式，比用margin更简洁。
4.3 各内容区域样式实现
接下来，我们为每个<section>区域添加具体的样式。
/* 3. 主页英雄区域 */ .hero { min-height: 100vh; /* 至少占满一个视口高度 */ display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 80px; /* 为固定导航栏留出空间，非常重要！ */ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* 渐变背景 */ } .hero-content { max-width: 800px; padding: 2rem; } .avatar { width: 150px; height: 150px; border-radius: 50%; /* 圆形头像 */ object-fit: cover; /* 保证图片覆盖整个区域，不变形 */ border: 5px solid white; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); margin: 0 auto 2rem; } .hero h1 { font-size: 3rem; margin-bottom: 1rem; color: #2c3e50; } .highlight { color: #3498db; /* 高亮显示名字 */ } .tagline { font-size: 1.25rem; color: #7f8c8d; margin-bottom: 2rem; } /* 4. 关于我与项目区域通用样式 */ .about, .projects, .contact { padding: 5rem 0; } h2 { font-size: 2.5rem; text-align: center; margin-bottom: 3rem; color: #2c3e50; position: relative; } h2::after { content: ''; display: block; width: 60px; height: 4px; background-color: #3498db; margin: 0.5rem auto; border-radius: 2px; } .about-content { max-width: 800px; margin: 0 auto; font-size: 1.1rem; line-height: 1.8; } .skills { display: flex; flex-wrap: wrap; /* 允许换行 */ gap: 1rem; margin-top: 1.5rem; justify-content: center; } .skills li { background-color: #e3f2fd; color: #1565c0; padding: 0.5rem 1.5rem; border-radius: 50px; /* 胶囊形状 */ font-weight: 500; } /* 5. 项目网格布局 */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式网格的核心 */ gap: 2rem; max-width: 1200px; margin: 0 auto; } .project-card { background: white; border-radius: 10px; overflow: hidden; /* 确保子元素（如图片）的圆角不溢出 */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-card:hover { transform: translateY(-10px); /* 悬停时卡片上浮 */ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .project-card img { width: 100%; height: 200px; object-fit: cover; /* 图片覆盖整个区域，不变形但可能裁剪 */ } .project-info { padding: 1.5rem; } .project-info h3 { margin-bottom: 0.5rem; color: #2c3e50; } .project-info p { color: #666; margin-bottom: 1rem; font-size: 0.95rem; } .project-link { font-size: 0.9rem; padding: 0.5rem 1rem; } /* 6. 联系区域与页脚 */ .contact { text-align: center; } .contact-links { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; } .contact-link { background-color: transparent; color: #3498db; border: 2px solid #3498db; } .contact-link:hover { background-color: #3498db; color: white; } .site-footer { text-align: center; padding: 2rem 0; color: #95a5a6; border-top: 1px solid #eee; font-size: 0.9rem; }核心技术点解析：
- 响应式网格 (
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))): 这是实现项目卡片自适应布局的魔法。auto-fit会尽可能多地创建列，每列的最小宽度是300px，最大是1fr（等分剩余空间）。当容器宽度变化时，卡片会自动换行并调整大小，完美适配从手机到桌面的所有屏幕。 - Flexbox 与 Grid 布局: 我们混合使用了Flexbox（用于导航栏、技能列表、联系链接）和CSS Grid（用于项目网格）。Flexbox适合一维布局（行或列），而Grid适合二维布局。根据场景选择最合适的工具。
- 过渡 (
transition) 与变换 (transform):transition用于平滑地改变CSS属性（如颜色、背景、阴影），transform用于进行移动、旋转、缩放等变换。结合使用可以创建流畅的交互效果（如按钮上浮、卡片上浮），极大地提升用户体验。 - 对象适配 (
object-fit: cover): 对于头像和项目图片，这个属性至关重要。它能确保图片在固定尺寸的容器内填充，保持比例的同时覆盖整个区域，避免图片被拉伸变形。
4.4 返回顶部按钮与响应式设计
最后，我们来美化返回顶部按钮，并添加关键的响应式设计（移动端适配）。
/* 7. 返回顶部按钮 */ #back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; background-color: #3498db; color: white; border: none; font-size: 1.5rem; cursor: pointer; opacity: 0; /* 默认隐藏 */ visibility: hidden; /* 默认隐藏 */ transition: opacity 0.3s, visibility 0.3s, background-color 0.3s; z-index: 999; } #back-to-top.show { opacity: 1; visibility: visible; } #back-to-top:hover { background-color: #2980b9; } /* 8. 响应式设计（移动端适配） */ @media (max-width: 768px) { /* 平板及手机样式 */ .hero h1 { font-size: 2.2rem; } .tagline { font-size: 1.1rem; } h2 { font-size: 2rem; } .main-nav { flex-direction: column; /* 手机端导航栏垂直排列 */ padding: 1rem; } .nav-links { margin-top: 1rem; gap: 1rem; flex-wrap: wrap; justify-content: center; } .project-grid { grid-template-columns: 1fr; /* 手机端项目卡片单列显示 */ padding: 0 1rem; } .contact-links { flex-direction: column; align-items: center; gap: 1rem; } .contact-link { width: 200px; text-align: center; } #back-to-top { bottom: 20px; right: 20px; width: 45px; height: 45px; } }移动端适配核心：
媒体查询@media (max-width: 768px)是响应式设计的基石。它定义了当屏幕宽度小于等于768像素（典型平板竖屏或手机横屏）时应用的样式。我们在这里做了以下调整：
- 减小字体大小，以适应小屏幕。
- 将导航栏的Flex方向改为垂直，使Logo和菜单链接上下排列。
- 将项目网格改为单列 (
1fr)，确保在小屏幕上可读性。 - 调整联系链接和返回顶部按钮的尺寸和位置。
实操心得：写CSS时，建议遵循“移动优先”原则。即先编写适用于小屏幕的基础样式，然后使用
min-width媒体查询来为大屏幕添加或覆盖样式。这样做通常更高效，代码也更简洁。我们这里为了教程清晰，采用了传统的max-width方式。
5. 添加JavaScript交互：让网站活起来
HTML和CSS构建了静态的页面，而JavaScript（JS）负责添加交互行为。我们在项目文件夹中创建第三个文件script.js。
5.1 实现返回顶部功能
返回顶部按钮的逻辑是：当页面滚动超过一定距离（如200像素）时显示按钮，点击按钮时平滑滚动到页面顶部。
// script.js // 1. 返回顶部功能 const backToTopButton = document.getElementById('back-to-top'); // 监听页面滚动事件 window.addEventListener('scroll', function() { // 如果垂直滚动的像素数大于200，显示按钮 if (window.scrollY > 200) { backToTopButton.classList.add('show'); } else { backToTopButton.classList.remove('show'); } }); // 点击按钮时滚动到顶部 backToTopButton.addEventListener('click', function() { // 方法一：使用 scrollTo 实现平滑滚动（兼容性稍好） window.scrollTo({ top: 0, behavior: 'smooth' }); // 方法二：如果浏览器支持，也可以直接用 scrollIntoView // document.documentElement.scrollIntoView({ behavior: 'smooth' }); });代码解析：
document.getElementById('back-to-top')获取我们之前在HTML中创建的按钮元素。window.scrollY获取文档从顶部开始滚动的像素值。classList.add('show')和classList.remove('show')用于动态添加或移除CSS类，从而控制按钮的显示与隐藏（通过CSS中的opacity和visibility属性）。window.scrollTo({top: 0, behavior: 'smooth'})是让页面平滑滚动到顶部的标准方法。
5.2 自动更新页脚年份
这是一个简单但实用的小功能，让版权年份自动保持最新。
// 2. 自动更新页脚年份 const currentYearSpan = document.getElementById('current-year'); if (currentYearSpan) { const currentYear = new Date().getFullYear(); currentYearSpan.textContent = currentYear; }5.3 导航栏高亮与平滑滚动增强
我们可以让导航栏链接在滚动到对应区域时高亮显示，提供更好的视觉反馈。
// 3. 导航栏滚动高亮（基础版） const sections = document.querySelectorAll('section[id]'); // 获取所有有id的section const navLinks = document.querySelectorAll('.nav-links a'); // 监听滚动事件 window.addEventListener('scroll', function() { let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop; // 元素顶部到文档顶部的距离 const sectionHeight = section.clientHeight; // 元素高度 // 如果页面滚动位置进入了这个section的区域 if (scrollY >= (sectionTop - 100)) { // 减去100px作为提前量 current = section.getAttribute('id'); } }); // 为对应的导航链接添加active类 navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === `#${current}`) { link.classList.add('active'); } }); }); // 4. 为导航链接的点击事件添加更精确的平滑滚动（可选优化） navLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // 阻止默认的锚点跳转 const targetId = this.getAttribute('href'); if (targetId === '#') return; // 如果是“#”，则不做处理（比如Logo链接） const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, // 减去固定导航栏的高度，避免遮挡 behavior: 'smooth' }); } }); });然后，在style.css中添加高亮样式：
/* 导航栏活动状态样式 */ .nav-links a.active { color: #3498db; font-weight: bold; } .nav-links a.active::after { width: 100%; /* 激活状态下划线满宽 */ }注意事项：这个滚动高亮逻辑是一个简化版。在实际复杂页面中，可能需要使用
Intersection Observer API来实现更精确、性能更好的区域观察。但对于我们目前的单页网站，这个方法是足够且易于理解的。
6. 常见问题、调试与部署上线
6.1 开发过程中的常见问题与排查
图片不显示：
- 检查路径：这是最常见的问题。确保
img标签的src属性中的文件路径正确。使用相对路径时，要清楚当前HTML文件与图片文件的相对位置。在VS Code中，你可以将图片文件拖拽到代码编辑器中，它会自动生成正确的相对路径。 - 检查文件名：注意大小写，在大多数服务器上，
image.jpg和Image.JPG是不同的文件。 - 检查控制台：按F12打开浏览器开发者工具，切换到“Console”（控制台）标签页。如果图片加载失败，这里会有红色的404错误提示，并显示尝试加载的URL，你可以据此排查。
- 检查路径：这是最常见的问题。确保
CSS样式没生效：
- 检查链接：确认HTML中
<link>标签的href属性指向的style.css路径正确。 - 检查语法：CSS对语法错误很敏感。漏写分号
;、花括号}不匹配、属性名拼写错误都会导致后续样式失效。使用开发者工具的“Elements”（元素）面板，选中元素后查看右侧的“Styles”（样式）面板，可以看到哪些样式被应用了，哪些被划掉了（表示被覆盖或无效）。 - 特异性问题：如果更具体的样式规则覆盖了你的通用规则，你需要提高你规则的选择器特异性（如添加类名、ID）。
- 检查链接：确认HTML中
JavaScript没效果：
- 检查控制台错误：首先打开开发者工具的“Console”，查看是否有红色错误信息。常见的错误有：变量未定义、语法错误、在DOM加载完成前访问元素等。
- 检查脚本引入：确保
<script src="script.js"></script>标签被正确放置在</body>标签之前，这是最佳实践，可以确保DOM加载完毕后再执行JS。 - 使用
console.log()调试：在代码中关键位置插入console.log('变量值:', myVariable)，在控制台查看输出，这是最简单的调试方法。
网站在手机上显示不正常：
- 检查 viewport：确保HTML头部有
<meta name="viewport" ...>标签。 - 使用响应式设计模式：在Chrome开发者工具中，点击左上角的手机/平板图标，可以模拟不同设备尺寸进行调试。
- 检查CSS单位：在布局中多使用相对单位（如
%,rem,vw/vh），少用绝对单位px（字体大小、边框等除外）。
- 检查 viewport：确保HTML头部有
6.2 网站部署：让全世界都能访问
本地开发完成后，你需要将网站文件放到公共服务器上，才能通过互联网访问。对于静态网站（只有HTML、CSS、JS、图片），有非常多免费且优秀的选择：
- GitHub Pages：这是程序员中最流行的免费托管平台。你只需要有一个GitHub账号，创建一个仓库，将你的代码推送到这个仓库，并开启GitHub Pages功能，几分钟后你的网站就会拥有一个
https://你的用户名.github.io/仓库名的地址。它完美支持自定义域名。 - Vercel / Netlify：这两个平台对前端开发者极其友好。它们可以与你的Git仓库（GitHub, GitLab等）连接，实现自动部署。你只需推送代码，网站就会自动更新。它们也提供免费的SSL证书和全球CDN，速度很快。
- Cloudflare Pages：类似Vercel和Netlify，也是优秀的静态站点托管平台，由Cloudflare提供强大的网络支持。
部署基本步骤（以GitHub Pages为例）：
- 在GitHub上创建一个新的公共仓库（Repository），例如命名为
my-personal-site。 - 在本地项目文件夹中初始化Git：打开终端，进入项目目录，执行
git init。 - 将文件添加到暂存区：
git add . - 提交更改：
git commit -m "Initial commit" - 将本地仓库与GitHub远程仓库关联：
git remote add origin https://github.com/你的用户名/my-personal-site.git - 推送代码：
git push -u origin main - 在GitHub仓库的设置（Settings）中找到“Pages”选项，选择源分支为
main（或master），保存。 - 稍等片刻，你的网站就上线了！访问
https://你的用户名.github.io/my-personal-site即可查看。
6.3 后续优化与扩展建议
你的个人网站是一个可以持续迭代的作品。上线后，可以考虑以下方向进行优化：
- 性能优化：压缩CSS、JS和图片文件。可以使用在线工具或构建工具（如Webpack, Vite）自动化这个过程。
- SEO优化：完善HTML中的
<meta>标签，如description（描述）和keywords（关键词）。为图片添加alt属性。保持清晰的URL结构。 - 添加分析：接入Google Analytics或Umami等网站分析工具，了解访客来源和行为。
- 内容更新：定期更新你的项目、博客文章。一个活跃的网站更能吸引人。
- 功能扩展：可以尝试集成评论系统（如Giscus，基于GitHub Discussions）、搜索功能，或者用更强大的静态站点生成器（如Hugo, Jekyll, Next.js）重构，以管理更复杂的内容。
从一行简单的<!DOCTYPE html>开始，到最终部署上线，你不仅完成了一个个人网站，更走通了一个完整的Web前端开发流程。这个过程中积累的对HTML结构、CSS布局、JavaScript交互以及开发调试的理解，是任何教程都无法替代的宝贵经验。现在，打开浏览器，看看那个完全属于你的、独一无二的网站吧。