HTML无法实现排列组合，因其仅为声明式标记语言，不具计算能力；所有排列逻辑必须由JavaScript完成，HTML仅负责结构展示与数据容器功能。
HTML 本身不能做排列组合，它没有计算能力，所有“排列组合”效果都必须靠 JavaScript 实现。 你看到的所谓“HTML 全排列”，其实是用 HTML 搭结构、用 JS 算逻辑、再把结果塞进 HTML 展示——HTML 只是画布，不是引擎。
为什么不能只靠 HTML 标签实现排列组合
HTML 是声明式标记语言，只描述“是什么”，不定义“怎么做”。<ul>、<ol>、<details> 这些标签能控制呈现顺序或折叠状态，但无法生成新序列、无法递归交换元素、无法判断 abc 和 acb 是否已存在。
- 浏览器解析
<div>abc</div>时，只把它当文本节点，不会自动拆解成字符数组 -
data-*属性可以存原始数据，但读取、排列、去重、输出仍需 JS 手动调用split()、map()、join()等方法 - 想在页面上动态展示 6! = 720 种排列？HTML 不会帮你生成那 720 个
<li>，JS 得先算出来，再用innerHTML或appendChild()插入
常见误用：把 CSS order / flex-direction 当成排序逻辑
有人用 display: flex + order 属性“重排”元素视觉顺序，但这只是 CSS 渲染层的错觉，DOM 结构没变，也不代表数据被真正重排。
-
order值只是影响布局流，无法表达“所有可能排列”，更无法支持回溯、剪枝等算法逻辑 - 若原始数据是
['a','b','c']，你手动写死三个<div order="2">a</div>等，等于硬编码一种排列，不是生成全排列 - 这种写法在需要响应用户输入（比如输入框改值后重新排列）时完全失效
真正该关注的：HTML 如何配合 JS 实现可维护的排列组合功能
HTML 的价值在于提供清晰的数据容器和事件入口，让 JS 逻辑有据可依、易于调试。
立即学习“前端免费学习笔记（深入）”；
- 用
<input type="text" id="input-str">接收用户输入，比从<span>里textContent提取更可靠 - 给结果容器加明确 ID：
<ul id="permutation-result"></ul>，避免 JS 靠 DOM 路径定位出错 - 对每个排列项用语义化包裹：
<li data-perm="acb"><code>acb</code></li>，方便后续筛选或高亮 - 禁用重复提交：生成中给按钮加
disabled，防止用户狂点触发多轮递归栈溢出
最容易被忽略的一点：排列组合的输出量随长度指数增长。输入 10 个字符，全排列是 3628800 项。这时候 HTML 不是瓶颈，但盲目 innerHTML += '<li>...</li>' 会卡死页面。真要处理中等规模数据，得用文档片段（DocumentFragment）批量插入，或者分页/虚拟滚动——这些都不是 HTML 能决定的，而是 JS 对渲染节奏的控制意识。
