现代HTML个人页应使用、、构建语义骨架，辅以、、划分内容；需设viewport、用flex布局、避免嵌套滥用，一切以可访问性与真实场景为先。

用

、

、

搭出语义清晰的骨架

现代 HTML 个人页面不需要靠

堆砌结构，浏览器和屏幕阅读器都依赖语义化标签理解内容层级。最简但够用的结构就是三块：顶部导航/标题区、主体内容区、底部信息区。

常见错误是把所有内容塞进一个

，导致 SEO 不友好、键盘导航混乱、后续加 CSS 也难定位。

• 放站点名、导航链接（
  ）、头像或标语 —— 不要放正文段落
• 只能出现一次，且必须包含页面核心内容（比如“关于我”“项目列表”“博客摘要”）
• 放版权、联系方式、社交链接；别塞进版权声明以外的导航

个人页常需要的补充区域：用

和

分离辅助内容

简历类或作品集页面经常有侧边栏（技能标签、在线状态、联系表单），或者多个逻辑区块（“工作经历”“教育背景”“开源项目”）。这时候不能全塞

里，否则语义失焦。

适合放与当前页面相关但非核心的内容，比如右侧技能雷达图、GitHub stats 卡片；

则用于划分主内容里的独立主题块，每个应有

或更高级标题。

• 避免用
  包裹主导航或面包屑 —— 那属于
  或
• 每个
  必须有可见标题（
  ~
  ），否则会被读屏软件跳过
• 如果某区块只是视觉分隔（如纯装饰性分割线），用 CSS 实现，别硬加空

响应式基础结构：用 和 flex 容器起步

没加 viewport 标签的个人页在手机上会缩成一团，文字小到无法阅读 —— 这是最常被忽略的「结构性」问题，它直接影响整个布局能否成立。

结构层面建议从 CSS Flexbox 入手组织区块顺序，而不是浮动或绝对定位。比如让

固定在顶、

自适应高度、

粘底，用 display: flex; flex-direction: column; 在 上就能稳住基本流式。

超级简历WonderCV

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

下载

• 必须在 中写：
• 不要给 设固定高度，否则
  内容超长时
  会被遮挡
• 移动端优先的话，
  在小屏建议用 order 属性移到
  下方，而非隐藏

避免嵌套陷阱：HTML5 结构不等于可以无限套标签

有人看到语义化就层层包裹：

……其实多数个人页根本用不到

或

。滥用反而让结构变重、可访问性下降。

判断标准很简单：只有当一块内容能独立被 RSS 抓取、或脱离当前页面仍有完整意义（比如一篇博客、一个作品详情），才用

；否则用

更稳妥。

• 应该只包真正导航链接，别把“友情链接”或“合作伙伴”也塞进去
• 简历中的“2020–2022 | XX公司”这类时间+公司组合，用 包时间，其余用
  或 即可，不必强套
• 所有语义标签最终要服务于真实使用场景：搜索引擎怎么读、键盘用户怎么 tab、屏幕阅读器怎么 announce —— 不是为“看起来规范”而堆砌

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！