html代码质量考核重在“写对”而非“写完”，核心是结构合规性、语义合理性、可访问性落地和动态渲染准确性，须通过w3c validator与axe devtools双重自动化准入，并结合playwright验证真实dom及边界场景。
HTML代码质量考核不是看有没有写完，而是看有没有“写对”
大厂前端团队对 HTML 的考核，从来不是“能不能跑起来”，而是“有没有埋雷”。很多同学提交后本地能渲染、测试用例也过，但上线后被 QA 打回、被 Axe 报出 12 个可访问性问题、或在 Safari 上布局错乱——这些才是真实扣分点。考核重点落在结构合规性、语义合理性、可访问性落地和动态渲染准确性四块，且全部要求可验证、可追溯。
用 W3C Validator + Axe DevTools 做基础准入检查
所有 PR 必须通过两项自动化门槛，否则 CI 直接拒绝合并：
-
W3C Markup Validation Service检查语法合法性：标签闭合、嵌套层级、<meta charset="UTF-8">是否存在、<title></title>是否缺失等。常见错误如<div><p>文本</p></div>这类嵌套错位，会被直接标红。 -
Axe DevTools扫描可访问性硬伤：图片缺alt、表单控件无label、role与实际语义冲突（比如给<button></button>加role="link"）、颜色对比度低于 4.5:1 等。这类问题在评审时会截图标注具体 DOM 节点。
注意：工具只是起点。有些团队把 axe.run() 集成进 Jest 测试，但只校验静态 HTML；真实场景中动态插入的 innerHTML 或 React 渲染后的 DOM，必须用 Playwright 启动真实浏览器再跑 axe，否则漏检率极高。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
语义标签和 data 属性是否“用得准”，比“用了没”更重要
评审时不会数你用了几个 <section></section>，而是问三个问题：
- 这个
<nav></nav>里真的只放导航链接吗？还是混了搜索框、登录入口？ -
<main></main>是否有且仅有一个？多个<main></main>或完全不用，都算结构违规。 -
data-属性是否承载业务逻辑？比如data-status="pending"被 JS 读取触发状态切换，那它就必须和组件状态严格同步；若只是用于 CSS 选择器，就该换成 class。
典型反例：<div class="card" data-id="123"> —— 如果这个 <code>data-id 在后续 JS 中未被消费，纯属冗余；如果被消费但没做防 XSS 处理（比如直接拼进 innerHTML），就是高危项。
动态 HTML 渲染必须覆盖边界 case，不能只测 happy path
HTML 不是静态模板，它依赖 JS 数据驱动。考核时重点查三类边界：
- 空数据：列表为空时，是否渲染了
<ul></ul>还是直接留白？是否有 fallback 提示？ - 特殊字符：用户昵称含
<script></script>或&，是否被正确转义为&？ - 条件渲染：一个
v-if或{condition && <div>} 切换时，是否引发 DOM 节点复用错乱？比如旧节点的事件监听器没清理，导致点击触发两次回调。 <p>实操建议：用 Playwright 写断言时，别只写 <code>await expect(page.locator('text=订单成功')).toBeVisible()，要加 DOM 结构断言，例如await expect(page.locator('article')).toHaveAttribute('role', 'article')，确保语义层也受控。真正难的不是写 HTML，是让每一行标签都经得起 W3C 校验、Axe 扫描、Playwright 断言和盲人屏幕阅读器朗读——这些不是附加项，是交付物的出厂标准。
