语义化标签需精准匹配内容逻辑：header用于概览信息（头像用figure+img+figcaption，描述用dl），main下用section分块主体内容并配h2标题，aside仅放强相关补充信息，footer专用于页面级底部信息。
个人信息展示页面用语义化标签，核心是让结构反映内容逻辑，而不是套个标签了事。header、main、section、aside、figure 这些标签各有明确职责，混用或错用会削弱可访问性、影响 SEO，后期维护也容易出问题。
顶部区域用 header 包裹概览信息
header 不等于“最上面那块”，而是承载页面介绍性内容的容器。它适合放头像、昵称、职业身份、一句话简介等引导性信息，但不要塞进主导航或登录入口——那些属于独立模块，应归入 nav 或单独处理。
- 头像建议用 figure + img + figcaption 组合：figure 表明这是自包含的媒体单元，figcaption 可写“个人照片”或留空，便于屏幕阅读器识别
- 昵称、职位、简介这类描述性字段，优先用 dl（定义列表）：dt 做标签（如“职位”），dd 写内容（如“前端工程师”），比一堆 p 或 div 更语义清晰
- 避免把整个导航栏丢进 header——如果页面有顶部全局导航，它应该单独用 nav 标签包裹，与 header 并列
主体内容按逻辑分块，用 section 而非 div
section 表示文档中有主题的内容分组，每个 section 应有明确中心，且最好带标题（h2–h6）。它不是视觉容器，而是语义段落。
- 例如“联系方式”“教育背景”“技能专长”“项目经历”这些模块，各自用一个 section 包裹，并配 h2 标题
- section 内部不用再嵌套 main——main 全局唯一，且只出现在 body 直接子级；section 是 main 的子元素，不能反过来
- 纯为了加间距或背景色而加的“空容器”，不传递内容意义，就该用 div，别硬套 section
侧边补充信息慎用 aside，先看是否相关
aside 的关键是“可删不伤主逻辑”和“与当前上下文强相关”。它不是“右边那块”的代名词。
- 适合放进 aside 的：当前用户的 GitHub 主页链接（若页面讲的是技术能力）、推荐读物（在“学习经历”section 旁）、证书截图说明（紧邻“资质认证”section）
- 不适合的：全站通用的右侧广告位、天气插件、无关的社交图标栏——这些和当前用户信息无直接语义关联，用 div 即可
- 如果内容只是视觉上靠右，但语义上属于某个 section 的一部分（比如技能雷达图放在“技能专长”右侧），那就留在 section 内，用 CSS 布局，别拆出去套 aside
底部版权与联系入口用 footer，但别滥用
footer 是页面级收尾信息容器，不是每个 section 都要配一个。它通常出现在 main 之后、body 结束前。
- 页面底部的版权年份、备案号、邮箱/电话等基础联络方式，归 footer 最自然
- section 内部不需要 footer；比如“工作经历”section 末尾写“2020–2023”，那是时间信息，用 time 标签更准确
- 操作按钮（如“下载简历”“发送消息”）必须是 button 元素，或带 role="button" 的元素，不能用 div 或 span 模拟，否则对键盘和屏幕阅读器不友好
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
