用标签插入文本最稳妥，自带间距、换行和语义；避免滥用；标题用–；行内短文本用且需父容器；禁在写可见文字；innerHTML动态插入须防XSS。
直接往HTML里塞文字，用<p></p>最稳妥
浏览器渲染文本，最基础也最不容易出错的方式就是用段落标签。它自带上下间距、换行和语义，比<div>或<code><span></span>更符合“添加文本内容”的本意。
常见错误是把所有文字都塞进<div>——看起来能显示，但语义不清，对屏幕阅读器不友好，后续加CSS或JS时也容易误判结构。
<ul>
<li>纯展示性文字（如说明、介绍）优先用<code><p></p>
<h1></h1>到<h6></h6>，别用<p></p>加粗凑数<span></span>，但得有明确父容器，不能单独挂页面上
innerHTML动态插文字，小心XSS和标签闭合问题
JS里用element.innerHTML = "..."确实快，但它是把字符串当HTML解析的。用户输入或后端返回的内容如果含<script></script>或未转义的，可能直接执行代码或破坏结构。
比如el.innerHTML = "Hello 会触发解析错误；<code>"<img src="https://img.php.cn/" alt="HTML怎么添加文本内容_网页文字添加实用操作【操作】">"可能弹窗——这在管理后台或评论区特别危险。
立即学习“前端免费学习笔记（深入）”；
- 纯文本插入一律用
textContent，它自动转义所有HTML字符 - 真要插HTML，先用
DOMPurify.sanitize()过滤，别自己正则替换 - 拼接字符串时注意引号嵌套：
el.innerHTML = `<p>${name}</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a> <p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p> </div> <a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>`比"<p>" + name + "</p>"更安全易读 - 大量文本追加慎用
innerHTML +=，会重排整个子树，性能差
中文乱码？检查<meta charset>位置和值
网页文字变方块或问号，90%是编码声明没生效。必须放在最开头，且值要和文件实际保存格式一致——UTF-8就写utf-8，大小写敏感，不能写成UTF8或utf8。
常见坑：编辑器存成UTF-8带BOM，但<meta>写在BOM后面，浏览器可能忽略；或者服务器HTTP头Content-Type里指定了charset=gbk，直接覆盖HTML里的声明。
- VS Code右下角确认编码是
UTF-8（不带BOM） -
<meta charset="utf-8">必须是中第一个标签 - 用浏览器开发者工具的Network面板看响应头，确认
Content-Type没冲突 - 本地双击打开HTML文件时，BOM问题更明显，建议用本地服务器（如
python3 -m http.server）测试
空格和换行不显示？HTML默认合并空白符
写在HTML里的多个空格、制表符、回车，在页面上全被压成一个空格——这是规范行为，不是bug。想保留原格式，得靠CSS或特殊标签。
比如<p>hello<span> world</span></p>，中间4个空格只会显示1个；用<pre class="brush:php;toolbar:false;"></pre>能保留，但它自带等宽字体和上下边距，未必适合正文。
- 普通段落里需要空格，用
姓名 电话 - 整块代码或日志用
<pre class="brush:php;toolbar:false;"><code></code>组合，语义正确且保留缩进</pre> - CSS里设
white-space: pre-wrap可让元素内换行和空格生效，又保持自动换行 - 别用
<br>强行换行来模拟段落间距——那是结构混乱的信号，该用CSS的margin控制
文字能不能正常显示，核心就三件事：标签语义对不对、编码声明有没有效、空白处理合不合预期。细节都在这些地方卡住，而不是语法有多难。
