HTML5与XHTML、HTML4的主要区别

作者：陈川阅读数：29191人阅读分类： HTML

HTML5作为最新的HTML标准，与XHTML和HTML4相比在语法、功能和兼容性上有显著差异。以下从多个维度展开详细对比。

语法规范差异

HTML5采用更宽松的语法规则，而XHTML要求严格的XML格式。例如：

<!-- HTML4/XHTML必须声明DOCTYPE -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>XHTML示例</title>
</head>

<!-- HTML5简化的DOCTYPE -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5示例</title>

XHTML要求所有标签必须闭合，属性必须加引号：

<img src="image.jpg" alt="示例" />
<br />
<input type="text" disabled="disabled" />

HTML5则允许省略某些闭合标签和引号：

<img src=image.jpg alt=示例>
<br>
<input type="text" disabled>

新增语义化标签

HTML5引入了大量语义化元素，这是HTML4/XHTML所不具备的：

<header>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
    </ul>
  </nav>
</header>

<article>
  <section>
    <h1>主标题</h1>
    <p>内容段落...</p>
  </section>
</article>

<aside>侧边栏内容</aside>

<footer>页脚信息</footer>

新增多媒体元素直接嵌入音视频：

<video controls width="640">
  <source src="movie.mp4" type="video/mp4">
</video>

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
</audio>

表单功能增强

HTML5表单新增多种输入类型和属性：

<input type="email" required placeholder="输入邮箱">
<input type="date" min="2020-01-01">
<input type="range" min="0" max="100" step="5">
<input type="color" value="#ff0000">
<input type="search" autocomplete="on">

新增表单验证功能：

<form>
  <input type="text" pattern="[A-Za-z]{3}" title="三个字母">
  <input type="submit">
</form>

API扩展

HTML5提供丰富的JavaScript API：

Canvas绘图示例：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

地理定位API：

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude, position.coords.longitude);
});

本地存储方案：

localStorage.setItem('username', 'John');
sessionStorage.setItem('token', 'abc123');

兼容性处理

HTML5通过特性检测实现渐进增强：

if ('geolocation' in navigator) {
  // 支持地理定位
} else {
  // 降级方案
}

if (typeof(Storage) !== 'undefined') {
  // 支持Web Storage
}

文档类型声明

三种标准的DOCTYPE声明对比：

<!-- HTML4 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML5 -->
<!DOCTYPE html>

元字符编码声明

HTML5简化了字符编码设置：

<!-- HTML4/XHTML -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- HTML5 -->
<meta charset="UTF-8">

废弃的元素和属性

HTML5淘汰了部分表现性元素：

<!-- 不再使用 -->
<font face="Arial" size="4"></font>
<center>内容</center>
<strike>删除线</strike>

<!-- 替代方案 -->
<span style="font-family: Arial; font-size: 1.2em"></span>
<div style="text-align: center"></div>
<del>删除线</del>

脚本和样式处理

HTML5省略了type属性：

<!-- HTML4/XHTML必须指定type -->
<script type="text/javascript" src="app.js"></script>
<style type="text/css">body { margin:0; }</style>

<!-- HTML5默认值 -->
<script src="app.js"></script>
<style>body { margin:0; }</style>

错误处理机制

HTML5定义了标准的错误恢复规则，而XHTML遇到错误会直接停止解析。例如以下代码在HTML5中仍能部分渲染：

<div>
  <p>正确段落
  <img src="image.png" alt="图片
</div>

移动端优化

HTML5新增的viewport元标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

触摸事件支持：

element.addEventListener('touchstart', handleTouch);

Web组件支持

HTML5原生支持自定义元素：

class MyElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h2>自定义元素内容</h2>`;
  }
}
customElements.define('my-element', MyElement);

使用方式：

<my-element></my-element>

性能优化特性

新增的preload和prefetch：

<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.html">

异步脚本加载：

<script async src="analytics.js"></script>
<script defer src="app.js"></script>

可访问性改进

HTML5新增的ARIA属性支持：

<nav aria-label="主导航">
  <ul role="menubar">
    <li role="menuitem">首页</li>
  </ul>
</nav>

响应式图像

HTML5新增的picture和srcset：

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

Web Workers

HTML5引入的多线程技术：

// main.js
const worker = new Worker('worker.js');
worker.postMessage('开始计算');

// worker.js
self.onmessage = function(e) {
  const result = heavyCalculation();
  self.postMessage(result);
};

实时通信

WebSocket API示例：

const socket = new WebSocket('ws://example.com');
socket.onopen = () => {
  socket.send('Hello Server!');
};
socket.onmessage = (event) => {
  console.log(event.data);
};

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：HTML5的定义与发展历程

下一篇：HTML5的设计目标和核心理念