code标签不能当布局容器用，因其是行内元素（display: inline），不支持宽高、flex/grid布局及块级margin等属性，且html5禁止在code中嵌套div等流内容。
code 标签本身不参与页面布局，它只是语义化地包裹一段内联代码文本——浏览器默认把它渲染成等宽字体、浅灰背景（取决于 UA 样式），但不会改变文档流或触发任何布局行为。想靠它实现“布局”，属于用错标签。
为什么 code 标签不能当布局容器用
它本质是行内容器（display: inline），不能设宽高、不能 flex 或 grid 子项、无法设置 margin-top 等块级属性生效。常见错误现象包括：
- 给
code加width: 100%完全无效 - 在
code里嵌套div会触发 HTML5 规范警告：「code元素不允许包含流内容」 - 用
code包裹多行代码时，换行符被压缩成空格，实际显示为一行
单页应用中真正该用的代码展示方案
需要展示可读、可复制、带语法高亮的代码块？正确路径是：
- 用
pre包裹原始换行与缩进（保留空格和回车） - 在
pre内部嵌套code，表示「这段预格式化文本是一段代码」 - 通过 CSS 控制
pre code的字体、背景、边框、溢出滚动等视觉表现 - 如需高亮，用
highlight.js或Prism.js对pre code节点做解析，而非操作code自身
示例结构：
<pre class="brush:php;toolbar:false;"><code class="js">function hello() {
return "Hello, SPA";
}</code>
SPA 首页中嵌入代码示例的典型位置与注意事项
在单页应用的静态入口（如 index.html）中展示代码片段，常用于文档页、技术博客或 SDK 示例区。关键实操点：
- 确保
pre code不被框架的 hydration 过程意外清空——Vue/React 默认只 mount 到挂载点，但若把pre放在服务端渲染模板里，需保证 SSR 和 CSR 输出一致 - 避免在
code标签内写 JS 注释（如// 不能这样写），因为 HTML 解析器会把
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
