现代HTML个人页应使用<header>、<main>、<footer>构建语义骨架，辅以<nav>、<aside>、<section>划分内容；需设viewport、用flex布局、避免嵌套滥用，一切以可访问性与真实场景为先。
用 <header>、<main>、<footer> 搭出语义清晰的骨架
现代 HTML 个人页面不需要靠 <div> 堆砌结构，浏览器和屏幕阅读器都依赖语义化标签理解内容层级。最简但够用的结构就是三块：顶部导航/标题区、主体内容区、底部信息区。
常见错误是把所有内容塞进一个 <div id="wrapper">，导致 SEO 不友好、键盘导航混乱、后续加 CSS 也难定位。
-
<header>放站点名、导航链接（<nav>）、头像或标语 —— 不要放正文段落 -
<main>只能出现一次，且必须包含页面核心内容（比如“关于我”“项目列表”“博客摘要”） -
<footer>放版权、联系方式、社交链接；别塞进版权声明以外的导航
个人页常需要的补充区域：用 <aside> 和 <section> 分离辅助内容
简历类或作品集页面经常有侧边栏（技能标签、在线状态、联系表单），或者多个逻辑区块（“工作经历”“教育背景”“开源项目”）。这时候不能全塞 <main> 里，否则语义失焦。
<aside> 适合放与当前页面相关但非核心的内容，比如右侧技能雷达图、GitHub stats 卡片；<section> 则用于划分主内容里的独立主题块，每个应有 <h2> 或更高级标题。
立即学习“前端免费学习笔记（深入）”；
- 避免用
<aside>包裹主导航或面包屑 —— 那属于<header>或<nav> - 每个
<section>必须有可见标题（<h2>~<h6>），否则会被读屏软件跳过 - 如果某区块只是视觉分隔（如纯装饰性分割线），用 CSS 实现，别硬加空
<section>
响应式基础结构：用 <meta name="viewport"> 和 flex 容器起步
没加 viewport 标签的个人页在手机上会缩成一团，文字小到无法阅读 —— 这是最常被忽略的「结构性」问题，它直接影响整个布局能否成立。
结构层面建议从 CSS Flexbox 入手组织区块顺序，而不是浮动或绝对定位。比如让 <header> 固定在顶、<main> 自适应高度、<footer> 粘底，用 display: flex; flex-direction: column; 在 <body> 上就能稳住基本流式。
- 必须在
<head>中写：<meta name="viewport" content="width=device-width, initial-scale=1"> - 不要给
<body>设固定高度，否则<main>内容超长时<footer>会被遮挡 - 移动端优先的话，
<aside>在小屏建议用order属性移到<main>下方，而非隐藏
避免嵌套陷阱：HTML5 结构不等于可以无限套标签
有人看到语义化就层层包裹：<section><article><section><div><p>……其实多数个人页根本用不到 <article> 或 <figure>。滥用反而让结构变重、可访问性下降。
判断标准很简单：只有当一块内容能独立被 RSS 抓取、或脱离当前页面仍有完整意义（比如一篇博客、一个作品详情），才用 <article>；否则用 <section> 更稳妥。
-
<nav>应该只包真正导航链接，别把“友情链接”或“合作伙伴”也塞进去 - 简历中的“2020–2022 | XX公司”这类时间+公司组合，用
<time>包时间，其余用<p>或<span>即可，不必强套<article> - 所有语义标签最终要服务于真实使用场景：搜索引擎怎么读、键盘用户怎么 tab、屏幕阅读器怎么 announce —— 不是为“看起来规范”而堆砌
