按钮显示为空白绿色方块，是因为 标签中误将 value 属性拼写为 vaule，导致浏览器无法识别并渲染按钮文本。只需修正拼写即可恢复按钮标题显示。
按钮显示为空白绿色方块，是因为 `` 标签中误将 `value` 属性拼写为 `vaule`，导致浏览器无法识别并渲染按钮文本。只需修正拼写即可恢复按钮标题显示。
在 HTML 中， 元素通过 value 属性定义其显示的文本内容。若属性名拼写错误（如 vaule），浏览器会完全忽略该属性——既不报错，也不渲染文字，最终只呈现默认样式（此处为纯绿色背景的空方块）。
✅ 正确写法如下（注意 value 的拼写）：
<input type="button" value="Add to list" onclick="addToList();">
⚠️ 常见误区提醒：
- value 是 的标准全局属性，不可拼错，也不能用 title、text 或 label 替代；
- 浏览器对无效属性名静默忽略，开发者工具的 Elements 面板中可直观验证：拼错后该属性不会出现在 DOM 节点上。
? 进阶建议：为提升可维护性与语义化，推荐改用
<button type="button" onclick="addToList()">Add to list</button>
它更易读、支持内联 HTML（如图标）、无障碍支持更好（自动具备 role="button"），且避免 value 拼写风险。
总结：本例问题根源是低级但典型的拼写错误。开发中建议启用编辑器语法校验（如 ESLint + HTML 插件）、善用浏览器开发者工具检查 DOM 属性，并优先选用语义更清晰的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
