value属性在不同表单控件中作用不同：text/password/textarea用value设初始值和提交值；checkbox/radio的value仅决定提交内容，选中状态由checked控制；select自身不支持value属性，需通过option的selected或js设置value匹配选项。
value属性在不同表单控件中的赋值逻辑不一样
不是所有表单元素都靠value属性来决定“当前显示的值”或“提交的值”。比如checkbox和radio的value只影响提交内容，不影响是否勾选；而select的value根本不会直接设置选中项——得靠option的selected属性或 JS 的selectedIndex。
常见错误是给select写value="abc"以为能选中对应option，结果完全没反应。HTML 解析时会忽略这个无效写法。
-
input[type="text"]、input[type="password"]、textarea：直接写value="xxx"生效，页面加载即显示该值 -
input[type="checkbox"]、input[type="radio"]：value仅决定提交时的字段值，是否勾选由checked属性控制 -
select：不支持value属性设在自身上；必须给某个option加selected，或用 JS 设置select.value = "xxx"（此时会自动匹配option[value]）
JS 动态设置 value 时要注意 DOM 加载时机和类型转换
用 JS 给input或textarea赋值，写el.value = "hello"没问题，但对select、radio组就得小心了。
典型坑：页面还没加载完就执行 JS 赋值，导致找不到元素或赋值被后续 HTML 渲染覆盖；或者给number类型的input赋了字符串"123"，虽然能显示，但el.valueAsNumber会是NaN。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 确保操作 DOM 前元素已存在，推荐放在
DOMContentLoaded事件里，或把 script 放在 body 底部 -
input[type="number"]建议用el.valueAsNumber = 123而非el.value = "123"，避免隐式转换问题 - 设置
radio组选中状态，不能只改value，得手动设checked = true在目标元素上
表单重置（reset）会把 value 属性值当初始值，不是当前 JS 值
点击type="reset"按钮时，浏览器会把所有控件恢复成它们**HTML 中声明的 value、checked、selected 等属性值**，而不是你后来用 JS 改过的.value属性值。
也就是说：<input value="default">，JS 改成el.value = "changed"，点 reset 后变回"default"，不是空也不是"changed"。
- 如果想让 reset 恢复 JS 修改后的状态，得监听
reset事件，手动还原值 - 动态生成的表单，若没在 HTML 里写
value，reset 会清空（因为初始值是空字符串） -
textarea的初始值来自标签体文本（<textarea>init</textarea>），不是value属性
服务端渲染时 value 属性容易被 XSS 注入
后端模板（如 PHP、Jinja、Thymeleaf）拼接value属性时，如果没做 HTML 实体转义，用户输入的"onfocus=alert(1)"可能变成：<input value="onfocus=alert(1)">，直接触发执行。
这不是value本身的问题，而是属性值未转义导致的注入漏洞。
- 必须对插入到
value属性中的变量做严格 HTML 编码，例如 PHP 用htmlspecialchars($val, ENT_QUOTES) - 避免用
innerHTML插入含value的字符串，优先用el.value = xxx赋值 - 现代框架（React/Vue）默认转义属性值，但显式用
v-html或dangerouslySetInnerHTML时仍需自查
select当成和input一样直接写value，以及重置行为和 JS 赋值之间的预期错位。这两个点不细看 HTML 规范很容易掉坑里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
