现代HTML个人页应使用、、构建语义骨架，辅以、、划分内容；需设viewport、用flex布局、避免嵌套滥用，一切以可访问性与真实场景为先。
用
现代 HTML 个人页面不需要靠 常见错误是把所有内容塞进一个 简历类或作品集页面经常有侧边栏（技能标签、在线状态、联系表单），或者多个逻辑区块（“工作经历”“教育背景”“开源项目”）。这时候不能全塞 立即学习“前端免费学习笔记（深入）”； 没加 viewport 标签的个人页在手机上会缩成一团，文字小到无法阅读 —— 这是最常被忽略的「结构性」问题，它直接影响整个布局能否成立。 结构层面建议从 CSS Flexbox 入手组织区块顺序，而不是浮动或绝对定位。比如让 有人看到语义化就层层包裹： ……其实多数个人页根本用不到 判断标准很简单：只有当一块内容能独立被 RSS 抓取、或脱离当前页面仍有完整意义（比如一篇博客、一个作品详情），才用
）、头像或标语 —— 不要放正文段落 只能出现一次，且必须包含页面核心内容（比如“关于我”“项目列表”“博客摘要”） 放版权、联系方式、社交链接；别塞进版权声明以外的导航个人页常需要的补充区域：用
和 分离辅助内容 里，否则语义失焦。 适合放与当前页面相关但非核心的内容，比如右侧技能雷达图、GitHub stats 卡片； 则用于划分主内容里的独立主题块，每个应有 或更高级标题。
包裹主导航或面包屑 —— 那属于
必须有可见标题（~），否则会被读屏软件跳过
响应式基础结构：用
和 flex 容器起步 自适应高度、 粘底，用 display: flex; flex-direction: column; 在 上就能稳住基本流式。
中写：
设固定高度，否则 内容超长时 会被遮挡 在小屏建议用 order 属性移到 下方，而非隐藏避免嵌套陷阱：HTML5 结构不等于可以无限套标签
或 ；否则用 更稳妥。
应该只包真正导航链接，别把“友情链接”或“合作伙伴”也塞进去 包时间，其余用 或 即可，不必强套
