零起点可用记事本+浏览器搭建个人主页，关键在于html骨架正确：须置于最前端且无前置空行或注释，保存为utf-8（无bom）编码的index.html；结构推荐、、划分内容，图片路径用相对路径并注意大小写。
不需要任何框架或工具链，用纯文本编辑器加浏览器就能完成——零起点搭建个人主页，关键在理解 HTML 的骨架逻辑，而不是堆砌样式。
怎么写第一个
浏览器打开空白页或显示乱码，大概率是编码声明缺失或位置错了。HTML5 要求 <meta charset="UTF-8"> 必须放在 最前面，且不能晚于前 1024 个字节。
- 新建文件时，用记事本（Windows）或 TextEdit（macOS 切换为纯文本模式）保存为
index.html，编码选 UTF-8（无 BOM） -
<meta>标签必须紧贴开始，不要空行、不要注释挡在前面 - 别用 Word 或 WPS 直接存为 HTML——它们会塞入大量冗余标签和私有样式，破坏结构
用 <header></header>、<main></main>、<footer></footer> 还是直接用 <div>
<p>语义化标签不是“加分项”，而是影响可访问性和 SEO 的基础。但初学阶段，优先保证结构清晰，不必强求一步到位。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>对个人主页这种单页内容，用 <code><header></header> 包姓名/头像，<main></main> 放简介/技能/项目，<footer></footer> 放邮箱/社交链接，是最自然的划分
<section></section> 或 <article></article>，里面至少得有标题（<h2></h2> 或更高），否则语义断裂<div> 套一层 <code><section></section> 再套 <div>，反而增加维护成本
<h3>图片不显示？检查这三处 <code>src 路径写法
本地双击打开 HTML 时，图片路径错误比 CSS 更隐蔽——浏览器控制台可能只报 net::ERR_FILE_NOT_FOUND，不提示具体哪个文件。
- 图片和 HTML 在同一目录：用相对路径
<img src="avatar.jpg">，不要加./或file:// - 图片在子目录
images/下：写<img src="images/avatar.jpg">，注意斜杠方向统一用/（Windows 也适用） - 绝对路径慎用：
<img src="/images/avatar.jpg">中的开头/指网站根目录，本地双击打开时等价于磁盘根目录（如C:/images/），基本找不到
最易被忽略的是：改完 HTML 后没刷新浏览器缓存，或者图片文件名大小写不一致（macOS/Linux 区分大小写，Avatar.jpg 和 avatar.jpg 是两个文件）。
