HTML如何做个人主页_html个人简介页面设计教程【手册】
作者：袖梨
2026-07-19
关键在于语义化结构、可访问性与响应式设计：用正确HTML标签组织内容，图片必带alt描述，链接防404且安全，CSS重排版轻装饰，兼顾深色模式与键盘导航。
直接用 HTML 写个人主页，不靠框架、不套模板，也能做出清晰、可访问、能上线的页面——关键不是“怎么炫”，而是“怎么稳”。
怎么组织语义化结构，避免堆出一坨
浏览器和辅助技术靠标签理解内容层级，不是靠你加了多少空格或换行。用错标签，SEO 和读屏体验会同步掉线。
-
<header>只放姓名、标语、主导航（最多 4 项），别塞进联系方式或项目列表 - 每个核心模块用独立
<section id="about">、<section id="work">，ID 必须唯一且小写，锚点跳转才可靠 - 头像、项目截图必须用
<img>标签，禁用background-image——否则alt属性没法写，无障碍和 SEO 全崩 -
<footer>只放版权、备案号、隐私链接等法律/元信息，别塞导航或社交图标
图片和链接怎么写才不出 404 和可访问性问题
本地测试时点开 404 链接只是报错；上线后用户看到的是“页面未找到”，第一印象就没了。
- 头像：
<img src="assets/images/avatar.jpg" alt="李四，UX 设计师，专注移动端交互">—— 描述角色+能力，不是“我的照片” - 项目截图：
<img src="assets/images/todo-app.png" alt="待办应用：左滑删除、深色模式开关、任务进度环形图"> - 邮箱链接必须带
mailto:前缀：<a href="mailto:[email protected]">联系我</a> - GitHub 等外部链接加
rel="noopener noreferrer"，防 opener 漏洞；锚点跳转如<a href="#top">回到顶部</a>，对应目标必须存在且 ID 大小写一致（<header id="top">）
CSS 怎么写才不翻车又显现代感
现代感不靠阴影堆叠或动画轰炸，而靠克制的排版节奏和移动优先的真实适配。
立即学习“前端免费学习笔记（深入）”；
-
max-width: 65ch控制正文宽度，比800px更适应不同字体渲染 -
line-height: 1.7是段落呼吸感的底线，低于 1.5 就显压抑 - 字体栈用系统默认：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;，不加载 Web Font 也能质感在线 - 响应式从第一行开始：HTML
<head>必须有<meta name="viewport" content="width=device-width, initial-scale=1">；所有宽度优先用%或rem，禁用固定px宽度 - 深色模式至少覆盖文字与背景：
@media (prefers-color-scheme: dark) { body { background: #121212; color: #e0e0e0; } }
最容易被忽略的其实是焦点样式——Chrome 点击链接后默认蓝色外框消失，很多人直接 outline: none 清掉，结果键盘用户完全无法导航。保留它，或用 outline: 2px solid #007aff 替代，才是真现代。
