HTML如何制作个人主页_HTML简单个人网站代码范例
作者：袖梨
2026-07-27
核心是用最简HTML5结构起步，避免过度设计：使用语义化标签（header/main/footer/section）、必加viewport元标签、内联10行以内CSS、图片加alt、外链加rel="noopener"、用UTF-8编码和相对路径，部署首选GitHub Pages。
直接用 HTML 写个人主页，核心不是“怎么写”，而是“别写过头”——纯静态页不需要框架、不需要构建工具，但容易陷入过度设计或忽略基础可访问性。
用最简 HTML5 结构起步，别碰 <div> 套娃
新手常从一堆嵌套 <div> 开始，结果语义混乱、屏幕阅读器读不出重点。HTML5 提供了明确语义标签，浏览器默认样式够用，先保证结构清晰：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>张三的主页</title></head><body> <header> <h1>张三</h1> <p>前端开发者 · 爱好摄影</p> </header> <main> <section> <h2>关于我</h2> <p>……</p> </section> <section> <h2>项目</h2> <ul> <li><a href="https://github.com/zs/project-a">Project A</a></li> </ul> </section> </main> <footer> <p>© 2024 张三 | <a href="mailto:[email protected]">[email protected]</a></p> </footer></body></html>
-
<header>、<main>、<footer>是真实语义容器，不是装饰用的<div> - 每个
<section>应有且仅有一个<h2>或更高级标题，形成逻辑层级 - 省略
<meta name="viewport">会导致手机上显示异常（文字极小、无法缩放）——务必加上：<meta name="viewport" content="width=device-width, initial-scale=1">
CSS 就写 10 行内联样式，够用就行
别急着建 style.css 或引入 Bootstrap。个人主页流量低、样式简单，内联 <style> 更可控，也避免路径出错：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>张三的主页</title> <style> body { font-family: -apple-system, system-ui, sans-serif; line-height: 1.6; margin: 0 auto; max-width: 700px; padding: 1rem; } header h1 { margin-top: 0; color: #333; } a { color: #0066cc; text-decoration: none; } a:hover { text-decoration: underline; } footer { margin-top: 2rem; font-size: 0.9em; color: #666; } </style></head>
- 字体栈用
-apple-system, system-ui, sans-serif比硬写"Helvetica"更稳妥，适配 macOS/iOS/Windows/Linux - 别设固定
width: 800px，用max-width+margin: 0 auto保证居中且响应式 - 内联样式里不要写媒体查询（
@media）——太复杂，真要适配移动端，等页面跑起来再拆出去
图片和链接必须加 alt 和 rel="noopener"
看似小事，但影响实际可用性和安全性：
立即学习“前端免费学习笔记（深入）”；
- 所有
<img>必须带alt属性，哪怕只是空字符串alt=""（表示该图是装饰性内容）；人物照建议写alt="张三在黄山拍摄的云海" - 外链（如 GitHub、LinkedIn）要用
<a href="..." target="_blank" rel="noopener">，漏掉rel="noopener"会让目标页通过window.opener控制你的页面（安全漏洞） - 本地图片路径别用绝对路径（如
C:users...photo.jpg），一律用相对路径：<img src="img/avatar.jpg">，并确保文件夹结构一致
部署前检查这三件事：编码、路径、HTTPS 链接
本地双击 index.html 能打开 ≠ 部署后能访问：
- 保存文件时确认编码是
UTF-8 无 BOM（VS Code 默认是，记事本默认不是；BOM 会导致部分服务器解析失败） - 所有资源路径（
img/、css/、./about.html）都用相对路径，避免写成/img/avatar.jpg（开头斜杠是根目录，本地双击无效） - 外部链接优先用 HTTPS：
https://github.com/...而非http://...；现代浏览器会拦截混合内容（HTTP 资源在 HTTPS 页面加载）
最简单的部署方式就是 GitHub Pages：建一个 username.github.io 仓库，把 index.html 推上去，几秒后就能用 https://username.github.io 访问——连域名都不用买。
