语义标签用错比不用更伤体验：必须且只能出现一次，重复或缺省会导致safari阅读模式跳过主体；中必须含标题，否则应改用；混入非导航链接会令google降权；替代会使键盘焦点失效、ios禁用双击缩放；首屏html超15kb或dom节点超800个将显著影响性能与可访问性。

语义标签用错比不用更伤体验

浏览器、屏幕阅读器和搜索引擎不是靠 class 名猜结构，而是直接解析 <header></header>、<main></main>、<nav></nav> 这些标签的语义。错用会立刻导致焦点丢失、阅读模式失效、SEO 权重错配。

• <main></main> 必须且只能出现一次；重复或缺省会让 Safari 阅读模式跳过主体内容
• <section></section> 不是“多套一层 div”，它必须自带 <h2></h2>–<h6></h6> 标题，否则应改用 <div> <li> <code><nav></nav> 里塞搜索框、登录入口，等于把非导航链接混进导航集，Google 会降权整块区域
• 用 <div role="button"> 替代 <code><button></button>，键盘 Tab 焦点进不去，iOS 会禁用双击缩放，触控反馈也消失

  首屏 HTML 体积和 DOM 深度直接影响用户等待感

  移动端白屏时间超 1s，53% 用户会离开——而罪魁常是 HTML 本身：冗余 wrapper、未压缩的 CMS 输出、无意义的嵌套层级。

  • gzip 后首屏 HTML 超过 15KB 就该警惕；用 curl -sI 查看 Content-Length 响应头
  • DOM 节点数超过 800 个（Chrome DevTools → Elements → 右键任意节点 → “Reveal in Elements Panel”）容易触发 Composite 层抖动，滚动卡顿明显
  • 避免三层以上纯 class 包裹：<div class="wrapper"><div class="inner"><div class="content">https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c</div></div></div> 直接删掉中间两层，用 CSS display: contents（Safari 15.4+ 支持）替代
  • CMS 或 SSR 模板中留空的 <!-- comment --> 和 <div></div>，上线前必须清理

  触摸目标和焦点管理不是样式问题，是功能底线

  用户手指点不中、语音助手读不出、键盘无法操作——这些不是“体验差”，是功能不可用。HTML 层面就能堵住大部分缺口。

  

  html-ppt-to-pdf

  将使用 `

  ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

  下载
  • <button></button>、<a></a>、<input> 的 clientWidth × clientHeight 必须 ≥ 48×48 CSS 像素；仅靠 padding 不够，要显式设 min-width/min-height
  • <img> 的 alt 不能为空，除非是纯装饰图；含文字的信息图，alt 得描述文字内容
  • <input> 必须配 <label for="id"></label>，JS 动态插入时记得同步生成唯一 id，否则 for 属性失效
  • 禁用 <div onclick="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"> 模拟按钮；它没有默认 focus 样式、不响应空格/回车、不被 VoiceOver 自动识别为可操作元素<h3>script/link 加载策略决定用户第一眼看到什么</h3> <p>HTML 解析被阻塞，用户就卡在白屏——这不是 JS 执行慢，是 HTML 写法让浏览器不得不等。</p> <ul> <li>所有 <code><script></script> 必须带 async 或 defer；内联统计脚本、埋点代码一律移出
  • 首屏关键 CSS 必须内联进 ；非关键 CSS 用 <link rel="preload" as="style" href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c" onload="this.rel='stylesheet'">
  • 禁止在 底部放 <link rel="stylesheet">；它不会延迟渲染，但会延迟 DOM 构建完成事件
  • @import 在 CSS 文件里等于串行加载，在 3G 下可能多拖 800ms；全部改用 <link>

  真实项目里最容易被忽略的，是动态插入内容时的语义延续性——JS append 的 <section></section> 若没带标题，或插入的 <input> 没补 id 和 label，用户感知到的不是“新内容来了”，而是“这块突然不能用了”。