html 本身无文档排序方式，因它是标记语言而非数据操作语言；dom顺序严格对应源码标签出现顺序，css的order仅作用于flex/grid子项且不改变dom结构，脚本执行顺序由defer/async等属性控制。
HTML 本身没有“文档排序方式”这个概念，也没有对应的属性或标签能控制整个 HTML 文档的渲染顺序、DOM 加载顺序或元素排列逻辑。所谓“排序”，实际是开发者对 DOM 结构、CSS 布局、JavaScript 执行时机或服务端输出顺序的误读或混淆。
为什么 document 不支持排序属性
HTML 是标记语言，不是数据结构操作语言。document 对象由浏览器解析 HTML 字符串后生成，其节点顺序严格对应源码中标签出现的先后位置（即树形结构的深度优先遍历顺序）。你无法通过某个 HTML 属性像数据库那样指定 ORDER BY id ASC。
常见误解来源：
- 把 CSS 的
order（仅作用于 Flex/Grid 子项）当成全局文档排序 - 把 JavaScript 中
Array.prototype.sort()应用于document.querySelectorAll()结果，误以为改了 DOM 顺序 - 在模板引擎（如 Vue/React）里用
v-for或{list.sort().map(...)}，混淆了视图层逻辑与 HTML 本身能力
order 只在 Flex/Grid 容器内生效
如果你真想调整一组元素的视觉排列顺序，得靠 CSS 布局模型，且必须满足前提条件：
立即学习“前端免费学习笔记（深入）”；
- 父容器设置了
display: flex或display: grid - 子元素显式设置了
order数值（默认为0） -
order仅影响渲染顺序，不改变 DOM 树结构或tabindex顺序
例如：
本系统后台管理导航，完全开源、完全人性化操作、无限制添加一级、二级导航栏目，自由选择二级导航栏目的所属一级导航；自由排序方便调整栏目的前后顺序，修改、设置链接页面、选择打开方式、后台管理权限分配。后台管理： Admin_Cy/index.asp账号：admin 密码：admin888
<div style="display: flex"> <span style="order: 2">C</span> <span style="order: 0">A</span> <span style="order: 1">B</span> </div>
视觉上显示为 A → B → C，但 DOM 中仍是 C、A、B 的原始顺序 —— 这会影响屏幕阅读器、键盘导航和 JS 查询结果。
真正影响“加载/执行顺序”的其实是 script 和 defer/async
用户常问的“让某段 HTML 先加载”，本质是资源加载与脚本执行时序问题，和“排序”无关：
- 普通
<script></script>：阻塞解析，按出现顺序同步执行 -
defer：不阻塞，但按书写顺序在 DOM 解析完成后执行 -
async：不阻塞，下载完立刻执行，**不保证顺序** - 动态插入的
<script></script>（如document.createElement('script')）：执行时机取决于插入位置和是否设置async
如果依赖顺序（比如先加载 lodash.js 再加载业务脚本），必须用 defer + 保持 script 标签顺序，或改用模块化方案（type="module" 自带顺序保证）。
服务端或构建阶段才可能“重排 HTML”
浏览器拿到的 HTML 已是最终字符串。若需按某种规则生成有序结构（如按时间倒序列出文章），必须在服务端（PHP/Node.js）或构建时（Webpack 插件、Svelte 预编译）完成排序，然后输出对应顺序的 HTML 片段。
前端运行时无法“重新排序整个文档”，强行用 JS 操作（如 parentNode.append(...sortedNodes)）只是移动已有节点，代价高、易破坏事件绑定、影响性能，且不解决初始渲染逻辑。
最容易被忽略的一点：即使你用 JS 把 <li> 全部重排，搜索引擎爬虫看到的仍是原始 HTML 顺序 —— SEO 和可访问性不会跟着你的 JS 走。
