HTML是标记语言，不直接实现功能，需与JavaScript、CSS或表单语义协同；按钮需绑定事件，表单提交需防刷新；data-属性安全传参；details/summary可免JS折叠；contenteditable仅适用于轻量编辑，富文本应使用专业库。
HTML 本身是标记语言，不提供“实现功能”的能力——所谓“在 HTML 中实现功能”，实际是指用 HTML 搭配 JavaScript、CSS 或表单语义等协同完成交互或呈现目标。直接写 <button>点击执行逻辑</button> 不会自动运行代码，必须绑定 onclick、addEventListener 或依赖表单原生行为。
用 <form> 提交数据时避免页面刷新
常见错误是点击 <input type="submit"> 后整个页面跳转或刷新，丢失当前状态。这不是 HTML 的错，而是没阻止默认行为或没指定正确 action 和 method。
- 如果目标是纯前端处理（如校验、拼接 URL），给
<form>添加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()处理输出
用 <details><summary> 实现免 JS 折叠面板
不需要写一行 JS 就能实现点击展开/收起，<details> 是原生、可访问、SEO 友好的方案，但兼容性要注意。
立即学习“前端免费学习笔记（深入）”；
- Chrome 12+、Firefox 49+、Safari 15.4+、Edge 79+ 支持良好；IE 完全不支持，需降级为 JS 方案
-
<summary>必须是<details>的第一个子元素，否则部分浏览器不识别点击区域 - 默认展开加
open属性：<details open>；用 CSS 控制箭头图标需覆盖::marker或用summary::before
<details> <summary>点击查看说明</summary> <p>这里是折叠的内容，支持任意 HTML 元素。</p> </details>
用 contenteditable 实现简易编辑区但别当富文本用
contenteditable="true" 能让任意容器变可编辑，适合做笔记、标签输入等轻量场景，但它不是 <textarea> 的替代品。
- 粘贴内容会带样式、
<div>、<span>等不可控 HTML，需用event.clipboardData.getData('text/plain')强制转纯文本 - 回车行为不一致：Chrome 插入
<div>，Firefox 插入<br>，Safari 插入<p>；统一用execCommand('insertLineBreak')（已废弃）或监听keydown拦截Enter - 焦点管理难，比如嵌套可编辑元素、与
tabindex冲突；移动端软键盘触发和收起逻辑更不可靠
真正需要富文本编辑时，别硬改 contenteditable，直接用 tiptap、Quill 或 slate.js 这类成熟库——它们解决的不是“怎么写 HTML”，而是“怎么安全、稳定、可维护地操作 DOM 树”。
