应使用语义化html结构组织图书排行列表：用替代表达名次，每本书用包裹于内，书名用/，作者等次要信息置于或，封面图必设alt属性；css通过::marker或计数器定制序号样式，兼顾可访问性；动态加载后需设置tabindex="-1"并focus确保焦点管理。

用语义化 HTML 结构组织图书排行列表

读书排行页本质是有序的图书数据展示，<ol></ol> 比 <ul></ul> 更合适——它天然表达「名次」，支持 reversed、start 属性，且对屏幕阅读器更友好。每本书用 <li> 包裹，内部优先用 @#@#@#@#@#@#@#@#@#@0<p id="desc-123">《活着》，余华，豆瓣评分9.2</p>。

• 不要用 display: none 隐藏未加载项，改用 visibility: hidden 或移除 DOM，否则屏幕阅读器仍会读出占位符
• 加载中状态需有 aria-busy="true" 和 aria-live="polite" 的容器，提示“正在加载最新排行…”
• 排序切换（如“按评分”“按出版年”）按钮必须是 <button></button>，不可用 <div onclick> <h3>兼容低版本浏览器的数字序号回退方案</h3> <p>IE11 及更早版本不支持 <code>::marker，也不支持 CSS 计数器在 <ol></ol> 外生效。此时最稳妥的做法是服务端或 JS 渲染时，把序号作为文本节点插入，但必须保留原生 <ol></ol> 结构：
  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载

  ol.rank-list {
    counter-reset: rank;
  }
  ol.rank-list li {
    counter-increment: rank;
  }
  ol.rank-list li::marker {
    background: #ff6b6b;
    color: white;
    border-radius: 50%;
    padding: 0 8px;
    font-weight: bold;
  }

  然后用 CSS 控制 .rank-num 样式，并在现代浏览器中用 .rank-list li::marker { display: none; } 隐藏原生数字，避免重复。

  • 切勿用 list-style-type: none 后全靠 JS 插入序号——JS 失败时页面将完全丢失排名信息
  • 如果项目强制要求 IE11 支持，<ol start="1"></ol> 属性仍有效，可配合 JS 动态改 start 值实现分页续号（如第2页从 21 开始）
  • 所有自定义序号都要同步更新 aria-label，不能只改视觉文本
  真实项目中最容易被忽略的是焦点管理和动态加载后的语义连贯性——序号样式再酷，用户按键盘无法顺畅浏览，就等于没排好。

  const newRankList = document.querySelector('ol.rank-list');
  newRankList.tabIndex = -1;
  newRankList.focus();

  <ol class="rank-list">
  <li>
  <span class="rank-num">1</span><h3>《霍乱时期的爱情》</h3>
  </li>
    <li>
  <span class="rank-num">2</span><h3>《人类简史》</h3>
  </li>
  </ol>