<textarea>是独立双标签元素，必须成对书写；input type="text"天生单行，不支持换行、无\n字符、软键盘无换行键，且表单序列化时value不含换行符，而textarea的value天然包含\n。
直接用 <textarea></textarea>，别试图给 <input type="text"> 加换行——它天生就不支持。
为什么不能用 input type="text" 替代 textarea
因为 <input type="text"> 是单行控件：按 Enter 不会换行，提交时也不带 \n；CSS 的 white-space、height 或 line-height 都无法让它真正多行。浏览器解析时把它当“内联替换元素”，不是文本流容器，强行 hack 会失效或行为不一致。
- 用户输入的换行符在
input中会被忽略或显示为乱码 - 移动端软键盘的“换行”键在
input中默认是“搜索”或“发送”，不是换行 - 表单序列化时，
input的value永远不含换行符，而textarea的value天然包含\n
textarea 最小可用写法与必须项
最简但能用的写法是：<textarea name="content"></textarea>。注意三点：
-
name属性不能省——没它，表单提交后端收不到这个字段 - 标签必须成对，不能写成
<textarea />或漏掉</textarea>，否则后续 HTML 解析可能错乱 - 默认内容要写在开始和结束标签之间，不是用
value属性（那是input的用法）
rows 和 cols 到底要不要设
rows 和 cols 是布局提示，不是硬限制，建议显式设置，但优先级低于 CSS：
立即学习“前端免费学习笔记（深入）”；
-
rows="5"表示初始可见 5 行，用户仍可输入 100 行；不设的话 Chrome/Firefox 默认只渲染约 2 行，看着像被压缩 -
cols="40"是按等宽字体估算宽度，实际受font-family、letter-spacing和父容器影响很大 - 在 Flex/Grid 容器中
cols基本失效，此时应改用width: 100%+min-height - 移动端 Safari 对
cols渲染偏差明显，搭配width: 100%更稳
placeholder 换行和自适应高度怎么处理
placeholder 在 textarea 中不支持换行——所有回车、空格、缩进都会被折叠成单行显示，且聚焦即消失。如果真需要多行占位提示，只能靠 JS 注入默认内容，或用 CSS ::before 模拟（但无法随输入消失）。
原生 textarea 不会自动撑高。固定 height 容易截断或留白，resize: vertical 又依赖手动拖拽。真要“输入即撑开”，得监听 input 事件并动态重设 height 或用 scrollHeight 计算。
换行符提交后，服务端收到的可能是 \n（Unix/macOS）或 \r\n（Windows），别假设格式统一，后端需做规范化（如全部转 \n）。
