reversed属性仅实现视觉编号倒序（如4. 3. 2. 1），不改变dom顺序、屏幕阅读器朗读顺序或焦点流；必须配合start属性才能稳定生效，且ie全系及旧版safari不支持，真正倒序需反转数据源或用css/js操作dom。
用 reversed 属性实现编号倒序（仅限 <ol></ol>）
reversed 是 HTML5 原生支持的布尔属性，加在 <ol></ol> 上就能让编号视觉上从大到小显示。它不改变 DOM 顺序，只影响序号生成逻辑。
- 必须配合
<ol></ol>使用，<ul></ul>不识别该属性 - 默认起始编号是列表总项数（比如 4 项就从 4 开始），不是从 1 开始倒数
- 可与
start组合：例如<ol reversed start="10"></ol>显示为 10、9、8、7 - 编号样式受
type控制（如type="a"时倒序为 z、y、x），但语义仍是数字序号逻辑
常见错误：以为 reversed 会让“最后一项内容显示在最前面”——其实它只改编号，<li> 的 DOM 位置和屏幕阅读器读取顺序完全不变。
用 CSS flex-direction: column-reverse 实现视觉倒排（<ul></ul> 和 <ol></ol> 都适用）
如果目标是让列表项内容本身倒过来显示（比如最新消息在顶部），而不是只改编号，就得靠 CSS 控制渲染顺序。
- 给列表加
display: flex+flex-direction: column-reverse - 这会同时反转视觉顺序、Tab 键焦点流、屏幕阅读器朗读顺序
- 不要对每个
<li>单独设order，动态增删时极易失控 - 若需保持可访问性一致（比如键盘导航仍按原始逻辑），必须额外加
aria-reversed="true"并测试读屏效果
注意：IE 全系不支持 flex-direction: column-reverse，Safari 9 及更早版本也不支持。若需兼容，得降级用 JS 或服务端反序。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
用 JavaScript 真正反转 DOM 顺序（需要数据/状态/第三方库同步时）
当编号倒序 + 内容倒序都必须真实发生（比如依赖 querySelectorAll('li') 获取顺序、或使用了基于索引的图表库），就得操作 DOM 节点本身。
- 安全做法：用
while (listEl.lastElementChild)循环取出并prepend()到父容器 - IE 不支持
prepend()，可用insertBefore(child, listEl.firstChild)替代 - 大量节点（>500 项）直接操作易卡顿，建议用
DocumentFragment缓冲，或分帧处理（requestAnimationFrame） - 切忌用
Array.from(listEl.children).reverse().forEach(...)—— 节点被移除后children动态变化，索引会错乱
示例函数：
function reverseList(listEl) {
const fragment = document.createDocumentFragment();
while (listEl.lastElementChild) {
fragment.appendChild(listEl.lastElementChild);
}
listEl.appendChild(fragment);
}
reversed 的兼容性和语义陷阱
reversed 在现代浏览器中基本可用，但 IE 全系（含 IE11）完全忽略它；旧版 Safari（≤9）也无支持。更重要的是，它的“倒序”只是编号计数方向反转，不代表数据逻辑倒序。
- 屏幕阅读器仍按 DOM 顺序朗读，编号只是视觉修饰
- 如果数据源没真正排序（比如数组没调用
.sort()），编号和内容语义就脱节 -
start和reversed组合时，起始值决定第一个显示的数字，后续自动递减——但这个“第一个”仍是 DOM 中的第一个<li>，不是内容上最新的那条
最容易被忽略的一点：编号倒序 ≠ 数据倒序。两者必须独立控制，否则列表既不可读也不可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
