使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
热点新闻栏应使用语义化 结构，配 role="list" 和 aria-label；每条用 包裹，内含 标题、 摘要、 时间；首条加 aria-current="true"；css 限制文本溢出并设 min-width: 280px；js 动态插入需用 createelement 而非 innerhtml；链接须设 display: block 保障触控区域。
热点新闻栏该用什么HTML结构最稳妥
别一上来就套轮播图插件或写一堆 <div> 嵌套。真实项目里，热点新闻栏本质是「带优先级的列表」，语义上就是 <code><ol></ol> 或 <ul></ul> —— 但必须加 role="list" 和 aria-label，否则屏幕阅读器会读成“一堆没意义的 div”。优先用 <ol></ol>，因为热点排序有明确先后（比如“TOP3”），序号本身就有信息价值。
常见错误：用 <section></section> 包一堆卡片，结果搜索引擎抓不到列表关系；或者给每条新闻加 <article></article> 却漏掉 pubdate 属性，导致 RSS 聚合失败。
- 每条新闻用
<li>包裹，内部结构统一：<h3></h3>（标题）、<p></p>（摘要）、<time datetime="2024-05-20"></time>（时间） - 避免在
<li>里塞<div class="card">——语义污染，CSS 用 <code>li:not(:first-child)控制分隔线更干净 - 如果要突出第一条（如“头条”），给对应
<li>加aria-current="true"，而不是仅靠 CSS 改颜色 -
<h3></h3>加display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;（限制两行，兼容性够用） -
<p></p>加text-overflow: ellipsis; white-space: nowrap; overflow: hidden;（单行省略） - 整个
<li>设min-width: 280px（保证手机横屏也能显示完整标题），同时用flex: 1 1 280px替代固定 width - 用
document.createElement()+appendChild()逐条插入，比字符串模板慢几毫秒，但 DOM 状态可控 - 插入后立刻调用
document.querySelector('time[datetime]').setAttribute('datetime', new Date().toISOString())补全属性（如果接口没返回标准 ISO 时间） - 如果新闻带点击统计，别在
onclick里写内联函数，改用事件委托：newsList.addEventListener('click', e => { if (e.target.matches('a')) trackClick(e.target.href) }) - 给
<a></a>加display: block; padding: 12px 16px;（至少 44px×44px 符合 iOS 触控最小尺寸） - 别用
margin扩大点击区——它会产生空白间隙，用户会误以为那是“不可点击的分隔线” - 如果标题旁有“hot”角标，角标元素（
<span class="badge"></span>）必须用position: absolute，否则它会撑开<a></a>的高度，导致点击区变形
CSS控制热点栏宽度和换行容易崩的点
新手常把整个栏设成 width: 100%，再用 flex-wrap: wrap 让新闻项自动折行——结果在小屏上标题文字撑爆容器，出现横向滚动条。根本问题不在 Flex，而在没约束文本流。
关键不是“怎么让它们排成一行”，而是“怎么让单条新闻不越界”。必须对 <h3></h3> 和 <p></p> 做三件事：
别碰 word-break: break-all——它会把“JavaScript”硬切成 “JavaScrip t”，影响可读性。
JavaScript动态加载新闻时 DOM 更新的坑
用 fetch() 拉接口数据后直接拼 HTML 字符串再 innerHTML = ...，看似快，但会导致两个问题：一是已有的焦点状态（比如用户正在点第二条新闻的链接）被重置；二是新插入的 <time></time> 标签没触发浏览器原生日期解析，document.querySelectorAll('time') 可能拿不到最新节点。
记住：热点栏不是静态展示，而是“随时可能被 JS 刷新”的区域，DOM 必须保持可预测性。
移动端点击区域太小导致误触
新闻标题链接默认只有文字区域可点，手指稍偏就点空。这不是 UX 问题，是 HTML/CSS 基础没做对——<a></a> 本身是 inline 元素，padding 对它无效，必须显式设 display: block 或 inline-block。
真正在意用户体验的热点栏，从来不是堆功能，而是把每一条新闻的“可发现性”和“可操作性”钉死在基础层。
