textarea必须成对书写且内容置于标签内，name、rows、cols需显式设置，maxlength限制输入长度，placeholder不换行且仅UI提示，自适应高度需JS实现，换行符提交时需后端统一处理。
textarea 必须成对写，不能自闭合
直接写 <textarea /> 或 <textarea> 没有闭合标签，会导致后续 HTML 解析错乱，尤其在嵌套表单或动态插入时容易丢内容、样式塌陷。浏览器会尝试“修复”，但行为不可控。
正确写法只有这一种：<textarea name="content">默认文字</textarea>。内容必须写在开始与结束标签之间，不是用 value 属性——那是 <input> 的用法。
-
name属性不能省：没有它，表单提交时后端收不到这个字段 -
rows和cols建议显式设置：不设的话，Chrome/Firefox 默认只渲染约 2 行 × 20 字符宽，视觉上像被压缩过 - 若用 CSS 控制尺寸（如
height: 120px），rows仍建议保留，作为语义化 fallback 和可访问性支持
rows 和 cols 不是字符限制，只是初始布局提示
rows="5" 表示“初始可见 5 行”，用户仍可输入 50 行；cols="40" 表示“按等宽字体估算每行约 40 字符宽”，实际宽度受 font-family、letter-spacing 和容器约束影响很大。
真正限制输入长度要用 maxlength 属性（单位是 Unicode 字符数），例如：<textarea maxlength="500"></textarea>。注意：它只防前端误输，后端必须重新校验，否则绕过 JS 就能发超长内容。
立即学习“前端免费学习笔记（深入）”；
-
rows值为纯数字，不带单位（不能写rows="5px"） -
cols在 Flex/Grid 容器中可能失效，此时优先用 CSS 的width和min-height - 移动端 Safari 对
cols渲染偏差较大，建议搭配width: 100%使用
placeholder 换行会被折叠，且聚焦即消失
placeholder 在 <textarea> 中支持良好，但它的行为和 <input> 完全一致：文字是浅灰色、不换行（所有换行符被忽略）、一获得焦点就清空。所以别写 placeholder="第一行↵第二行"，它只会显示成“第一行第二行”。
如果需要多行占位提示，只能用 JavaScript 动态注入默认内容，或用 CSS + ::before 模拟（但无法随输入消失，体验打折）。
- placeholder 文字不会提交到后端，仅作 UI 提示
-
disabled或readonly状态下，placeholder 不显示——因为它是为“可输入”状态设计的 - 若 placeholder 被 CSS 遮挡（比如
line-height过大），检查是否设置了overflow: hidden或高度截断
自适应高度要用 JS 监听 input 事件，不能只靠 CSS
原生 <textarea> 不会随内容变高，固定 height 容易截断或留白，设 resize: vertical 又依赖用户手动拖拽。真需求是“输入时自动撑开”，得靠 JS。
核心逻辑只有两步：el.style.height = 'auto' → 触发重排，让 scrollHeight 生效；再设 el.style.height = el.scrollHeight + 'px'。漏掉第一步，scrollHeight 会卡在旧值。
- 务必加
min-height和max-heightCSS 限制极端情况（比如粘贴一万字） - iOS Safari 旧版本（≤15.6）中
scrollHeight可能不准，可 fallback 到el.offsetHeight - 避免在
input事件里频繁重排，简单场景够用；高频输入（如实时协作）建议节流
最易被忽略的是：textarea 的换行符在提交时是 \r\n（Windows）或 \n（macOS/Linux），后端解析时需统一处理，不能假设全是 \n。另外，CSS 的 white-space: pre-wrap 对显示服务端返回的内容很关键，否则用户输入的换行会变成空格。
