从零开始打造个人主页：HTML/CSS/JS实战教程

news2025/5/21 6:13:29

本教程分为环境搭建、HTML 结构编写、CSS 样式布局、JavaScript 交互实现、部署上线等五大部分，覆盖从基础到进阶的核心知识点，并结合示例代码与最佳实践，帮助你快速上手并掌握前端开发基本技能。

介绍

个人主页是展示自我、分享作品的重要窗口。本教程将：

搭建开发环境，介绍常用工具与项目结构；
基于 HTML5 规范，编写语义化网页结构；
使用 CSS3 技术（Flexbox、Grid、动画等）完成响应式、现代化布局；
利用原生 JavaScript 操控 DOM，实现动态交互与效果；
通过 Netlify 等平台进行一键部署，实现持续集成与快速上线。

阅读完本教程后，你将具备独立构建、调试和发布静态个人主页的能力。

一、环境搭建

1.1 安装编辑器与版本控制

代码编辑器：推荐使用 VS Code，它具备丰富的插件生态和智能提示功能。
Git 与 GitHub：在本地安装 Git，并注册 GitHub 账号，将项目托管于远程仓库，方便版本管理与协作。

1.2 项目结构

my-portfolio/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── main.js
└── assets/
    ├── images/
    └── fonts/

index.html：主页入口；
css/styles.css：主要样式文件；
js/main.js：JavaScript 逻辑；
assets/：存放图片、字体等静态资源。

二、HTML 结构编写

2.1 HTML5 基本语法

使用语义化标签能提升可访问性和 SEO 优化效果。例如：

<!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="css/styles.css">
</head>
<body>
  <header>…</header>
  <nav>…</nav>
  <main>…</main>
  <footer>…</footer>
  <script src="js/main.js"></script>
</body>
</html>

<!DOCTYPE html> 声明 HTML5 文档类型；
<meta charset="UTF-8"> 指定字符编码；
<meta name="viewport"> 实现移动端适配(MDN Web Docs)。

2.2 常用标签与结构

标题：<h1>~<h6>；
段落：<p>；
链接：<a href="…">;
列表：<ul>、<ol> 与 <li>；
图片：<img src="…" alt="…">；
区块：<div> 与 <section>、<article> 等语义化容器(MDN Web Docs)。

三、CSS 样式布局

3.1 重置与基础样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  background: #f7f7f7;
  color: #333;
}

box-sizing: border-box; 简化盒模型计算；
统一字体与行高提升可读性。

3.2 Flexbox 弹性布局

Flexbox 用于一维布局，能轻松实现水平居中、垂直对齐等常见需求：

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

display: flex 将容器设为弹性布局；
justify-content 与 align-items 分别控制主轴和交叉轴对齐方式(CSS-Tricks)。

3.3 Grid 网格布局

Grid 适合二维布局，能构建复杂的响应式网格系统：

.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

repeat(auto-fit, minmax()) 根据容器宽度自动适配列数；
grid-gap 控制行列间距。

3.4 响应式设计

使用媒体查询实现针对不同设备的样式调整：

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
}

在屏幕宽度小于 768px 时，将导航改为纵向布局，提升移动端体验。

四、JavaScript 交互实现

4.1 DOM 操作与事件绑定

示例：点击“返回顶部”按钮平滑滚动：

const topBtn = document.getElementById('top-btn');
topBtn.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

addEventListener 注册事件监听器；
window.scrollTo 实现滚动位置控制(JavaScript教程)。

4.2 模块化开发

借助 ES6 模块语法，将功能拆分到不同文件，提高可维护性：

// utils.js
export function formatDate(date) { /* … */ }

// main.js
import { formatDate } from './utils.js';

export 与 import 简化模块引用与复用(JavaScript教程)。

4.3 异步数据交互

使用 fetch 向后端接口请求数据，并动态渲染：

fetch('https://api.example.com/projects')
  .then(res => res.json())
  .then(data => renderProjects(data))
  .catch(err => console.error(err));

原生 fetch 支持 Promise，便于链式调用与错误处理。

五、部署上线

5.1 使用 Netlify 一键部署

Netlify 提供免配置、一键托管静态站点的服务。

在 GitHub 上推送项目；
登录 Netlify，点击 Get started，选择 Import from Git，连接你的仓库；
填写构建命令（如无需构建可留空），指定发布目录（默认为根目录）；
点击 Deploy，Netlify 会自动构建并分发到 CDN 节点，实现全球加速(docs.netlify.com, docs.netlify.com)。