最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
如何创建一个简易的index.html个人主页？
时间：2026-07-26 10:23:49 编辑：袖梨 来源：一聚教程网
能双击运行的最简index.html结构是：<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>我的主页</title></head><body><h1>张三</h1><p>前端爱好者 | 每天写点代码</p><a href="https://github.com/zhangsan">GitHub</a></body></html>，需确保文件后缀为.html、编码为UTF-8、资源用相对路径。
直接用纯 HTML 写一个能打开、能看、能点的 index.html 个人主页，不需要框架、不依赖服务器，双击就能在浏览器里运行——这事五分钟能搞定，但很多人卡在路径错、标签漏、CSS 不生效这三处。
怎么写最简可用的 index.html 结构
浏览器只认标准 HTML5 文档结构，缺了 <!DOCTYPE html> 或 <html> 外层，某些样式或脚本可能静默失效；<head> 里没写 <meta charset="UTF-8">，中文会乱码；<body> 为空就真是一片白。
实操建议：
- 用任意文本编辑器（VS Code / 记事本 / TextEdit）新建文件，保存为
index.html（注意后缀必须是.html，不是.txt） - 粘贴以下最小可行代码：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>我的主页</title></head><body> <h1>张三</h1> <p>前端爱好者 | 每天写点代码</p> <a href="https://github.com/zhangsan">GitHub</a></body></html>
双击打开，就能看到标题、段落和链接——这就是“能跑”的底线。
立即学习“前端免费学习笔记（深入）”；
href 和图片路径为什么总打不开
本地双击运行时，浏览器走的是 file:// 协议，所有相对路径都以当前 index.html 所在文件夹为根。常见错误：把图片放在子文件夹却写成 img/photo.jpg（实际应为 ./img/photo.jpg 或直接 img/photo.jpg），或者误用绝对路径 /img/photo.jpg（开头的 / 会指向磁盘根目录，不是项目根）。
实操建议：
- 图片、CSS、JS 文件统一放在同级或子目录，比如建个
css/文件夹放样式，img/放图 - 引用时一律用相对路径：
<img src="img/avatar.png">、<link rel="stylesheet" href="css/style.css"> - 如果链接外部网站，确保带协议：
href="https://example.com"，而不是href="example.com"（后者会被当成当前目录下的文件）
加点样式但 style.css 死活不生效
原因常有两个：文件编码不是 UTF-8（特别是 Windows 记事本默认 ANSI），或 <link> 标签位置错了（比如写在 <body> 里，或没加 rel="stylesheet"）。
实操建议：
- 用 VS Code 或 Sublime Text 新建
css/style.css，保存时选 “UTF-8” 编码（记事本右下角看编码，另存为时下拉选） -
<link>必须放在<head>里，且带完整属性：<link rel="stylesheet" href="css/style.css"> - 快速验证 CSS 是否加载：在
style.css里写一行body { background: red; }，保存后刷新页面，变红就说明链对了
真正麻烦的不是写几行 HTML，而是路径写错后浏览器控制台（F12 → Console / Network）不报错，只是静默忽略——所以每次加新资源，先查 Network 标签页里有没有 404，比反复改代码快得多。
相关文章
- PS怎么快速制作雨滴画笔笔刷 07-26
- 星轨之上是什么游戏 星轨之上核心玩法介绍 07-26
- Photoshop曲线如何调出小清新色调 07-26
- 阴阳师新式神神无月测评 全新式神神无月怎么用攻略 07-26
- 即梦AI怎样制作手绘线稿逐步上色绘画过程视频 07-26
- 手机迅雷网盘怎么删除云盘中的文件 07-26