用<p>标签插入文本最稳妥，自带间距、换行和语义；避免滥用<div>；标题用<h1>–<h6>；行内短文本用<span>且需父容器；禁在<head>写可见文字；innerHTML动态插入须防XSS。
直接往HTML里塞文字，用<p>最稳妥
浏览器渲染文本，最基础也最不容易出错的方式就是用段落标签。它自带上下间距、换行和语义，比<div>或<span>更符合“添加文本内容”的本意。
常见错误是把所有文字都塞进<div>——看起来能显示，但语义不清，对屏幕阅读器不友好，后续加CSS或JS时也容易误判结构。
- 纯展示性文字（如说明、介绍）优先用
<p> - 标题用
<h1>到<h6>，别用<p>加粗凑数 - 行内短文本（比如按钮里的“提交”）用
<span>，但得有明确父容器，不能单独挂页面上 - 避免在
<head>里写可见文字——它不会渲染，只影响元信息
innerHTML动态插文字，小心XSS和标签闭合问题
JS里用element.innerHTML = "..."确实快，但它是把字符串当HTML解析的。用户输入或后端返回的内容如果含<script>或未转义的<，可能直接执行代码或破坏结构。
比如el.innerHTML = "Hello 会触发解析错误；<code>"<img src="https://img.php.cn/" alt="HTML怎么添加文本内容_网页文字添加实用操作【操作】">"可能弹窗——这在管理后台或评论区特别危险。
立即学习“前端免费学习笔记（深入）”；
- 纯文本插入一律用
textContent，它自动转义所有HTML字符 - 真要插HTML，先用
DOMPurify.sanitize()过滤，别自己正则替换 - 拼接字符串时注意引号嵌套：
el.innerHTML = `<p>${name}</p>`比"<p>" + name + "</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/2481" title="Tago AI"><img src="https://img.php.cn/upload/ai_manual/001/246/273/176784238677602.png" alt="Tago AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/2481" title="Tago AI">Tago AI</a> <p>AI生成带货视频，专为电商卖货而生</p> </div> <a href="/ai/2481" title="Tago AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>"更安全易读 - 大量文本追加慎用
innerHTML +=，会重排整个子树，性能差
中文乱码？检查<meta charset>位置和值
网页文字变方块或问号，90%是编码声明没生效。必须放在<head>最开头，且值要和文件实际保存格式一致——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">必须是<head>中第一个标签 - 用浏览器开发者工具的Network面板看响应头，确认
Content-Type没冲突 - 本地双击打开HTML文件时，BOM问题更明显，建议用本地服务器（如
python3 -m http.server）测试
空格和换行不显示？HTML默认合并空白符
写在HTML里的多个空格、制表符、回车，在页面上全被压成一个空格——这是规范行为，不是bug。想保留原格式，得靠CSS或特殊标签。
比如<p>hello<span> world</span></p>，中间4个空格只会显示1个；用<pre>能保留，但它自带等宽字体和上下边距，未必适合正文。
- 普通段落里需要空格，用
姓名 电话 - 整块代码或日志用
<pre><code>组合，语义正确且保留缩进 - CSS里设
white-space: pre-wrap可让元素内换行和空格生效，又保持自动换行 - 别用
<br>强行换行来模拟段落间距——那是结构混乱的信号，该用CSS的margin控制
文字能不能正常显示，核心就三件事：标签语义对不对、编码声明有没有效、空白处理合不合预期。细节都在这些地方卡住，而不是语法有多难。
