版权声明必须用原生作为直接子元素，不可用或替代；©须用html实体，配合lang属性与flexbox实现语义正确、可访问且粘性到底部的版权展示。
版权声明必须用 footer，不是 div 或 small
直接用 div class="footer" 或只套 small 是常见语义错误。屏幕阅读器会跳过它，搜索引擎不识别为版权区域，结构化数据提取失败。W3C 明确要求：主版权声明必须是 body 的直接子元素，且标签名必须是 footer。
React/Vue 项目里尤其容易踩坑：组件内写了 footer，但最终渲染时被父级 div 包裹，或路由切换后 footer 被动态卸载——结果页面源码里根本没有顶层 footer。
- 正确结构：
<main>...</main><footer>© 2026 MySite</footer> - 错误写法：
<div class="footer">© 2026</div>、<small>© 2026</small>、<footer><div>...</div></footer>（嵌套多余容器） - 多语言站点需同步
lang属性：<footer lang="zh-CN">© 2026 公司名称</footer>
© 必须用 HTML 实体，不能复制粘贴或硬编码 Unicode
直接从 Word 复制 ©、键盘敲出 ©、或写 \u00A9 在非 UTF-8 环境下极易乱码，尤其在旧版 IE、GBK 编码页面或某些构建工具中显示为方块。唯一可靠写法是 ©（注意 & 前后无空格）。
JS 动态注入时更要小心：element.innerHTML = "© 2026" 可能触发 XSS 风险；应优先用 textContent：element.textContent = "\u00A9 2026" 或更稳妥的 "© " + new Date().getFullYear()。
- 服务端模板（如 EJS、Nunjucks）中直接写
©即可 - JSX 中不要写
{"©"}，改用{"\u00A9"}或{String.fromCodePoint(0x00A9)} - 确认 HTML 文件保存为 UTF-8 无 BOM，且
<meta charset="utf-8">在最顶部
让 footer 真正“粘”在视口底部，别靠 position: fixed
position: fixed 表面简单，实则问题密集：内容高过视口时 footer 悬浮中间、移动端键盘弹出后错位、遮挡滚动到底部的段落文字。它脱离文档流，违背 footer 作为“页面逻辑结尾”的语义。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
现代标准解法是 flexbox：给 body 设 display: flex; flex-direction: column; min-height: 100vh，主内容区（如 main）加 flex: 1，footer 自然被撑到底部。
- 避免在
footer上写height或margin-top，否则破坏 flex 布局逻辑 - IE11 兼容需加
-ms-flex: 1前缀 - 若用 CSS Grid 替代，可用
grid-template-rows: 1fr auto，效果等价但兼容性略低
页脚里要不要用 small？只在补充说明时用
small 不是“缩小字体”的快捷键，而是专用于法律/版权类副文本的语义标签。主版权声明本身不该套 small；只有像“含开源许可详见 LICENSE 文件”这类附加说明才适合。
嵌套 small 无效——第二层不会更小，浏览器默认缩放也不统一（Chrome 80%，Firefox 83%）。真要控制字号，用 CSS：small { font-size: 0.875rem; }。
- 正确：
<footer><p>© 2026 MySite</p> <small>开源组件许可信息见 @#@#@#@#@#@#@#@#@#@0</small></footer> - 错误：
<footer><small>© 2026 MySite</small></footer>（主版权降级为次要内容） - 更糟：
<small><small>...</small></small>（语义冗余，视觉无变化）
真正难的不是写出那行 ©，而是确保它在不同设备、不同辅助技术、不同构建流程下始终语义正确、位置可靠、字符不崩。尤其是单页应用里，footer 的存在性、lang 属性同步、以及动态年份更新，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
