应优先使用textcontent + setinterval逐字写入，安全高效；纯css方案仅适用于单行静态文本且需等宽字体和inline-block布局；含html或换行时须清洗处理并避免innerhtml拼接。
<p></p>、<h1></h1>、<span></span> 这些标签本身不带打字机行为，得靠 JS 控制内容逐字写入或 CSS 动画“遮罩推进”——选哪个取决于你是否需要动态响应、兼容性要求、以及文本是否含换行或 HTML 标签。
用 textContent + setInterval 往任意块级/内联标签里写字符最稳
所有常见文本容器（<p></p>、<h1></h1>、<div>、<code><span></span>）都支持直接赋值 textContent，这是安全、无副作用、且浏览器解析开销最低的方式。
- 必须提前获取元素，比如
const el = document.getElementById('typewriter');，否则el.textContent会报Cannot set property 'textContent' of null - 别用
innerHTML += char在循环里反复拼接——触发多次 DOM 重排，低端设备明显卡顿 - 推荐用
text.slice(0, i)截取，不是text.substring(0, i+1)，避免多一位导致重复显示 - 中文、emoji、全角空格都算一个字符，
text.length可直接用，不用额外处理 - 若标签是
<span></span>且父容器有换行限制，记得加white-space: nowrap防断行错位
用 @keyframes + steps() 实现纯 CSS 打字机，只适用于 <span></span> 或 <p></p> 等单行静态文本
CSS 方案本质是控制容器宽度从 0 拓展到刚好容纳文本的长度，靠 overflow: hidden 遮住未“打出”的部分。它不操作 DOM，所以天生轻量，但对标签有隐性要求：
- 容器必须设
display: inline-block或inline-flex，否则width动画无效 - 必须用等宽字体（如
ui-monospace、Consolas），否则字符推进节奏和光标闪烁不同步 -
steps(20, end)中的20要等于目标文本实际字符数（含空格），写错会导致最后一两个字跳过或卡住 -
<h1></h1>默认是块级且可能有 margin/padding，需重置margin: 0; padding: 0;再套动画，否则宽度计算偏移 - 不能用于含
<br>或换行符的多行文本——white-space: nowrap会强制压成一行
含 HTML 标签时，别硬塞 innerHTML，先清洗再挂载
如果你非要在打字过程中渲染 <strong></strong> 或 <em></em>，直接 el.innerHTML += '<strong>hi</strong>' 是高危操作：XSS 风险、标签被转义、DOM 结构意外嵌套。
- 优先考虑“纯文本打字 + CSS 伪类高亮”，比如用
<span class="highlight">hi</span>，再配.highlight { font-weight: bold; } - 真要解析 HTML，用
new DOMParser().parseFromString(htmlStr, 'text/html')提取子节点，再逐个appendChild，别走字符串拼接路径 - 若文本来自用户输入或 API，务必先用
textContent清洗一遍原始字符串，再决定是否进入 HTML 解析分支 -
<pre class="brush:php;toolbar:false;"></pre>标签天然保留空白和换行，但打字时需手动把\n替换为<br>并确保父容器允许换行（white-space: pre）
真正容易被忽略的点是：光标不是用 | 字符硬写的，而是用 ::after 伪元素 + border-right + currentColor 继承文字色；否则复制文本会带上多余符号，屏幕阅读器也会误读。这个细节在 <span></span> 和 <p></p> 上表现一致，但在 <h1></h1> 等标题标签里更容易因默认样式干扰而失效。
