严格来说，只有 <script> 和 <style> 这两类元数据元素可直接作为 <body> 的子元素；其他内联元素（如 <span>、<a>、<img>）虽被浏览器容错包裹进匿名块容器，但不符合HTML规范，不可依赖。
内联元素不能直接作为 <body> 的子元素出现，但浏览器会自动容错修复——这不代表你可以依赖它。
哪些内联元素能直接写在 <body> 里？
严格来说，HTML 规范要求 <body> 的直接子元素必须是“流内容”（flow content），而绝大多数内联元素（如 <span>、<a>、<strong>、<img>）本身不属于合法的直接子元素类型。
实际中你写成这样：
<body> <span>hello</span> <a href="#">link</a> </body>
浏览器会默默把它们包裹进一个匿名块容器（类似隐式 <p>），但这个行为不可控、不一致，且在 XHTML 或严格校验器下报错。
立即学习“前端免费学习笔记（深入）”；
-
<script>和<style>是例外：它们是元数据类元素，允许直接出现在<body>中 -
<img>虽是内联元素，但因具有替换内容特性，常被误认为“可以裸放”，其实仍依赖父级块容器才能正确参与流布局 - 没有块级父容器时，
<br>这类纯表现型内联元素可能失效或产生意外换行
<div> 里塞 <p> 再套 <span> 是标准路径
这是最稳妥的嵌套层级：块级容器 → 块级内容单元 → 内联修饰单元。比如 <div> 定义区域，<p> 承载段落语义，<span> 标记其中某几个词。
-
<p>是终端块状元素，不能再包含<div>或其他块级元素（会触发浏览器自动闭合<p>） -
<span>可以嵌套<strong>、<em>等内联元素，但不能放<div>、<p>、<ul> - 用
<section>替代<div>更好——它既是块级容器，又自带语义，对 SEO 和可访问性更友好
为什么 <li> 必须放在 <ul> 或 <ol> 里？
<li> 是“多目标块状元素”，它既可作为结构化列表项，也可承载内容，但它的上下文依赖极强：没有父级列表容器时，它失去语义和默认样式，甚至可能被渲染为普通块盒（无项目符号、无缩进）。
- 单独写
<li>item</li>在<body>中，HTML5 校验器会警告 “Element li not allowed as child of element body in this context” - 某些旧版 Safari 会忽略孤立
<li>的display: list-item行为，退化为display: block - 即使视觉上看起来正常，屏幕阅读器也无法将其识别为列表项，破坏可访问性
真正容易被忽略的不是“能不能写”，而是“写了之后谁来解释它”。浏览器的容错机制掩盖了结构缺陷，但语义断裂会在校验、SEO、自动化测试和辅助技术中暴露出来。
