应使用<div role="contentinfo" class="site-footer"><p>© 2024 <a href="/about">公司名称</a> 版权所有</p></div>，其中role="contentinfo"确保辅助技术正确识别，<p>包裹保证语义清晰，class="site-footer"避免命名冲突，结构兼顾可访问性、维护性与布局可靠性。
版权声明区域用 <div> 实现的 HTML 结构怎么写
直接用语义化 <footer> 更合理，但若明确要求用 <div> 实现 _FOOTER 逻辑，核心是确保结构可访问、可维护、不干扰其他布局。不要套“版权 div”类名就完事，得兼顾屏幕阅读器识别和 CSS 定位意图。
推荐基础结构：
<div role="contentinfo" class="site-footer"> <p>© 2024 <a href="/about">公司名称</a> 版权所有</p> </div>
-
role="contentinfo"是关键：它让辅助技术（如读屏软件）把该<div>当作页脚内容区识别，弥补语义缺失 - 避免用
id="footer"或class="footer"单独撑样式——容易和 JS 选择器或第三方库冲突，加前缀如site-footer更稳妥 - 内部用
<p>包裹文字，不用<div>嵌套<div>，否则语义扁平、缩放时行高易错乱
怎样让 <div class="site-footer"> 真正“固定在页面底部”
纯靠 position: absolute 或 fixed 很容易压住内容、遮挡链接、破坏打印样式。真正可靠的底部定位，取决于整体布局模型。
- 如果页面高度不足一屏，要“粘底”（sticky footer）：父容器需设
min-height: 100vh，且主内容区用flex: 1占满剩余空间，.site-footer放在 flex 容器末尾 - 如果只是“始终置底”，且不介意遮挡内容（如工具类后台页），才用
position: fixed; bottom: 0，但必须加z-index和padding-bottom防正文被盖 - 别用
margin-top: 2000px或空<div>撑高——响应式断点下会崩，且 SEO 工具可能忽略 footer 内容
.site-footer 的 CSS 样式常见踩坑点
版权区域看着简单，但字体、链接、间距稍不注意就引发可访问性问题或移动端错位。
- 字号别硬写
font-size: 12px：至少用0.875rem（即 14px），保证缩放时文字可读；iOS Safari 对小于 16px 的非黑体字会强制放大，导致布局跳动 - 链接颜色不能只靠
color: #666：必须设text-decoration: underline或明显 hover 状态，否则色觉障碍用户无法识别可点击项 - 左右内边距别写死
padding: 1rem 20px：移动端小屏会溢出，改用padding-inline: 1rem或padding: 1rem clamp(1rem, 5vw, 2rem) - 避免
display: table-cell居中年份+公司名——IE11 已淘汰，现代 Flex/Grid 更稳
JS 动态更新版权年份时为什么 document.querySelector('.site-footer') 找不到元素
不是选择器写错了，大概率是执行时机问题：脚本放在 <head> 或未加 defer，DOM 还没解析到 .site-footer 就执行了查询。
- 最简解法：把脚本放页面末尾，在
</body>前；或加defer属性 - 更健壮写法：用
DOMContentLoaded事件包裹，而不是window.onload（后者等资源加载完，太晚） - 别用
document.write()插入版权——会清空整个页面，已禁用多年 - 示例安全写法：
document.addEventListener('DOMContentLoaded', () => { const footer = document.querySelector('.site-footer'); if (footer) { const year = new Date().getFullYear(); footer.innerHTML = `© ${year} 公司名称 版权所有`; } });
版权声明区域不是视觉收尾，而是法律与可访问性的交汇点。用 <div> 实现时，role 属性、布局上下文、动态更新时机，这三处最容易被跳过，但每处都直接影响合规性与实际可用性。
