<p>不换行、<br>才强制换行；<img>必须带非空src且检查路径与alt；<input>是自闭合标签，不可写结束标签；<textarea>必须双标签；注释不可嵌套，否则破坏DOM结构。
<p> 标签不会自动合并连续空格或换行，<br> 才是强制换行的正确方式；<img> 必须带 src 属性，否则显示为空白且控制台报错；<input> 是自闭合标签，写成 <input></input> 会被浏览器忽略结束标签——这些不是“可选规范”，而是解析器实际行为。
为什么 <p> 里敲回车不换行？
HTML 不把源码换行当排版指令，<p> 只负责包裹段落语义，内部空格、制表符、换行符全被压缩成单个空格。想换行得用 <br>，想分段得用另一个 <p>。
常见错误现象：
- 在
<p>内直接按 Enter，页面没反应 - 用多个空格对齐文字，结果渲染成一个空格
- 误以为
<p>支持line-height或white-space就能解决，其实那是 CSS 的事，和标签语法无关
使用场景：纯文本段落包裹，如文章正文、说明文字。别把它当排版工具用。
立即学习“前端免费学习笔记（深入）”；
<img> 加了 src 还不显示？检查这三处
<img> 是空标签，只靠属性工作。最常踩的坑不是路径写错，而是：
-
src值为空字符串或只有空格：<img src="">→ 渲染空白，控制台报Failed to load resource - 相对路径没对准当前 HTML 文件位置，比如 HTML 在
/pages/index.html，但src="img/logo.png"实际图片在/assets/img/logo.png - 漏写
alt属性，虽不影响显示，但无障碍访问失败，且部分浏览器（如旧版 IE）会把缺失alt的图片框渲染为异常占位符
参数差异：width/height 属性设的是 HTML 像素值，不加单位；CSS 中的 width: 200px 才带单位。混用容易导致尺寸错乱。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<input> 和 <textarea> 的闭合逻辑完全不同
<input> 是自闭合标签，写成 <input type="text"></input> 没用——浏览器只认开始标签，结束标签被丢弃。而 <textarea> 是双标签，必须写 <textarea>默认值</textarea>，否则内容无法被提交或读取。
容易踩的坑：
- 复制粘贴时把
<textarea>误写成<input>，表单提交后收不到值 - 给
<input>加子内容（比如<input>xxx</input>），内容直接被忽略 - 用
<input type="hidden">传参时，忘了设name属性，后端收不到字段
性能影响：过多 <input> 节点本身不卡，但如果每个都绑了 oninput 且没做防抖，滚动或输入时会明显卡顿。
<!-- --> 注释能嵌套吗？不能，而且会影响 DOM 解析
HTML 注释不支持嵌套。写成 <!-- 外层 <!-- 内层 --> 文字 --> 会导致从第一个 <!-- 开始，到第一个 --> 结束，中间所有内容（包括第二个 <!--）都被当注释处理，后续代码可能错位。
真实影响：
- 注释跨多行时，如果中间不小心带了
-->（比如日志里写了 “done --> success”），注释提前截断，后面代码变成裸文本显示在页面上 - 构建流程若没移除注释，上线后源码体积变大，首屏加载略慢（通常可忽略，但对超轻量页要留意）
-
<!--[if IE]>...<![endif]-->这类条件注释已彻底失效，现代浏览器全部忽略
复杂点在于：注释本身不参与 DOM 构建，但它的位置会影响相邻标签的父子关系判断——尤其在动态插入 HTML 字符串时，注释位置偏差可能让 innerHTML 解析出错。
