footer文字水平居中应直接设置footer的text-align: center，因其是块级元素，该属性专管内部行内内容排列；错误做法包括将text-align写在p或span上、与flex混用或误用margin: 0 auto。
用 <footer></footer> 包裹 <p></p>，再通过 CSS 的 text-align: center 或 display: flex 居中——别用 align="center"、style="text-align:center" 直接写在 <p></p> 上，会破坏语义和可访问性。
为什么不能直接给 <p></p> 加 style="text-align:center"
这不是“能不能显示居中”的问题，而是“屏幕阅读器怎么读”和“搜索引擎怎么理解”的问题。把样式硬塞进内联属性，会让辅助技术误判段落结构；更糟的是，有些 CMS 或静态生成器会 strip 内联 style，导致生产环境突然失焦。真正该控制的是容器行为，不是文本本身。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<footer></footer> 必须闭合且放在
常见错误是把 <footer></footer> 塞进 <main></main> 里，或漏写闭合标签：
-
<main><footer>© 2024</footer></main>❌ —— 浏览器会自动补全，但 DOM 结构错乱，JS 查不到document.querySelector('footer') -
<footer>© 2024</footer>❌ —— 没闭合，后续所有 HTML 都被吞成它的子节点 -
<main></main><footer>© 2024</footer>✅ —— 正确位置，语义清晰，CSS 可靠作用
居中方式选 text-align 还是 flex？
取决于你是否需要同时控制垂直对齐或响应式换行：
- 纯文字版权（单行、无链接）：用
footer { text-align: center; }最轻量，兼容 IE9+ - 带多个链接（如「隐私政策•用户协议•联系我们」）：必须用
display: flex; justify-content: center;，否则text-align对 inline 元素分隔符（•）支持不稳定，小屏易折行错位 - 如果页脚有固定高度（比如 60px），且需上下居中：加
align-items: center;，但注意line-height会和 flex 冲突，此时删掉line-height
链接混排时的分隔与可访问性
把多个 <a></a> 塞进同一个 <p></p> 里，不加分隔，读屏软件会连读成一长串不可分割的字符串。正确做法：
- 每个链接前后加空格，中间用
•（HTML 实体•或 Unicode 字符）分隔 - 避免用
<br>换行——它破坏流式布局，打印时可能断裂 - 如果链接数量多（>4 个），建议改用
<nav></nav>+<ul></ul>，并加role="navigation"显式声明用途 - 所有外链必须带
rel="noopener"，防止安全漏洞
真正麻烦的不是居中本身，而是居中之后的语义连续性和键盘导航路径——比如 Tab 键从主内容跳到页脚时，是否能自然落到第一个链接上，而不是卡在空白处。这取决于你有没有用 <footer></footer> 正确包裹、有没有给链接留足够点击热区、以及是否测试过焦点顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
