核心是用最简html5结构起步，避免过度设计：使用语义化标签（header/main/footer/section）、必加viewport元标签、内联10行以内css、图片加alt、外链加rel="noopener"、用utf-8编码和相对路径，部署首选github pages。
直接用 HTML 写个人主页，核心不是“怎么写”，而是“别写过头”——纯静态页不需要框架、不需要构建工具，但容易陷入过度设计或忽略基础可访问性。
用最简 HTML5 结构起步，别碰 <div> 套娃
<p>新手常从一堆嵌套 <code><div> 开始，结果语义混乱、屏幕阅读器读不出重点。HTML5 提供了明确语义标签，浏览器默认样式够用，先保证结构清晰：
<pre class="brush:php;toolbar:false;">
<meta charset="UTF-8"><title>张三的主页</title><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:me@zhangsan.dev">me@zhangsan.dev</a></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</footer></pre>
<ul><li>
<code><header></header>、<main></main>、<footer></footer> 是真实语义容器，不是装饰用的 <div>
<li>每个 <code><section></section> 应有且仅有一个 <h2></h2> 或更高级标题，形成逻辑层级
<meta name="viewport"> 会导致手机上显示异常（文字极小、无法缩放）——务必加上：<meta name="viewport" content="width=device-width, initial-scale=1">
CSS 就写 10 行内联样式，够用就行
别急着建 style.css 或引入 Bootstrap。个人主页流量低、样式简单，内联 <style></style> 更可控，也避免路径出错：
<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>
- 字体栈用
-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"></a>，漏掉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 访问——连域名都不用买。
