HTML是标记语言，不直接实现功能，需与JavaScript、CSS或表单语义协同；按钮需绑定事件，表单提交需防刷新；data-属性安全传参；details/summary可免JS折叠；contenteditable仅适用于轻量编辑，富文本应使用专业库。
HTML 本身是标记语言，不提供“实现功能”的能力——所谓“在 HTML 中实现功能”，实际是指用 HTML 搭配 JavaScript、CSS 或表单语义等协同完成交互或呈现目标。直接写 不会自动运行代码，必须绑定 onclick、addEventListener 或依赖表单原生行为。
用
常见错误是点击 后整个页面跳转或刷新，丢失当前状态。这不是 HTML 的错，而是没阻止默认行为或没指定正确 action 和 method。
- 如果目标是纯前端处理（如校验、拼接 URL），给
添加onsubmit="return false;"或在 JS 中调用event.preventDefault() - 若需发请求但不想跳转，用
method="POST"+action="/api/xxx"配合fetch()拦截，而非依赖表单原生提交 -
target="_blank"可让提交结果在新页打开，但无法控制响应内容格式；服务端需返回完整 HTML 才能正常显示
用 data- 属性传递参数给 JavaScript
HTML 元素上写 data-id="123"、data-type="modal" 是最轻量、语义清晰的传参方式，比用 id 解析或全局变量更可控。
- JS 中通过
element.dataset.id读取（驼峰命名自动转换，data-user-name→dataset.userName） - 不要把 JSON 字符串硬塞进
data-属性，解析易出错；复杂结构建议用JSON.stringify()+JSON.parse()显式处理 - 服务端渲染时，确保
data-值已转义，避免注入风险，例如 PHP 中用htmlspecialchars()处理输出
用
不需要写一行 JS 就能实现点击展开/收起，
立即学习“前端免费学习笔记（深入）”；
- Chrome 12+、Firefox 49+、Safari 15.4+、Edge 79+ 支持良好；IE 完全不支持，需降级为 JS 方案
-
- 默认展开加
open属性：::marker或用summary::before
点击查看说明
这里是折叠的内容，支持任意 HTML 元素。
用 contenteditable 实现简易编辑区但别当富文本用
contenteditable="true" 能让任意容器变可编辑，适合做笔记、标签输入等轻量场景，但它不是 的替代品。
- 粘贴内容会带样式、、
等不可控 HTML，需用event.clipboardData.getData('text/plain')强制转纯文本- 回车行为不一致：Chrome 插入
，Firefox 插入；统一用execCommand('insertLineBreak')（已废弃）或监听keydown拦截Enter- 焦点管理难，比如嵌套可编辑元素、与
tabindex冲突；移动端软键盘触发和收起逻辑更不可靠真正需要富文本编辑时，别硬改
contenteditable，直接用tiptap、Quill或slate.js这类成熟库——它们解决的不是“怎么写 HTML”，而是“怎么安全、稳定、可维护地操作 DOM 树”。 - 回车行为不一致：Chrome 插入
