基于本文回答

播面

0
评论

HTML、XHTML 和 HTML5 有什么区别？

知识点图片

简单来说，这三者是 Web 网页标准发展的不同阶段。

  • HTML (4.01及之前): 早期标准，语法宽松，基于 SGML。
  • XHTML: 试图将 HTML 变得严谨（XML 化），语法非常严格，容错率低。
  • HTML5: 当前的主流标准，结合了 HTML 的宽容度和 XHTML 的规范性，并增加了大量适应移动端和多媒体的新功能。

以下是详细的区别对比：

1. 定义与基础 (Definition & Basis)

  • HTML (HyperText Markup Language): 超文本标记语言。早期的 HTML（如 4.01）是基于 SGML (标准通用标记语言) 定义的。它的特点是语法比较随意，浏览器会尽力去“猜”你想展示什么，即使代码写得很烂。
  • XHTML (Extensible HTML): 可扩展超文本标记语言。它是 XML (可扩展标记语言) 版本的 HTML。它的诞生是为了解决 HTML 语法混乱的问题，要求代码必须像 XML 一样格式严谨。
  • HTML5: 下一代 HTML 标准。它不再基于 SGML，而是拥有自己的解析规则。它旨在提高语言的易用性，支持最新的多媒体，并保持对旧版本浏览器的向后兼容性。

2. 语法规则 (Syntax Rules)

这是开发者最直观能感受到的区别：

特性 HTML (4.01) XHTML HTML5
严谨度 宽松 严格 (XML 风格) 灵活 (既支持宽松写法，也兼容严谨写法)
标签大小写 不区分 (<DIV> 和 <div> 一样) 必须小写 不区分 (建议小写)
闭合标签 某些标签可不闭合 (如 <p>, <li>) 所有标签必须闭合 可选 (但在 React/Vue 等框架中习惯闭合)
空标签 不需要结束符 (如 <br>) 必须自闭合 (如 <br />) 两者都行 (<br> 或 <br />)
属性引号 可省略 (如 class=box) 必须加引号 (如 class="box") 可省略 (建议加引号)
属性值 可简写 (如 checked) 禁止简写 (如 checked="checked") 支持简写 (如 checked)

3. 文档类型声明 (DOCTYPE)

DOCTYPE 告诉浏览器使用哪种规范来解析网页。

  • HTML 4.01: 非常长，因为要引用 SGML 的 DTD (文档类型定义)。
    html 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • XHTML 1.0: 也很长，且必须引用 XML DTD。
    html 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • HTML5: 极其简洁，不依赖 DTD。
    html 
    <!DOCTYPE html>

4. 新特性与功能 (Features)

这是 HTML5 能够取代前两者的核心原因：

  • 语义化标签:

    • HTML/XHTML: 主要靠 <div id="header">, <div class="footer"> 来布局。
    • HTML5: 引入了 <header>, <footer>, <nav>, <section>, <article>, <aside> 等语义化标签，利于 SEO 和阅读。

  • 多媒体支持:

    • HTML/XHTML: 播放视频/音频需要依赖第三方插件（如 Flash、Silverlight）。
    • HTML5: 原生支持 <video> 和 <audio> 标签，直接在浏览器播放。

  • 图形与绘图:

    • HTML5: 引入了 <canvas> (用于 2D 绘图，如游戏、图表) 和对 SVG 的原生支持。

  • 表单增强:

    • HTML5: <input> 增加了许多类型，如 date, email, url, number, range，自带验证功能。

  • API 支持:

    • HTML5 不仅仅是标记语言，还包括一系列 JavaScript API 标准，如：
      • LocalStorage/SessionStorage: 本地存储（替代 Cookie）。
      • Geolocation: 获取地理位置。
      • Drag and Drop: 拖放功能。
      • Web Workers: 多线程处理。

5. 错误处理 (Error Handling)

  • XHTML: 如果代码有错误（例如漏了一个闭合标签），浏览器（如果是严格的 XML 解析器）会停止渲染并报错（黄屏或 XML 解析错误）。这导致了 Web 开发极其痛苦。
  • HTML5: 制定了标准的错误处理机制。即使代码写得不规范，所有浏览器也会按照统一的方式去“容错”并渲染页面，保证用户能看到内容。

总结

  • HTML 是过去，奠定了基础。
  • XHTML 是一个过渡时期的理想主义尝试，虽然语法优美，但因为过于严格而不适应 Web 的现实。
  • HTML5 是现在和未来。它务实地结合了 HTML 的宽容和现代 Web 应用的需求（多媒体、移动端、API）。

现在的网页开发，默认都是指 HTML5。

右滑查看面试常问