语义表示系统输出，但需配合white-space: pre或嵌套保留换行缩进；动态插入时须防XSS并正确处理换行符，推荐结构以兼顾语义与格式。

<samp></samp> 标签语义上用于表示程序或系统输出的样本文本（如命令行反馈、错误消息），但它本身不保留换行和空格——浏览器会像处理普通文本一样折叠空白符，因此直接用 <samp></samp> 展示多行堆栈信息会导致格式完全丢失。

用 + white-space: pre 保持原始缩进与换行

最简实用方案：将堆栈内容包裹在 <samp></samp> 中，并通过 CSS 强制保留空白符：

• 给 <samp></samp> 添加样式 white-space: pre（或 pre-wrap 更友好）
• 确保堆栈字符串中的换行符（\n）和空格被原样传入 HTML（服务端转义或前端 JS 插入时注意）
• 示例 HTML 片段：

TypeError: Cannot read property 'length' of undefined
  at foo (script.js:12:15)
  at bar (script.js:8:3)

更健壮的做法：配合 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 语义嵌套&lt;/H3&gt; &lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 天然支持空白符保留，而 &lt;code&gt;&lt;samp&gt;&lt;/code&gt; 表达“这是系统输出”的语义。二者可合法嵌套（HTML5 允许 &lt;code&gt;&lt;samp&gt;&lt;/code&gt; 包含流内容）：&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill9263&quot; title=&quot;Html2md&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg&quot; alt=&quot;Html2md&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill9263&quot; title=&quot;Html2md&quot;&gt;Html2md&lt;/a&gt; &lt;p&gt;使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill9263&quot; title=&quot;Html2md&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul&gt; &lt;li&gt;用 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 确保格式，用内部 &lt;code&gt;&lt;samp&gt;&lt;/code&gt; 明确语义&lt;/li&gt; &lt;li&gt;结构清晰，利于无障碍访问和 SEO&lt;/li&gt; &lt;li&gt;示例：&lt;/li&gt; &lt;/ul&gt; &lt;font face=&quot;monospace&quot;&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;samp&gt;RangeError: Maximum call stack size exceeded&lt;br&gt; at factorial (math.js:4:12)&lt;br&gt; at factorial (math.js:4:12)&lt;br&gt; ... repeated 12345 times&lt;/samp&gt;</pre> <h3>动态插入时注意转义与换行符处理</h3> <p>若堆栈来自 JavaScript（如 <code>error.stack），直接 innerHTML 可能引发 XSS 或丢失换行：

立即学习“前端免费学习笔记（深入）”；

• 不要直接 element.innerHTML = '<samp>' + error.stack + '</samp>'
• 应先用 document.createTextNode() 或 textContent 安全插入文本，再用 <pre class="brush:php;toolbar:false;">&lt;samp&gt;&lt;/samp&gt;</pre> 包裹
• 或使用 error.stack.replace(/\n/g, '<br>') 配合 white-space: pre ——但推荐用 <pre class="brush:php;toolbar:false;"></pre> 更可靠

视觉优化建议

堆栈信息需易读，可补充少量样式提升体验：

• 设置等宽字体：font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace
• 添加浅灰背景和圆角边框增强区分度
• 对文件路径或错误类型关键词，可用 <mark></mark> 高亮（需额外解析，非必需）