说出来你可能不信，我这个写了不少年代码的人，对外最常用的名片不是社交平台主页，而是一个只有几个HTML文件的小网站。它没有框架、没有数据库，连JavaScript都只有寥寥几行，但就是这样一个朴素的个人网页，帮我对接过合作机会，也成了我给新人讲前端时最顺手的教学样本。你说它简单吗？确实简单。可越是简单的东西，越能看出一个人对内容组织和基础功夫的态度。
这篇文章我就把制作一个简单的HTML个人网页的全过程完整讲一遍：从为什么值得手写开始，到信息架构怎么定、HTML结构怎么写、CSS怎么美化、多页面怎么跳转，再到发布前必须做的检查。全程用真实代码说话，踩过的坑也会一并交代清楚。不管你是刚接触前端的学生，还是想给自己搭一个独立展示页面的职场人，照着这篇做，应该都能得到一版能直接发出去的网页。
1. 为什么我坚持从最朴素的HTML开始做个人网页
1.1 "快"与"合适"是两回事
先聊一个很多人不太注意的问题：做个人网页最快的路，到底是不是用现成的网站生成器？
我的答案是：快是真的快，但"快"不等于"合适"。我也试过用那些拖拽式工具，选个模板、改改文字、换张图片，十分钟就能看到页面效果。可深入用一阵子就发现，模板归根到底是别人设计的，你想调一下间距，可能要找半天设置项；你想去掉某个加载很慢的动画，可能要把样式翻个底朝天。更麻烦的是，这类工具生成的页面通常附带不少额外的脚本和统计代码，页面越攒越重，真正属于你自己的内容反而被淹没了。
手写HTML完全没有这个问题。你写多少，页面就有多少。一个简单的HTML个人网页，从结构到样式，再到交互，每一行都在你掌控之中。文件体积小，加载速度快，也不依赖任何第三方平台，哪天想换个风格，直接改CSS就行。这种自己说了算的感觉，是我后来一直坚持用最朴素方式做个人页面的根本原因。
1.2 它同时也是最值得做的前端练手项目
除了实用价值，手写个人网页还有一个容易被低估的好处：它是学习前端最合适的"第一个完整项目"。
很多新手学HTML时，今天学标题标签，明天学列表标签，知识都是散的，学完就忘。但如果带着"我要做一个个人主页"这个目标去学，情况就完全不同了。你自然就会遇到这样的问题：页面标题怎么设置？段落怎么分段？图片为什么显示不出来？链接怎么跳到另一个页面？样式为什么会串？这些问题的答案，恰好就是HTML和CSS最核心的知识点。
所以我的建议是：不管你已经有多少编程基础，都值得亲手做一次个人网页。它不像写业务系统那样要考虑复杂的逻辑，也没有后端那些事务、并发、权限的烦恼。它足够简单，让初学者能跑通完整的"写代码、预览、调样式、发布上线"链路；它又足够真实，能让你体会到把一个空白文件慢慢变成可用产品的那种成就感。
1.3 做这个项目我不会用到什么
为了避免后面越聊越复杂，我先明确一下边界：做这个页面，我不会用到React、Vue这类前端框架，也不会引入Bootstrap之类的组件库，更不会搭本地开发服务器。就用电脑自带的文本编辑器，加上浏览器，从零开始写。
不用的原因不是它们不好，而是"杀鸡不用牛刀"。你只是要做一个内容型页面，根本不需要框架带来的状态管理和组件化。等你以后真要开发复杂的Web应用，再学那些工具也不迟。先把最基础的HTML语言本身吃透，这对理解后面所有框架的原理都有帮助——所有那些看起来很酷的框架，编译打包之后，落到浏览器里跑的还是HTML、CSS、JavaScript这三样东西。
2. 动笔之前，先决定你的页面上到底要放什么
2.1 我给个人主页划分的六个模块
很多人一上来就打开编辑器敲代码，这是最容易走弯路的地方。用一句老话说叫"磨刀不误砍柴工"。我的习惯是先在纸上把页面内容定下来，哪怕只是写几行关键词，也比盲目开写强得多。
以我自己为例，一个典型的个人主页我会分成六个模块：
- 页头（Header）：放姓名、头像，以及一句简短的个人定位或口号。
- 关于我（About）：两三段话讲清楚自己是谁、在做什么、关注什么方向。
- 技能特长（Skills）：用列表展示自己掌握的技术或能力方向。
- 作品/经历（Portfolio）：放几个代表性项目或工作经历，附上链接。
- 联系方式（Contact）：邮箱、社交账号，方便别人找到你。
- 页脚（Footer）：放版权信息、页面更新日期这类收尾内容。
这个结构不是固定的。有人想突出作品，可以把"作品"模块放大；有人是找工作的场景，可以加一段"求职意向"。关键是先想清楚：你希望访客在30秒内从你的页面里读到什么？这是个人主页最核心的设计问题。
2.2 内容收集的小方法：列提纲而不是直接写代码
我在做自己的页面时，习惯先用文档或便签列一个粗糙的提纲，大概长这样：
- 姓名 + 一句slogan
- 关于我：技术背景、兴趣方向、最近在做什么
- 技能：HTML/CSS/JavaScript/Photoshop
- 作品：项目A（一句话介绍+链接）、项目B（同上）
- 联系方式：邮箱、社交账号
列完之后，我还会故意去翻几个别人做的个人主页，看看他们的模块划分、文案语气和组织方式。注意，不是让你抄别人的内容，而是学习信息呈现的思路。我见过不少把个人信息写得密密麻麻的页面，观感很差；也见过只有一屏内容但设计得很舒服的页面。差别不在于内容多少，而在于结构是否清晰、重点是否突出。
2.3 单页还是多页，我在不同阶段的选择
模块定好了，接下来要决定：所有内容放在一个页面上，还是拆成多个页面？
我的经验是：第一次做，先用单页解决"能不能用"，之后再拆成多页也来得及。单页的好处是制作简单，所有内容从上到下一目了然，访客滑一屏就能看完，不用点来点去。等你内容变多，比如作品列表长了、博客文章开始积累了，再拆成"首页+作品页+关于页"的多页结构也不迟。
所以这篇文章下面会先带你做完整的单页，然后在第五部分讲怎么把它拆成带导航的多页站点。两个方案都覆盖，你可以按自己的需要选。
3. 第一版页面：完整写一遍HTML核心结构
3.1 为什么每个页面都得从DOCTYPE开始
你现在可以打开任何一个文本编辑器，新建一个文件，命名为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>我的个人主页</title> </head> <body> </body> </html><!DOCTYPE html>：告诉浏览器"这是一个HTML5文档"。没有这一行，浏览器可能会按旧的兼容模式去解析你的页面，导致样式表现和预期不一致。这个坑我之前踩过：少写了DOCTYPE，页面在浏览器里直接乱了版。<html lang="zh-cn">：声明页面语言是简体中文。它对浏览器的翻译建议、朗读工具都有影响，搜索引擎爬虫也会读取它。<meta charset="utf-8">：声明字符编码为UTF-8，防止中文乱码。只要你用了中文，这一行几乎必须写，而且要放在head比较靠前的位置。<meta name="viewport" ...>：针对手机浏览器的设置，让页面宽度适应屏幕。没有这行，页面在手机上会被当成一个PC页面缩小显示，字小到看不清。<title>我的个人主页</title>：浏览器标签页上显示的文字，也是搜索结果里的标题，务必好好写。
head区里做的事就是这些，真正的页面内容全部放在<body>标签里。别小看这个骨架，后面所有模块都是往body里填的。
3.2 用语义化标签组织页面，而不是一锅div乱炖
很多老教程会让你大量使用<div>标签，因为它是最中性的容器标签。但我建议你从第一天就养成用语义化标签的习惯：<header>、<nav>、<main>、<section>、<footer>。它们和<div>在视觉效果上没有区别，但对阅读代码的人和机器（比如屏幕阅读器、搜索引擎）来说，语义化标签能清楚地表达"这里是导航""这里是正文"。
下面是我的个人主页body部分的骨架，你可以直接参考：
<body> <header> <h1>林小码</h1> <p>一个在路上的前端学习者</p> </header> <nav> <a href="#about">关于我</a> <a href="#skills">技能</a> <a href="#works">作品</a> <a href="#contact">联系</a> </nav> <main> <section id="about"> <h2>关于我</h2> <p>这里是自我介绍，写两三段话就够。</p> </section> <section id="skills"> <h2>技能</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </section> <section id="works"> <h2>作品</h2> <p>项目卡片放在这个区域。</p> </section> <section id="contact"> <h2>联系我</h2> <p>邮箱和社交链接放这里。</p> </section> </main> <footer> <p>© 2025 林小码</p> </footer> </body>注意几个我特别强调的习惯：
- 一级标题
<h1>在整页里只用一次，放在header里，告诉浏览器和搜索引擎这个页面最重要的内容是什么。 - 每个section都加一个
id，这样导航里的链接才能精确跳到对应位置，这是典型的锚点用法，后面第五部分会细讲。 - 内容级标题从
<h2>开始用，不要跳级。页面结构要保持层级清晰。
3.3 文本、列表、图片和链接的基本用法
每个模块内部需要不同类型的内容，我再把最常用的几个标签一次说清楚。
文本标签：段落用<p>，强调用<strong>和<em>。新手经常把加粗和强调混为一谈，这里我提醒一下：它们默认的浏览器样式确实分别是加粗和斜体，但语义上完全不是一回事。<strong>表示这段文字很重要，<em>表示语气上的强调，屏幕阅读器对它们的朗读方式也不同。所以别随便替换，先想想你想表达的是"重要"还是"强调"。
列表标签：无序列表用<ul>包<li>，适合放技能列表；有序列表用<ol>包<li>，适合放有先后顺序的信息。比如技能没有高低之分，用<ul>；实习经历按时间排，用<ol>更合理。
图片标签：
<img src="images/avatar.jpg" alt="我的头像">src是图片路径，alt是图片无法显示时的替代文本，同时也是无障碍访问的重要组成部分。我见过太多人图省事不写alt，结果图片挂了页面就只剩一个裂图图标，非常难看。写alt也有技巧：不要堆关键词，就用一句人话描述图片内容，比如"我在办公室的一张工作照"。
链接标签：
<a href="https://example.com" target="_blank" rel="noopener">我的项目仓库</a>href写目标地址，target="_blank"表示在新标签页打开，rel="noopener"是配套的安全写法，防止新页面拿到对当前页面的控制权。这三个属性一起用是最稳妥的写法。如果是页内跳转，target就不要加了，直接href="#about"，这样点击才会在本页滚动到指定位置。
到这里，一个不包含任何样式的HTML个人网页已经能跑起来了。你在浏览器里打开index.html，应该能看到所有文字从上到下排成一列。接下来要做的，就是让它变得好看。
4. 用CSS把页面从"能用"变成"好看"
4.1 样式写在哪：三种方式我为什么只推荐一种
CSS有三种引入方式：行内样式（写在标签的style属性里）、内部样式（写在<head>里的<style>中）、外部样式（单独一个.css文件，用<link>引入）。
我强烈推荐外部样式。原因很朴素：内容与样式分离，以后改样式只动一个文件就行。行内样式看着方便，但一旦页面大起来，改起来会让你头疼到怀疑人生；内部样式适合单页小项目，但你想给多个页面共用样式时就不行了。外部样式是能长期维护的方式，从第一版就开始用，可以省掉后面很多麻烦。
在head里加上这一行：
<link rel="stylesheet" href="css/style.css">然后新建一个css文件夹，在里面创建style.css。下面所有样式都写在这个文件里。
4.2 第一次美化优先做这三件事
我见过不少新手一上来就追求"炫酷"，又是渐变背景又是动态效果，结果页面五彩斑斓，反而让人抓不住重点。我的建议是，第一版的美化只做三件事：统一字体、拉开间距、定好配色。
字体与基础排版：
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.7; color: #333; background-color: #f9f9f9; margin: 0; padding: 0; }这里line-height: 1.7很关键，它把行高设为字号的1.7倍，中文段落立刻会变得舒展，不再挤成一团。font-family里写了多个字体，浏览器会按顺序选择一个能用的，这就是字体回退机制，保证不同系统上都不会因为缺字体而显示奇怪的东西。
间距：我习惯给所有section统一上下留白，让页面有呼吸感：
section { max-width: 800px; margin: 0 auto 40px; padding: 0 20px; }max-width: 800px限制内容宽度，太宽的行读起来眼睛容易疲劳；margin: 0 auto是让这个容器水平居中；padding: 0 20px是防止页面很窄时文字贴到屏幕边缘。这一组规则在几乎所有内容型页面上都好用，可以记成一个口诀："内容宽度、水平居中、内边距保护"。
配色：我的建议是正文用深灰而不是纯黑，背景用浅灰而不是纯白，链接用不算太刺眼的蓝色。纯黑和纯白对比太强，长时间阅读容易累，而深灰配浅灰会更温和。第一版不要超过三种主色，等审美积累起来再慢慢调整。
4.3 卡片式布局：盒模型的一次实战
作品区通常需要做成卡片，让每一条内容独立成块。先看HTML：
<section id="works"> <h2>作品</h2> <div class="card"> <h3>个人博客</h3> <p>记录日常学习笔记，已更新30篇文章。</p> <a href="https://example.com">去看看</a> </div> <div class="card"> <h3>天气查询小工具</h3> <p>调用免费API实现的简易天气应用。</p> <a href="https://example.com">去看看</a> </div> </section>对应CSS：
.card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 20px; } .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }这里涉及的就是CSS里最核心的盒模型：每个元素都是一个盒子，从里到外分别是内容、内边距（padding）、边框（border）、外边距（margin）。你可以试着在浏览器开发者工具里选中这个卡片，右侧会有一个非常直观的盒模型图——强烈建议你亲手点几下，比读十篇文章都管用。
border-radius: 8px让四个角变圆润，box-shadow在鼠标悬停时给卡片一层轻盈的阴影，这两个细节一加，页面质感立刻就不一样了，但它们只是加法，真正的根基还是间距和留白。
4.4 让手机也能看得舒服：viewport与媒体查询
前面提到head里那行viewport meta，它配合CSS的媒体查询，就能让页面在不同屏幕宽度下自适应。
我的策略很简单：内容型页面只在必要的时候改布局。大部分情况下，单列排版在手机和电脑上都没问题。真正需要调整的是字体大小和间距，可以用一个媒体查询：
@media (max-width: 600px) { body { font-size: 16px; } section { padding: 0 12px; } }这行代码的意思是：当屏幕宽度不大于600像素时，应用里面的样式。你可以把手机浏览器切换到电脑模式对比一下，会发现小屏上的文字不再贴着屏幕边缘，阅读体验明显改善。
提示：CSS选择器是区分大小写的，写成
#About和#about是两个完全不同的东西。这类错误很难排查，因为页面不会报错，只是点击导航没反应。如果你遇到"明明id对得上，跳转却失效"的情况，先去检查大小写。
5. 从单页走向多页：导航、链接与文件组织
5.1 文件夹结构怎么安排才不乱
内容多起来之后，把页面拆成多个文件是自然趋势。我常用的结构是这样：
my-site/ ├── index.html ├── about.html ├── works.html ├── contact.html ├── css/ │ └── style.css ├── images/ │ ├── avatar.jpg │ └── project-1.png └── js/ └── main.js规则很简单：HTML文件放根目录，样式放css文件夹，图片放images文件夹，脚本放js文件夹。这样做的好处是路径可预期：不管在哪个页面，css/style.css这个相对路径都能访问到同一个样式文件。
5.2 相对路径：同一层级、子目录、上级目录怎么指
多页面之间互相跳转，最关键的就是路径写法。先说结论：在你自己的项目内部，一律用相对路径，不要把自己电脑上的绝对路径写进去，也别用"file:///C:/..."这种本机路径，否则页面传到网上之后链接全都会失效。
相对路径的三种情况：
| 场景 | 写法 | 示例 |
|---|---|---|
| 同目录下的文件 | 直接写文件名 | href="about.html" |
| 子目录里的文件 | 文件夹名/文件名 | href="css/style.css" |
| 上级目录里的文件 | 先写../再写路径 | href="../index.html" |
这里最容易让新人懵的是../。它的意思是"往上一层目录"。比如你在about.html里想回到首页，因为about.html和index.html在同一个目录下，直接写href="index.html"就行，不需要../。什么时候需要../？比如一个页面在子文件夹里，要引用根目录下的文件时。
5.3 锚点链接：点击导航跳到页内指定位置
单页模式下，导航链接通常不是跳转到新页面，而是平滑地跳到本页的某个section。实现方式就是第二章提到的：给目标section加id，然后导航链接的href写成#id，比如：
<nav> <a href="#about">关于我</a> <a href="#skills">技能</a> <a href="#works">作品</a> <a href="#contact">联系</a> </nav>点击"关于我"，浏览器会自动把页面滚到id="about"的section的位置。如果链接写成about.html#experience，就是先跳到about页面，再定位到该页里id="experience"的位置。这个组合用法在简历型网站上非常常见。
5.4 导航栏固定在页面顶部的小技巧
当页面内容足够长，访客一路往下滚动时，导航消失在视野外是个麻烦。我常用的解决办法是给导航加固定定位：
nav { position: sticky; top: 0; background: #ffffff; padding: 12px 20px; border-bottom: 1px solid #eee; z-index: 10; }position: sticky的一个特点是：它一开始在正常流里，滚动到指定位置后就"粘"在屏幕顶部。相比position: fixed，它不会一开始就脱离文档流导致内容往上飘，更适合导航这种场景。注意要给导航一个背景色和更高的z-index，否则滚动时下方内容会穿透显示出来。
6. 发布前我必跑的检查清单：编码、路径与兼容性
6.1 字符编码：中文乱码九成是这里出问题
中文乱码是我见过最多的问题，十次里有八次是同一个原因：文件保存的编码不是UTF-8。代码里虽然写了<meta charset="utf-8">，但如果你用记事本把文件保存成了ANSI编码，浏览器按UTF-8解析时就会乱掉。
解决方法是：在编辑器中保存时明确选择UTF-8编码。现在主流编辑器默认都是UTF-8，但如果你从别处复制了老文件，或者用了某些老旧编辑器，保存前一定检查一下编码选项。这个坑我几年前踩过，页面本地看是好的，传到服务器上就出现一堆"锟斤拷"，折腾了半天才发现是保存编码的问题。
6.2 文件命名：空格、中文和大小写
文件命名看起来是小事，但它直接影响页面上线后的稳定。
首先，文件名里绝对不要用空格。浏览器会把空格转成%20，链接看着奇怪不说，有些老旧服务器解析也不稳定。其次，除非你清楚自己在做什么，否则尽量别用中文文件名。虽然现代浏览器基本都支持，但放到不同服务器、不同工具链里还是容易出意外。最后，注意大小写：HTML文件内部的链接是区分大小写的，href="About.html"和href="about.html"在Windows本地可能都能打开，但上传到Linux服务器后就只有其中一个能找到文件。
我的习惯是：所有文件名小写，单词之间用连字符分隔。比如my-project.html而不是MyProject.html，长期维护下来你会感谢这个习惯。
6.3 多浏览器和手机端的预览检查
发布之前，我会用一个简单的表格记下检查项，逐项打勾：
| 检查项 | 方法 | 通过标准 |
|---|---|---|
| 桌面浏览器 | Chrome、Edge、Firefox各打开一次 | 页面无错位，链接可点 |
| 手机浏览器 | 手机直接访问或用开发者工具设备模式 | 无横向滚动条，字体可读 |
| 图片显示 | 检查所有img的src | 无裂图 |
| 链接有效性 | 逐个点一遍导航与正文链接 | 无404或空白页 |
| 控制台报错 | F12打开开发者工具查看Console | 无红色错误 |
特别说下手机端的检查。不用真机的话，可以在Chrome里按F12，再按Ctrl+Shift+M切换到设备模拟，选iPhone或Android机型就能看到大致的手机效果。这个模式还能帮你发现是否出现了横向滚动条——那是响应式没做好的典型症状。
6.4 分享出去之前，别忽略该删的东西
最后一条提醒不太算技术问题，但很重要：检查页面上有没有不该公开的信息。包括手机号、家庭住址、身份证号、详细地理位置、公司内部资料等，都不要出现在公开的个人网页上。给别人留邮箱和期望的社交账号就够了，真实姓名是否公开也可以自己权衡。
另外，如果页面里引用了朋友的项目或照片，最好提前打个招呼。以前有人把我的照片顺手放进了他的个人页面，我倒是无所谓，但有些人会介意，这种尊重是基本素质。发布之前把页面链接发给两三个信任的朋友，让他们以陌生人的视角帮你看看，往往能发现你自己注意不到的问题。
7. 还能往里面加什么：表单、JavaScript和部署
7.1 联系方式表单：没有后端也能"收信"
很多人想要一个联系表单，但页面没有后端，不知道怎么接收数据。
最简单的方案是用mailto:链接，点击后打开访客本地的邮件客户端：
<a href="mailto:hello@example.com">发邮件给我</a>但它的体验比较原始，访客会被弹出邮件客户端打断。想要更像样的表单，我在早期用的是免费的表单服务，比如Formspree这类，把表单的action指向服务地址，访客提交后内容会转发到你的邮箱。因为这类服务规则时有变化，我这里不展开配置细节，你需要做的就是在HTML里写一个正经的表单结构，然后按所选服务的要求改action和表单字段名就行。
必填字段、占位提示这些基础写法先掌握：
<form action="https://formspree.io/f/你的表单ID" method="POST"> <label for="name">称呼</label> <input type="text" id="name" name="name" required> <label for="email">邮箱</label> <input type="email" id="email" name="email" required> <label for="message">留言</label> <textarea id="message" name="message" rows="5" required></textarea> <button type="submit">发送</button> </form><label>的for要跟对应输入框的id一致，这样点击文字时输入框就能获得焦点，这是容易被忽略的可用性细节。
7.2 一行JavaScript让页脚年份自动更新
个人主页里最常见的一个JavaScript需求，是让页脚的版权年份自动变成当前年份，省得每年手动改。实现起来只需几行：
<script> document.getElementById("year").textContent = new Date().getFullYear(); </script>页脚HTML里配合写：
<p>© <span id="year">2025</span> 林小码</p>这段脚本放的位置建议在</body>之前，因为脚本要等页面元素加载完才能找到那个span。你可能会问，这不就是那"寥寥几行JavaScript"吗？没错，好的个人网页不需要很多脚本，能用最少的代码解决真实问题，本身就是一种能力。
7.3 把页面放到网上：我看重的几件事
页面做好了，怎么让全世界看到？我的建议顺序是：
第一，用静态托管平台。现在有不少平台支持把本地文件夹拖上去就能生成一个可访问的网址，域名通常是免费的，适合第一次上线试水。
第二，注册一个自己的域名，绑定到托管服务上。有自己域名的好处是网址简短好记，而且长期来看指向稳定，不像免费子域名那么容易受平台策略影响。
第三，配置HTTPS。现在免费托管平台几乎默认带HTTPS，不用自己折腾。地址栏里有一把小锁，访客会觉得更可信，搜索引擎也更友好。
部署这块的具体步骤各家平台界面变化较快，我这里不写死操作步骤，只强调一个原则：HTML文件直接放根目录，入口文件叫index.html，这是所有静态托管的通用约定。把文件结构整理好，换平台时你也能很快迁移。
最后说一点经验层面的体会。我见过太多人把"简单"和"粗糙"混为一谈，但其实这两件事差得很远。一个只有几十行HTML的个人网页，只要结构清楚、间距舒服、文案用心，它给人留下的印象，往往比一个堆满了动画特效却内容空空的页面要好得多。这些年我一次次刷新自己的个人页，删掉的都是多余的特效，保留的永远是清晰的结构和真诚的内容。
如果你从头看到了这里，我建议你现在就打开编辑器，照着第二章的提纲先把内容写出来，再抄一遍第三章的骨架。第一版丑没关系，我的第一版也丑得不行。重要的是你先拥有一个属于自己的、能随你意愿修改的网页，然后让它陪你慢慢长大。
