document.write 易清空文档且不兼容现代开发，应改用 innerHTML + 渲染三角形，确保等宽字体与换行保留。
用 document.write 打印三角形容易出错
直接在 HTML 中用 document.write 拼接字符串画三角形，看似简单，但页面加载完成后调用会清空整个文档——这是最常踩的坑。它只适合极早期、无交互、纯演示的脚本，现代项目基本不用。
- 如果脚本放在
底部且未加defer，可能因 DOM 未就绪而报document is not defined -
document.write输出的换行符\n在 HTML 中不生效，必须用<br>或<pre class="brush:php;toolbar:false;"></code> 包裹</li><li>输出内容会被当作 HTML 解析，若三角形字符含 <code><</code> 或 <code>></code>（比如用 <code><></code> 当边框），会触发标签误解析</li></ul><H3>更稳妥的做法：用 <code>innerHTML</code> + <code><pre class="brush:php;toolbar:false;"></code> 渲染</H3><p>把三角形当纯文本渲染，避免 HTML 解析干扰，也方便控制格式。关键是用 <code><pre class="brush:php;toolbar:false;"></code> 保留空格和换行，再用 <code>innerHTML</code> 注入。</p><ul><li>三角形每行需用空格对齐，不能靠 CSS 缩进——因为等宽字体才能保证形状准确</li><li>推荐用 <code><pre class="brush:php;toolbar:false;" style="font-family: monospace;"></code> 显式声明等宽字体，防某些系统默认非等宽</li><li>生成逻辑建议用循环拼接字符串，而非反复修改 <code>innerHTML</code>，减少重排</li></ul><p>示例（打印 5 行星号三角形）：</p><pre class="brush:php;toolbar:false;">const rows = 5; let triangle = ''; for (let i = 1; i <= rows; i++) { const spaces = ' '.repeat(rows - i); const stars = '*'.repeat(2 * i - 1); triangle += spaces + stars + '\n'; } document.getElementById('output').innerHTML = `<pre class="brush:php;toolbar:false;">${triangle}</pre>`;<h3>用 CSS Grid 或 Flex 实现响应式三角形</h3> <p>如果三角形要适配不同屏幕、支持点击交互或动画，硬编码字符就捉襟见肘了。此时应放弃“打印”，改用 DOM 元素 + CSS 布局。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul><li>每行一个 <code><div class="row">，内部用 <code><span></span>表示每个点，便于绑定事件 - Grid 方案：设容器
display: grid，用grid-template-columns: repeat(auto-fit, minmax(1em, 1fr))自适应列数 - 注意：CSS 三角形（如
border技巧）只能画单色实心小三角，不适合多行字符组成的“大三角形” - 用户可控输入（比如行数来自 URL 参数）必须校验范围，防止超大数字拖垮服务或生成巨量 DOM
- 未转义的输出可能引入 XSS，例如把
<script></script>当作“字符”混入三角形字符串 - 纯前端生成更安全，除非你明确需要 SEO 可见性或首屏直出
服务端或构建时生成？小心模板注入风险
如果是在 Node.js 模板（如 EJS、Pug）或静态站点生成器中预渲染三角形，别直接插变量进 HTML 字符串。
字符三角形本质是格式化文本输出，不是图形渲染任务。真正卡住人的往往不是算法，而是对 HTML 文本渲染机制的误判——比如忘了 <pre class="brush:php;toolbar:false;"></pre>，或者以为 \n 能自动换行。
