这篇内容直接给你能用的HTML和CSS基础结构，教你怎么从零搭起一个属于自己的个人主页，不再被那些花里胡哨的建站平台割韭菜。
做这行五年，见过太多人想搞个人品牌，结果第一步就被各种SaaS平台劝退。一个月几十块，还要看广告，数据还不掌握在自己手里。今天不整虚的，直接上干货。你要的“个人网页完整代码”其实没那么神秘，核心就三件事：结构、样式、内容。
先说个真事儿。去年有个做独立开发的朋友，花了两万块找人做个官网。结果上线一个月，想改个字体都要找人家，对方爱答不理。最后他花了一下午，用我给的这套基础代码，自己把首页搭起来了。虽然丑了点，但胜在自由。他说这才是真正的“拥有”互联网资产。
咱们不整那些复杂的框架，什么React、Vue先放一边。对于个人展示页，原生HTML+CSS足矣。加载快，SEO友好，还不用维护依赖包。
第一步，建立文件结构。
在你的电脑上新建一个文件夹，比如叫my-site。里面建两个文件：index.html和style.css。就这么简单，别搞复杂了。
第二步，写HTML骨架。
打开index.html，复制下面这段代码。这是最基础的语义化标签，对搜索引擎友好。
一个喜欢折腾代码的开发者
这里写你的简介，别太长，两三句就行。
简短描述这个项目解决了什么问题。
另一个值得展示的作品。
© 2024 我的个人主页. All rights reserved.
第三步，加点样式让它好看点。
打开style.css，填入以下基础样式。这里用的是Flexbox布局，响应式也没问题，手机上看也不会乱。
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
color: #333;
}
header {
background: #f4f4f4;
padding: 1rem;
text-align: center;
}
nav a {
margin: 0 15px;
text-decoration: none;
color: #333;
font-weight: bold;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
section {
margin-bottom: 3rem;
}
.project-list {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.card {
border: 1px solid #ddd;
padding: 1rem;
flex: 1;
min-width: 250px;
border-radius: 8px;
}
footer {
text-align: center;
padding: 2rem;
background: #333;
color: #fff;
}
第四步，替换内容。
把[你的名字]、项目描述都换成你自己的。图片的话，可以用img标签，记得加alt属性。
第五步，部署上线。
别去买那些贵的服务器。GitHub Pages或者Vercel，免费，还带HTTPS。把这两个文件推上去，你的个人网页完整代码就真正活起来了。
很多人怕写代码，觉得门槛高。其实只要你会复制粘贴，再改改文字，就能搞定。别总想着完美，先跑起来。哪怕页面简陋点，那也是你自己的地盘。
避坑指南：
1. 别用在线编辑器直接发布，本地写好再上传，方便调试。
2. 图片一定要压缩，不然加载慢得让人想关网页。
3. 移动端测试一定要做，现在一半以上流量来自手机。
这套代码虽然简单，但足够支撑一个专业的个人形象展示。你不需要花哨的动画，清晰的信息架构才是王道。
最后说句心里话，互联网上属于自己的东西越来越少。拥有一个自己的网页，哪怕只是几行代码，那种掌控感是无价的。别犹豫了，打开编辑器，开始动手吧。
