HTML属性值中引号需用实体编码（如"、'），换行符用 ，JSON嵌入data-*属性须先JSON.stringify再HTML实体编码，URL参数必须用encodeURIComponent整体编码。
HTML 属性值里写双引号或单引号怎么办
直接用反斜杠转义？不行。HTML 不认 \ 这套，那是 JS 或 Shell 的习惯。属性值本身用双引号包裹时，里头的双引号必须换成 "；用单引号包裹时，里头的单引号得写成 '（注意：IE8 及更早不支持 '，得改用 '）。
常见错误现象：<button onclick="alert("Hello")"> —— 浏览器在第一个 " 就截断了属性，后面全变垃圾文本，控制台可能报“Unclosed string”或直接静默失败。
- 推荐统一用双引号包属性，内部特殊字符用实体：比如
onclick="alert("It's working!")" - 动态拼接时（如 PHP/JS 模板），别手写实体，用对应语言的安全函数：
htmlspecialchars()（PHP）、DOMPurify.sanitize()（JS）或模板引擎的自动转义（如 Vue 的{{ }}、React 的 JSX 默认防护） - 不要依赖 JS 字符串转义来修复 HTML 属性：把
alert(\"Hi\")直接塞进onclick里，照样崩 —— 因为 HTML 解析器根本不会去执行 JS 转义逻辑
value 属性含换行或制表符怎么处理
value 是普通属性，但换行（\n）、制表（\t）在 HTML 属性值中会被折叠成空格，甚至导致解析中断。浏览器会把属性值里的所有空白符序列（包括换行）归一为单个空格，除非你显式编码。
使用场景：后端吐出带格式的字符串（如用户输入的地址、备注），要塞进 <input value="..."> 或 <textarea> 的 value 属性。
立即学习“前端免费学习笔记（深入）”；
-
<input value="line1<br>line2">——<br>不是换行，只是字面字符串，没意义 - 正确做法：换行用
value="first second"在 input 中显示为两行（仅限<textarea>；<input type="text">仍只显示为空格） - 更稳妥：不用
value属性传复杂内容，改用 JS 动态赋值：el.value = "line1\nline2"，由 JS 引擎处理原始字符
JSON 数据嵌入 data-* 属性怎么不出错
很多人把 JSON 字符串直接塞进 data-config='{"key":"val"}'，结果遇到引号嵌套、斜杠、Unicode 就挂。根本原因是：HTML 属性值解析优先级高于 JSON 解析，浏览器先按 HTML 规则切分属性，再把结果当字符串交给 JS。
错误示例：data-info='{"name":"O'Reilly"}' —— 单引号冲突，属性在 O' 处截断；data-raw='{"path":"C:\temp"}' —— \t 被当制表符，JSON.parse 报错。
- 最简方案：用
JSON.stringify()生成字符串后，再用htmlspecialchars()（PHP）或DOMPurify.escape()（JS）做 HTML 实体编码 - 实操建议：服务端输出时，统一走
json_encode($data, JSON_UNESCAPED_UNICODE | JSON_HEX_QUOT)（PHP），再包裹双引号并实体化，如：data-json="= htmlspecialchars(json_encode($arr), ENT_QUOTES, 'UTF-8') ?>" - 前端读取时别直接
JSON.parse(el.dataset.json)，先用el.getAttribute('data-json')拿原始字符串，再 parse —— dataset 会自动解码实体，但也会悄悄删掉某些控制字符
URL 作为 href/src 的参数含 & 或 = 怎么防截断
href 和 src 是 URL 属性，但 HTML 解析器不校验 URL 格式，它只认属性边界。所以 href="page.php?a=1&b=2" 看似正常，一旦 a 的值本身含 &（比如 a=foo&bar），就会被当成新参数起点，后续内容全乱。
典型翻车点：从日志或搜索词生成分享链接，用户搜了 java & javascript，后端没编码就塞进 href，链接变成 ?q=java & javascript，实际只传了 q=java。
- 必须对整个 URL 做
encodeURIComponent()（JS）或urlencode()（PHP），不是只编参数值，而是编完整 query string 后再拼接 - 不要手动替换
&为&：这是 HTML 实体，不是 URL 编码，浏览器收到后仍当分隔符；正确是变成%26 - 检查最终 HTML 源码：如果看到
href="page.php?q=hello%20world&id=1"，说明&是对的（HTML 层），但%20和%26才是 URL 层该有的编码
最容易被忽略的是：前后端各做一遍编码 —— 比如 PHP 用 urlencode() 吐出，JS 又调一次 encodeURIComponent()，结果变成双重编码（%2526），解出来就是错的。谁拼的 URL，谁负责编码，别接力。
