Frontend Notes Lab

Appearance

Web 标准与 W3C ​

问题 ​

如何理解 Web 标准和 W3C？如何写出符合标准的网页？怎样检测页面是否符合标准？

结论 ​

Web 标准不是某一条固定规则，而是一组由标准组织、浏览器厂商和社区共同推进的规范集合。面试里提 W3C 时，可以说明它是重要的 Web 标准组织之一；同时现代 HTML 标准主要由 WHATWG 维护，浏览器实现和 MDN 文档也是校准答案的重要来源。

符合标准的网页通常具备这些特征：

  • 正确的文档结构：<!doctype html>、html lang、head、body。
  • 合法嵌套：元素放在符合内容模型的位置。
  • 结构与表现分离：HTML 表达结构，CSS 控制样式，JS 负责行为。
  • 语义清晰：标题、列表、表格、表单、链接、按钮使用合适元素。
  • 可访问性基础：控件有名称，键盘可用，图片有合适替代文本。
  • 渐进增强：基础内容先可用，再增强交互体验。

检测方式：

  • 使用 Nu HTML Checker / W3C Validator 检查 HTML 语法和嵌套。
  • 使用浏览器 DevTools 检查 DOM、可访问性树、控制台错误。
  • 使用 Lighthouse 或 axe 检查性能和可访问性问题。
  • 在目标浏览器和设备上做真实测试。

Demo ​

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>符合基本标准的页面</title>
  </head>
  <body>
    <main>
      <h1>页面标题</h1>
      <p>主体内容。</p>
    </main>
  </body>
</html>

常见问题 ​

渐进增强与优雅降级有什么区别？ ​

两者都是跨浏览器兼容的策略，出发点相反：

维度渐进增强优雅降级
方向从基础功能出发，向上增强从完整功能出发，向下兼容
构建顺序先保证低版本可用，再为高版本加特性先为现代浏览器构建完整体验，再为旧浏览器做降级
核心关注内容和基本功能的可达性高版本浏览器的完整体验
典型手段@supports、语义 HTML、<picture>、srcsetCSS hack、polyfill、特性检测后走分支

面试中推荐的答法：渐进增强是现代 Web 开发的主流理念——先写语义正确、可访问的基础 HTML，再用 CSS 和 JS 增强体验；旧浏览器拿到基础体验，新浏览器拿到完整体验。优雅降级则是从完整体验出发，尽量在旧环境中不崩坏。

面试回答：

Web 标准是一组关于 HTML、CSS、DOM、可访问性等的规范和实践。写标准页面不是背标签列表，而是保证文档结构正确、元素嵌套合法、结构表现行为分离、语义清晰，并用验证器、DevTools、Lighthouse、真实浏览器测试来校验。渐进增强与优雅降级都是跨浏览器策略，前者从基础可用出发往上加特性，后者从完整体验出发向下兼容；现代项目更推荐渐进增强。

参考来源 ​