想用免费的个人网站html代码搭出一张简洁的个人主页，可以从一个本地文件开始：准备九游体育结构、替换个人资料、在浏览器预览，再把文件上传到支持静态网页的托管空间。下面按五步完成，示例包含个人介绍、技能展示、作品入口和联系区域，不依赖外部图片或框架，保存后即可预览。
第一步：创建网站文件夹和九游体育
在电脑上新建一个文件夹，例如“my-home”，再在里面新建文本文件，将文件名改为 index.html。确认扩展名是“.html”，而不是“index.html.txt”。用记事本、文本编辑器或代码编辑器打开文件，复制下面的完整模板。代码里的中文文字可以直接改成自己的介绍。
第二步：复制可运行的个人网站HTML代码
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>林然的个人主页</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Microsoft YaHei", sans-serif;
color: #263247;
background: #f4f7fb;
line-height: 1.7;
}
header { padding: 22px 8%; background: #fff; }
nav { display: flex; gap: 22px; flex-wrap: wrap; }
nav a { color: #315da8; text-decoration: none; }
main { max-width: 900px; margin: 42px auto; padding: 0 20px; }
.hero, section {
margin-bottom: 22px; padding: 28px;
background: #fff; border-radius: 16px;
}
.hero { background: #e8f0ff; }
h1 { margin-top: 0; font-size: 34px; }
h2 { margin-top: 0; color: #315da8; }
.tag {
display: inline-block; margin: 4px; padding: 5px 12px;
background: #eef3fb; border-radius: 20px;
}
footer { padding: 24px; text-align: center; color: #68758a; }
@media (max-width: 600px) {
main { margin: 20px auto; }
.hero, section { padding: 21px; }
h1 { font-size: 28px; }
}
</style>
</head>
<body>
<header>
<nav>
<a href="#about">关于我</a>
<a href="#skills">擅长方向</a>
<a href="#work">个人作品</a>
<a href="#contact">联系我</a>
</nav>
</header>
<main>
<div class="hero">
<p>你好，欢迎来到我的主页</p>
<h1>我是林然</h1>
<p>一名喜欢设计与写作的独立创作者，正在记录学习和创作过程。</p>
</div>
<section id="about">
<h2>关于我</h2>
<p>我关注数字产品、视觉表达和日常观察。这里用来介绍我的经历、兴趣，以及正在尝试的新方向。</p>
</section>
<section id="skills">
<h2>擅长方向</h2>
<span class="tag">内容写作</span>
<span class="tag">界面设计</span>
<span class="tag">摄影记录</span>
</section>
<section id="work">
<h2>个人作品</h2>
<p>作品一：个人阅读笔记整理</p>
<p>作品二：城市散步主题海报</p>
<p>作品三：每周一篇的观察随笔</p>
</section>
<section id="contact">
<h2>联系我</h2>
<p>欢迎交流合作：在这里填写你的公开邮箱或社交账号。</p>
</section>
</main>
<footer>林然的个人主页</footer>
</body>
</html>这是适合直接保存的完整模板。代码中的导航使用页面内锚点，点击“个人作品”会跳到对应区域；CSS负责颜色、间距和窄屏布局。整个文件只有HTML与内嵌样式，因此无需另外下载图片、字体或插件。
第三步：替换文字并保存为UTF-8
先把“林然”替换为你的名字，再改写自我介绍、擅长方向、作品名称和联系方式。技能标签可以增删；作品部分也可以把三段文字换成项目名称和简短说明。修改时不要删除每组内容外层的 section 标签及其 id，否则导航对应区域可能消失。
保存文件时选择UTF-8编码，中文在浏览器中就能正常显示。若编辑器自动把文件存成纯文本，使用“另存为”并确认完整文件名为 index.html。公开主页上的邮箱、社交账号和个人经历都由你自行决定，避免放入不想公开的私人信息。
第四步：在浏览器本地检查效果
找到 index.html，双击后用浏览器打开。依次检查顶部导航、个人介绍、技能标签、作品文字和联系区域；点击导航项目，确认页面能跳到相应位置。再把浏览器窗口缩窄，观察文字和导航是否自然换行。如果名字仍显示为模板内容，回到编辑器替换并保存，然后刷新浏览器即可看到更新。
常见问题通常来自文件名或标签修改：打开后看到代码文字，多半是文件仍带有“.txt”扩展名；中文变成乱码时，重新以UTF-8保存；点击导航没有跳转时，检查链接里的“#about”是否与区域的“id=about”一致。颜色、背景和圆角可在 style 区域调整，不需要改动正文结构。
第五步：上传文件并发布个人主页
本地预览通过后，选择一个支持静态网页文件的托管服务，按照其页面提供的项目创建和文件上传流程，将 index.html 放在网站目录的九游体育位置。若托管服务要求指定发布目录，就选择包含 index.html 的文件夹；发布完成后打开服务生成的访问入口，检查九游体育是否能正常显示。部分服务提供免费空间或免费访问地址，具体可用额度按所选服务的规则执行。
后续更新也很简单：在本地编辑并保存 index.html，再将新文件上传覆盖旧文件，刷新线上主页查看变化。这样就完成了从免费的个人网站html代码、资料定制和浏览器预览，到发布上线的完整路径；先用单页介绍个人与作品，之后再按需要增加独立页面和更多项目。
