说出来你可能不信我这个写了不少年代码的人对外最常用的名片不是社交平台主页而是一个只有几个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 langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人主页/title /head body /body /html!DOCTYPE html告诉浏览器这是一个HTML5文档。没有这一行浏览器可能会按旧的兼容模式去解析你的页面导致样式表现和预期不一致。这个坑我之前踩过少写了DOCTYPE页面在浏览器里直接乱了版。html langzh-cn声明页面语言是简体中文。它对浏览器的翻译建议、朗读工具都有影响搜索引擎爬虫也会读取它。meta charsetutf-8声明字符编码为UTF-8防止中文乱码。只要你用了中文这一行几乎必须写而且要放在head比较靠前的位置。meta nameviewport ...针对手机浏览器的设置让页面宽度适应屏幕。没有这行页面在手机上会被当成一个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 idabout h2关于我/h2 p这里是自我介绍写两三段话就够。/p /section section idskills h2技能/h2 ul liHTML/li liCSS/li liJavaScript/li /ul /section section idworks h2作品/h2 p项目卡片放在这个区域。/p /section section idcontact 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 srcimages/avatar.jpg alt我的头像src是图片路径alt是图片无法显示时的替代文本同时也是无障碍访问的重要组成部分。我见过太多人图省事不写alt结果图片挂了页面就只剩一个裂图图标非常难看。写alt也有技巧不要堆关键词就用一句人话描述图片内容比如我在办公室的一张工作照。链接标签a hrefhttps://example.com target_blank relnoopener我的项目仓库/ahref写目标地址target_blank表示在新标签页打开relnoopener是配套的安全写法防止新页面拿到对当前页面的控制权。这三个属性一起用是最稳妥的写法。如果是页内跳转target就不要加了直接href#about这样点击才会在本页滚动到指定位置。到这里一个不包含任何样式的HTML个人网页已经能跑起来了。你在浏览器里打开index.html应该能看到所有文字从上到下排成一列。接下来要做的就是让它变得好看。4. 用CSS把页面从能用变成好看4.1 样式写在哪三种方式我为什么只推荐一种CSS有三种引入方式行内样式写在标签的style属性里、内部样式写在head里的style中、外部样式单独一个.css文件用link引入。我强烈推荐外部样式。原因很朴素内容与样式分离以后改样式只动一个文件就行。行内样式看着方便但一旦页面大起来改起来会让你头疼到怀疑人生内部样式适合单页小项目但你想给多个页面共用样式时就不行了。外部样式是能长期维护的方式从第一版就开始用可以省掉后面很多麻烦。在head里加上这一行link relstylesheet hrefcss/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 卡片式布局盒模型的一次实战作品区通常需要做成卡片让每一条内容独立成块。先看HTMLsection idworks h2作品/h2 div classcard h3个人博客/h3 p记录日常学习笔记已更新30篇文章。/p a hrefhttps://example.com去看看/a /div div classcard h3天气查询小工具/h3 p调用免费API实现的简易天气应用。/p a hrefhttps://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:/...这种本机路径否则页面传到网上之后链接全都会失效。相对路径的三种情况场景写法示例同目录下的文件直接写文件名hrefabout.html子目录里的文件文件夹名/文件名hrefcss/style.css上级目录里的文件先写../再写路径href../index.html这里最容易让新人懵的是../。它的意思是往上一层目录。比如你在about.html里想回到首页因为about.html和index.html在同一个目录下直接写hrefindex.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点击关于我浏览器会自动把页面滚到idabout的section的位置。如果链接写成about.html#experience就是先跳到about页面再定位到该页里idexperience的位置。这个组合用法在简历型网站上非常常见。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 charsetutf-8但如果你用记事本把文件保存成了ANSI编码浏览器按UTF-8解析时就会乱掉。解决方法是在编辑器中保存时明确选择UTF-8编码。现在主流编辑器默认都是UTF-8但如果你从别处复制了老文件或者用了某些老旧编辑器保存前一定检查一下编码选项。这个坑我几年前踩过页面本地看是好的传到服务器上就出现一堆锟斤拷折腾了半天才发现是保存编码的问题。6.2 文件命名空格、中文和大小写文件命名看起来是小事但它直接影响页面上线后的稳定。首先文件名里绝对不要用空格。浏览器会把空格转成%20链接看着奇怪不说有些老旧服务器解析也不稳定。其次除非你清楚自己在做什么否则尽量别用中文文件名。虽然现代浏览器基本都支持但放到不同服务器、不同工具链里还是容易出意外。最后注意大小写HTML文件内部的链接是区分大小写的hrefAbout.html和hrefabout.html在Windows本地可能都能打开但上传到Linux服务器后就只有其中一个能找到文件。我的习惯是所有文件名小写单词之间用连字符分隔。比如my-project.html而不是MyProject.html长期维护下来你会感谢这个习惯。6.3 多浏览器和手机端的预览检查发布之前我会用一个简单的表格记下检查项逐项打勾检查项方法通过标准桌面浏览器Chrome、Edge、Firefox各打开一次页面无错位链接可点手机浏览器手机直接访问或用开发者工具设备模式无横向滚动条字体可读图片显示检查所有img的src无裂图链接有效性逐个点一遍导航与正文链接无404或空白页控制台报错F12打开开发者工具查看Console无红色错误特别说下手机端的检查。不用真机的话可以在Chrome里按F12再按CtrlShiftM切换到设备模拟选iPhone或Android机型就能看到大致的手机效果。这个模式还能帮你发现是否出现了横向滚动条——那是响应式没做好的典型症状。6.4 分享出去之前别忽略该删的东西最后一条提醒不太算技术问题但很重要检查页面上有没有不该公开的信息。包括手机号、家庭住址、身份证号、详细地理位置、公司内部资料等都不要出现在公开的个人网页上。给别人留邮箱和期望的社交账号就够了真实姓名是否公开也可以自己权衡。另外如果页面里引用了朋友的项目或照片最好提前打个招呼。以前有人把我的照片顺手放进了他的个人页面我倒是无所谓但有些人会介意这种尊重是基本素质。发布之前把页面链接发给两三个信任的朋友让他们以陌生人的视角帮你看看往往能发现你自己注意不到的问题。7. 还能往里面加什么表单、JavaScript和部署7.1 联系方式表单没有后端也能收信很多人想要一个联系表单但页面没有后端不知道怎么接收数据。最简单的方案是用mailto:链接点击后打开访客本地的邮件客户端a hrefmailto:helloexample.com发邮件给我/a但它的体验比较原始访客会被弹出邮件客户端打断。想要更像样的表单我在早期用的是免费的表单服务比如Formspree这类把表单的action指向服务地址访客提交后内容会转发到你的邮箱。因为这类服务规则时有变化我这里不展开配置细节你需要做的就是在HTML里写一个正经的表单结构然后按所选服务的要求改action和表单字段名就行。必填字段、占位提示这些基础写法先掌握form actionhttps://formspree.io/f/你的表单ID methodPOST label forname称呼/label input typetext idname namename required label foremail邮箱/label input typeemail idemail nameemail required label formessage留言/label textarea idmessage namemessage rows5 required/textarea button typesubmit发送/button /formlabel的for要跟对应输入框的id一致这样点击文字时输入框就能获得焦点这是容易被忽略的可用性细节。7.2 一行JavaScript让页脚年份自动更新个人主页里最常见的一个JavaScript需求是让页脚的版权年份自动变成当前年份省得每年手动改。实现起来只需几行script document.getElementById(year).textContent new Date().getFullYear(); /script页脚HTML里配合写p© span idyear2025/span 林小码/p这段脚本放的位置建议在/body之前因为脚本要等页面元素加载完才能找到那个span。你可能会问这不就是那寥寥几行JavaScript吗没错好的个人网页不需要很多脚本能用最少的代码解决真实问题本身就是一种能力。7.3 把页面放到网上我看重的几件事页面做好了怎么让全世界看到我的建议顺序是第一用静态托管平台。现在有不少平台支持把本地文件夹拖上去就能生成一个可访问的网址域名通常是免费的适合第一次上线试水。第二注册一个自己的域名绑定到托管服务上。有自己域名的好处是网址简短好记而且长期来看指向稳定不像免费子域名那么容易受平台策略影响。第三配置HTTPS。现在免费托管平台几乎默认带HTTPS不用自己折腾。地址栏里有一把小锁访客会觉得更可信搜索引擎也更友好。部署这块的具体步骤各家平台界面变化较快我这里不写死操作步骤只强调一个原则HTML文件直接放根目录入口文件叫index.html这是所有静态托管的通用约定。把文件结构整理好换平台时你也能很快迁移。最后说一点经验层面的体会。我见过太多人把简单和粗糙混为一谈但其实这两件事差得很远。一个只有几十行HTML的个人网页只要结构清楚、间距舒服、文案用心它给人留下的印象往往比一个堆满了动画特效却内容空空的页面要好得多。这些年我一次次刷新自己的个人页删掉的都是多余的特效保留的永远是清晰的结构和真诚的内容。如果你从头看到了这里我建议你现在就打开编辑器照着第二章的提纲先把内容写出来再抄一遍第三章的骨架。第一版丑没关系我的第一版也丑得不行。重要的是你先拥有一个属于自己的、能随你意愿修改的网页然后让它陪你慢慢长大。