标签内不能嵌套等块级元素，浏览器会自动闭合并将移至外部，导致dom结构断裂、样式失效、js查询失准及语义与无障碍问题。

标签不是“换行工具”，也不是“样式容器”——它只干一件事：声明一段语义完整的文本内容。用错场景，比如塞进按钮、包裹整个卡片、或者嵌套其他块级元素，后续样式和可访问性问题就藏不住了。

为什么

里不能放

或

浏览器会静默修正这种错误，但结果不可控：<p></p> <div>内容</div>

实际解析时，<p></p> 会在 <div> 前自动闭合，导致 DOM 结构断裂。常见现象包括： <ul> <li>样式丢失（比如给 <code>p 设置的 margin 只作用到第一段）

屏幕阅读器跳过部分文字（语义流被截断）

JavaScript 查询 document.querySelectorAll('p') 拿不到预期数量

合法子元素仅限 phrasing content：文字、<span></span>、<a></a>、<em></em>、<strong></strong> 等，不包括任何块级标签。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

默认 margin 为什么总“多出一截”

几乎所有浏览器都给 p 设了 margin-top: 1em 和 margin-bottom: 1em。两个相邻 p 之间实际间距不是 2em，而是“合并外边距”（margin collapse），最终显示约 1em —— 这是 CSS 规范行为，不是 bug。

想精确控制间距，建议：

• 统一用 margin-block（现代写法）或 margin-top/margin-bottom（兼容旧版）
• 避免混用 padding 和 margin 调整段落距离，容易叠加出意料之外的空隙
• 若需去除所有间距，写 margin: 0，而不是只设 margin-top: 0

响应式排版中

的 font-size 该怎么调

直接在 p 上写固定 font-size: 16px 在移动端常显得太小。更稳妥的做法是：

• 用相对单位：font-size: 1rem 或 font-size: 1.1em，继承自根或父级
• 配合媒体查询做阶梯调整：@media (max-width: 768px) { p { font-size: 0.95rem; } }
• 避免对每个 p 单独加 class 控制字号，优先走 CSS 层级继承

特别注意：iOS Safari 对小于 16px 的 font-size 有强制放大机制，text-size-adjust: none 已被废弃，靠 viewport meta 和合理字号设计来规避。

真正难的不是怎么写 <p></p>，而是判断某段内容是否“够格”成为段落——它得有完整语义、独立表达意图、不依赖上下文才能被理解。这点一旦松动，后面所有样式、SEO、无障碍都会悄悄打折。