页脚“网站地图”必须用语义化HTML实现：用<nav aria-label="...">包裹<ul><li><a></a></li></ul>结构，组标题用<h3>或<p>置于<ul>外，联系信息单独用<address>，<footer>须为<body>直接子元素且闭合。
页脚里的“网站地图”不是 sitemap.xml，而是用户能点、键盘能 tab、屏幕阅读器能识别的一组核心页面链接——写错结构，等于没写。
必须用 <nav> 包裹，且带 aria-label
只写 <footer><a href="/about">关于我们</a><a href="/contact">联系我们</a></footer> 是无效的。浏览器和读屏软件无法判断这是一组导航意图明确的链接。
-
<nav aria-label="站点导航">是硬性要求，aria-label不可省略，也不能写成空值或模糊值（如"links"） - 不要用
<div class="footer-nav">替代<nav>，语义断裂会导致 SEO 权重分散、键盘用户 Tab 时跳过整组 - 同一
<footer>中若有多组链接（如“产品”“支持”“公司”），每组都得单独套一个<nav aria-label="...">
链接必须放在 <ul> 里，标题用 <h3> 或 <p>
常见错误是把链接写成 首页 | 关于我们 | 产品 | 联系我们 这种纯文本拼接，或塞进 <div> 里加 CSS 横排——这会让屏幕阅读器当成一段普通文字读出来，而不是可操作的链接列表。
- 每组链接外层用
<ul>，每个链接用<li>包裹：<ul><li><a href="/">首页</a></li><li><a href="/about">关于我们</a></li></ul> - 组标题（如“快速访问”“公司信息”）必须放在
<ul>外部，用<h3>或<p>，不能塞进<ul>里破坏语义层级 - 总链接数建议控制在 12–15 个以内；优先放隐私政策、服务条款、联系方式、首页、关于我们、产品页等高频路径
联系信息必须用 <address>，不能和导航混在一起
如果页脚里同时有邮箱、电话或地址，它们和导航链接属于不同语义类型，必须物理隔离并用 <address> 显式标注——否则读屏软件不会识别为“联系方式”，搜索引擎也抓不到结构化数据。
立即学习“前端免费学习笔记（深入）”；
- 正确：
<address><a href="mailto:contact@example.com">contact@example.com</a></address> - 错误：
<p>contact@example.com</p>或直接写在<nav>里面 -
<address>只包联系信息，版权年份仍用<small>或<p>，别用它包<a href="/privacy">隐私政策</a>
<footer> 必须闭合且是 <body> 直接子元素
位置错了，再标准的内部结构也白搭。未闭合或嵌套在 <main> 里，会导致 DOM 错乱、 JS 获取不到节点、CSS 宽度失效。
- 正确顺序：
<body><header></header><main></main><footer></footer></body> - 禁止：
<body><main><footer></footer></main></body>（这是 article 级页脚，不是全站页脚） - 别依赖
position: fixed实现“贴底”——它会遮挡内容、破坏打印样式、让键盘导航跳失序
真正难的不是写几个链接，而是让每个标签都承担它该有的语义责任：<nav> 表明导航意图，<ul> 表明列表结构，<address> 表明联系属性，<footer> 的位置决定它是全局元信息还是局部收尾——漏掉任意一环，对机器来说就是“看不懂”。
