footer必须是body的直接子元素才能保持页面级语义，small仅用于可省略的附属信息，多语言需显式标注lang属性，且需用flex布局确保视觉沉底。
footer 必须是 body 的直接子元素，否则语义失效
屏幕阅读器和 SEO 工具只认 footer 作为页面级版权锚点，前提是它直接挂在 body 下。嵌套在 div、main 或其他容器里，就降级为“某区块的页脚”，不再代表整站归属。
- ✅ 正确：
<main>...</main><footer>© 2024 MySite</footer> - ❌ 错误：
<div class="layout"><footer>...</footer></div>（语义丢失） - ❌ 错误：
<main><footer>...</footer></main>（被识别为文章页脚，非全站） - React/Vue 中务必检查最终 HTML 输出——JSX 写
<footer></footer>但被包裹进<div> 就白写了 <h3>small 不是“缩小字体”的快捷键，而是语义开关</h3> <p><code>small标签只该包裹真正可省略的附属信息，比如年份、保留条款、许可证类型。主版权主体（公司名、品牌名）必须保持正常语义权重，否则读屏软件会弱化甚至跳过关键内容。- ✅ 合理：
<footer><small>©</small> 2024 MySite <small>All rights reserved.</small></footer> - ❌ 错误：
<footer><small>© 2024 MySite. All rights reserved.</small></footer>（整句被降权） - 用 CSS 控制字号：
footer { font-size: 0.875rem; }，别依赖small实现视觉效果 - 动态年份注入时，确保
<time datetime="2024">2024</time>结构完整，避免 JS 拼接破坏语义
多语言版权必须显式标注 lang 属性
中英文混排的版权行，若不标记语言，屏幕阅读器可能用中文引擎读英文公司名（如把 “MySite” 读成 “买赛特”），搜索引擎也会因语言混乱降低信任分。
- ✅ 正确：
<footer lang="zh-CN"><small>©</small> 2024 我的网站有限公司 <small lang="en">All rights reserved.</small></footer> - ✅ 英文主站同理：
<footer lang="en">© 2024 MySite <small lang="zh-CN">版权所有</small></footer> - JS 动态插入内容后，记得同步设置
element.setAttribute('lang', 'en')，不能只改 innerHTML - 备案号、许可证编号等纯数字字段无需
lang，但带文字说明的部分（如“粤ICP备”）要按实际语言标注
footer 不自动沉底，靠 flex 布局撑高 body 才可靠
写对了
footer标签，不代表它会出现在视口底部。浏览器默认把它当普通块级元素处理，内容少时悬在半空，是常见困惑来源。根本解法是让body成为弹性容器，并分配剩余空间给主内容区。- 必须加：
html, body { height: 100%; }（缺一不可，旧版 Safari 对min-height: 100vh支持不稳定） - 必须加：
body { display: flex; flex-direction: column; } -
main或内容容器设flex: 1（等价于flex-grow: 1），占满剩余高度 -
footer不设height、不加position: fixed——固定定位会导致打印丢失、键盘弹出错位、读屏顺序断裂
复杂点在于：移动端小屏下长公司名易折行，得配合
white-space: nowrap和响应式font-size；无障碍检测工具（如 axe）会严格校验footer是否含实际内容（不能只放空格或符号），所以哪怕只有一行版权，也建议包在p或div里再塞进footer。 - ✅ 合理：
