做一个个人首页，最小可用版本不必先搭服务器或引入复杂框架：创建一个项目文件夹，放入 index.html、style.css 和 script.js 三个文件，再准备一张头像或代表性图片。页面先确定要回答的三个问题：你是谁、访客能看到什么、如何联系你。对应到首页，可以安排简介、作品或经历、联系方式三个区域；内容少时做成单页，栏目增多后再考虑拆分页面。先写清真实、简短的文字，再决定颜色和装饰，能避免页面看起来漂亮却没有重点。文件名尽量使用英文小写和连字符，图片放在 assets 目录，引用时使用相对路径，例如 assets/profile.jpg，这样整个文件夹迁移到其他设备或静态托管空间时不容易丢失资源。
在 index.html 中设置中文语言、页面标题、字符编码和视口配置，再按阅读顺序组织标题、段落、导航和链接；标题层级要连续，图片应有说明性替代文本，联系入口使用真正可点击的邮箱或外部链接。样式放在 style.css，通过清晰的类名控制布局、间距、字号和颜色，不要把大量样式写进每个元素。首页可以采用居中的内容容器、较窄的正文宽度和一组卡片；宽屏时并排展示，窄屏时改为单列。用相对单位和弹性布局处理尺寸，避免给整页设置固定宽度；文字与背景保持足够对比，按钮和链接也不能只靠颜色区分。若要显示当前年份、展开移动导航或切换主题，再把交互放入 script.js，并在页面内容完成后加载脚本；纯展示型主页无需为了“用了代码”而添加无实际作用的动画。
本地预览时，先直接打开 index.html 检查文字、图片和链接，再调整浏览器窗口宽度，分别查看手机窄屏与桌面宽屏；如果浏览器限制本地脚本或模块加载，可在项目目录启动一个本地静态服务器后访问页面。排查时从最基础的路径和文件名开始：图片是否确实存在、大小写是否一致、CSS 文件是否正确引用、浏览器控制台是否出现语法错误。发布前逐项点击导航和联系方式，检查图片是否过大、页面是否横向溢出，并确认没有把私人地址、密钥或不打算公开的信息写进源码。个人首页通常不需要后端接口；只有在确实要展示动态数据、提交表单或读取外部服务时，才设计接口调用。此时应明确请求地址、方法、参数格式和失败时的页面提示，处理加载中、空结果与网络错误；密钥不能放在浏览器可见的前端代码里，涉及敏感操作时应由可信服务器代为处理。
做个人介绍、作品展示或小型工作室页面，可以先用一份 HTML 文件搭出可浏览的首页。下面的代码包含页面结构、样式和手机屏幕适配，保存为 index.html 后即可在浏览器中查看。它适合展示固定内容；如果需要登录、提交表单、保存数据或管理后台，还要另行开发后端或接入服务。
开始前准备一个文件
准备文本编辑器和浏览器，在电脑上新建文件夹，再创建 index.html。确认文件扩展名确实是 .html，而不是编辑器自动保存的 .txt。示例把 CSS 放在 HTML 的 <style> 标签内，不需要安装框架、配置依赖或创建构建流程。
复制代码，生成可预览首页
将以下内容完整复制到 index.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;
color: #24312d;
font: 16px/1.7 system-ui, sans-serif;
background: #f5f7f4;
}
header, main, footer {
width: min(920px, 92%);
margin: auto;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 22px 0;
}
nav { display: flex; gap: 18px; }
a { color: #28634b; }
.hero {
padding: 64px 0 44px;
max-width: 680px;
}
.hero h1 { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.2; }
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin: 24px 0 56px;
}
.card {
padding: 20px;
border-radius: 12px;
background: white;
}
footer { padding: 20px 0; border-top: 1px solid #d9e0da; }
@media (max-width: 520px) {
header { align-items: flex-start; flex-direction: column; gap: 8px; }
.hero { padding-top: 40px; }
}
</style>
</head>
<body>
<header>
<strong>林间设计工作室</strong>
<nav aria-label="主导航">
<a href="#about">工作室</a>
<a href="#works">作品</a>
</nav>
</header>
<main>
<section class="hero">
<p>独立设计 · 品牌与网页</p>
<h1>让清晰的设计，帮助好想法被看见。</h1>
<p>我们为小团队制作简洁、易用的视觉与网页方案。</p>
</section>
<section id="about">
<h2>工作室介绍</h2>
<p>这里填写服务对象、工作方式或联系信息。尽量用具体内容替换示例文字。</p>
</section>
<section id="works">
<h2>近期作品</h2>
<div class="cards">
<article class="card">
<h3>品牌视觉</h3>
<p>为社区咖啡店整理标志与基础视觉规范。</p>
</article>
<article class="card">
<h3>网页设计</h3>
<p>为独立创作者设计清楚易读的作品展示页。</p>
</article>
</div>
</section>
</main>
<footer>© 林间设计工作室</footer>
</body>
</html>替换内容时，先改文字再调整样式
<title> 是浏览器标签页显示的页面名称；页面主体从 <header>、<main> 到 <footer> 划分。导航中的 href="#about" 指向页面内 id="about" 的区块，因此修改区块编号时，也要同步修改对应链接。卡片通过 .card 设置外观，颜色、间距和字号则可在 <style> 中调整。
这份示例没有表单提交或数据接口：页面里的内容直接写在 HTML 中，导航只在当前页面跳转。如果要让访客提交留言，前端需要连接一个真实可用的后端接口，并按接口约定发送数据；仅添加一个表单外观，并不会自动保存信息。
打开页面并检查完成结果
保存文件后，用浏览器打开 index.html。检查标题、介绍和作品内容是否显示，点击导航是否能跳到对应区块；缩窄浏览器窗口，确认卡片能自动换列、导航没有挤出屏幕。若改动后页面没有更新，先确认文件已保存，再刷新浏览器。
本地预览通过后，这个静态页面可以部署到支持静态文件的网站托管服务。发布时需上传 HTML 文件及实际使用的图片、样式等资源，并确认首页文件名与托管要求一致。对于只有文字和展示区块的小站，这套代码足以作为起点；需要动态数据时，再根据具体功能补充接口和服务端逻辑。