用 做笔记区需嵌套在 或 内，配合 包裹 和提交按钮，设 flex: 0 0 auto 或 grid-column: 2 定位，避免 contenteditable 兼容性问题。
怎么用 <aside></aside> 做笔记输入区域，而不是随便套个 <div>
<p>语义不对的容器会让笔记区在屏幕阅读器里被跳过，打印时也可能被忽略。用 <code><aside></aside> 明确告诉浏览器：“这是主内容的补充说明”，既符合 HTML5 规范，也方便后续加 CSS 定位或 JS 绑定。
-
<aside></aside> 必须嵌套在 <article></article> 或 <section></section> 内才合法，单独放在
- 别用
<aside id="notes"></aside> 然后靠 JS 动态插入表单——结构应优先静态可访问
- 如果笔记要随滚动固定在侧边，
position: sticky 比 fixed 更安全，不会脱离文档流导致焦点丢失
textarea 和 contenteditable 的取舍：什么时候该用哪个
<aside></aside> 必须嵌套在 <article></article> 或 <section></section> 内才合法，单独放在 <aside id="notes"></aside> 然后靠 JS 动态插入表单——结构应优先静态可访问position: sticky 比 fixed 更安全，不会脱离文档流导致焦点丢失用户真正在意的是“能不能换行”“光标会不会乱跳”“复制粘贴是否保留格式”。纯文本笔记选 <textarea></textarea>；需要粗体/列表/拖拽图片的场景才上 contenteditable。
-
<textarea></textarea>天然支持maxlength、placeholder、autofocus，且提交时值自动进form数据，不用额外取innerHTML -
contenteditable="true"默认不响应Enter提交，按回车会换行而非触发表单，得监听keydown拦截event.key === 'Enter'并preventDefault() - 移动端 iOS 上
contenteditable的光标定位 bug 频发，特别是配合transform缩放时，<textarea></textarea>更稳
CSS 定位侧边笔记框时，width 和 max-width 别写死
写成 width: 300px 在小屏上直接撑破布局，而 max-width: 300px + width: 100% 才能自适应。侧边栏本质是“主内容的附属”，宽度逻辑必须让步于主体容器。
- 用
flex布局时，给<aside></aside>设flex: 0 0 auto，避免它被压缩变形 - 如果主内容用
grid，侧边笔记建议用grid-column: 2而非绝对定位，否则打印预览时容易错位 - 别给
<textarea></textarea>设height: 100%—— 它默认撑不满父容器，得加display: block和box-sizing: border-box
为什么 submit 事件不触发？检查 form 和 button 的关系
很多人把 <button type="submit"></button> 放在 <aside></aside> 里，但没把它包进 <form></form>，或者 <form></form> 根本没设 action 或监听 submit，结果点按钮毫无反应。
-
<form></form>必须包裹整个笔记输入结构，包括<textarea></textarea>和<button></button>，不能只包一个 - 如果不想页面跳转，JS 中必须写
event.preventDefault()，光写onsubmit="saveNote(); return false;"容易漏掉异步失败后的状态重置 - 服务端接收时注意：
<textarea name="note"></textarea>提交后字段名就是note，不是notes或content，命名不一致会导致后端收不到数据
侧边笔记最常出问题的地方不在样式，而在表单绑定和语义结构——DOM 层级一错，JS 就得写一堆兜底逻辑来修，反而更难维护。
