| 类别 | 知识点 | 技能点 |
|---|---|---|
| HTML 结构与语义化 | <footer> 标签语义 |
正确使用 <footer> 容器表示页脚区域 |
| 信息架构 | 页脚常见内容结构(版权信息、导航、联系信息、社交链接) | 规划和布局信息,避免冗余 |
| 可访问性(a11y) | ARIA 标签与可聚焦元素 | 给社交链接添加 aria-label,保证屏幕阅读器识别 |
| CSS 布局 | Flexbox 或 Grid 布局 | 控制对齐、分布、间距 |
| 排版与可读性 | 字体层次与配色对比 | 使用浅背景+深色文字或深背景+浅色文字 |
| 响应式设计 | 移动端与桌面端布局差异 | 媒体查询调整字体大小和排列方式 |
| 文件路径与资源管理 | 图片与图标的存放路径 | 使用相对路径,方便本地与线上同步 |
| 复用与模块化 | 公共组件提取 | 页脚可抽为 footer.html 模块,在多页面引用 |
<footer> 为补充信息区域,帮助弱视用户理解页面结构。你的博客页脚区内容主要包括: