HTML（超文本标记语言）是用于创建网页和网页应用的标准标记语言。自1990年代初首次发布以来，HTML已经经历了多个版本的更新，每个版本都引入了新特性、改进和规范。以下是HTML主要版本的发展历程和区别：
- HTML1.0 (1993年)
- 基础：最早的HTML版本，支持基本的文本格式化和链接。
- 限制：功能非常有限，不支持表格、表单等。
- HTML2.0 (1995年)
- 表格：增加了表格元素，允许更复杂的数据展示。
- 表单：引入了表单元素，允许用户输入数据。
图像映射：允许在图像上定义可点击区域。
- HTML3.2 (1997年)
- 样式：引入了层叠样式表（CSS），允许更丰富的样式控制。
- 字体：增加了字体样式和大小的控制。
- 框架：引入了帧（frames），允许在同一页面内显示多个视口。
- HTML4.01 (1999年)
- 文档类型：定义了三种文档类型：Strict（严格）、Transitional（过渡）和Frameset（框架集）。
- 表单：增加了更多的表单元素和属性，如
<label>、<fieldset >等。 - 多媒体：引入了
<applet>标签，允许嵌入Java小程序。 - 脚本：增强了对JavaScript的支持。
- XHTML 1.0 (2000年)
- XML兼容：将HTML与XML结合，要求更严格的语法。
- 小写标签：所有标签和属性名必须使用小写。
- 属性值引号：属性值必须使用引号。
- HTML5 (2014年)
- 语义元素：引入了大量新的语义元素，如
<article>、<section>、<nav>等，以更好地描述页面内容。 - 表单控件：增加了新的表单控件，如
<progress>、<meter>等。 - 多媒体：通过
<audio>和<video>元素原生支持多媒体内容。 - 2D/3D图形：通过
<canvas>元素支持图形和动画。 - 存储：引入了本地存储（localStorage）和会话存储（sessionStorage）。
- 离线应用：通过应用程序缓存（AppCache）支持离线应用。
- Web Workers：允许在后台线程中运行脚本。
- Web Sockets：实现了全双工通信。
- 地理定位：通过地理位置API获取用户位置。
- 语义元素：引入了大量新的语义元素，如
- HTML5.1 (2016年)
- 改进：相对于HTML5的小幅更新，主要是修复了一些错误和不一致性。
- 安全性：增强了对内容安全策略的支持。
- HTML5.2 (2017年)
- 新特性：继续增强HTML5.1，增加了一些新特性和改进。
- 表单：增加了新的表单控件和属性，如
<output>元素和<meter>元素的min、max属性。
- HTML6 (预计2024年)
- 草案阶段：目前还处于草案阶段，预计将引入更多的新特性和改进。
- 模块化：可能会进一步模块化HTML规范，使其更易于维护和扩展。
- CSS和JavaScript
- CSS：随着HTML的发展，CSS也在不断进化，提供了更丰富的样式和布局选项。
- JavaScript：作为Web开发的核心语言之一，JavaScript也在不断扩展其功能，支持更复杂的交互和应用逻辑。
随着Web技术的发展，HTML、CSS和JavaScript共同构成了现代Web应用的基础。开发者需要不断学习和适应这些技术的变化，以构建更丰富、更互动的Web体验。
HTML4和HTML5的区别
| 项目 | HTML4 | HTML5 |
|---|---|---|
| 语义元素 | 主要使用 和 等通用元素来创建结构。 | 引入了大量新的语义元素，如<article>、<section>、<nav>、<aside>、<header>、<footer>等，以更清晰地描述页面内容。 |
| 文档类型声明 | 使用<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">或类似的声明。 | 文档类型声明简化为<!DOCTYPE html> |
| 表单控件 | 表单控件较少，功能相对简单。 | 增加了新的表单控件和属性，如<progress>、<meter>、<input type="email">、<input type="url">等，提高了表单的用户体验和数据验证能力。 |
| 多媒体支持 | 多媒体内容通常通过插件（如Flash）来实现。 | 通过<audio>和<video>元素原生支持多媒体内容，无需额外插件。 |
| 2D/3D图形 | 不支持直接在浏览器中绘制图形。 | 通过<canvas>元素支持2D图形和动画，还可以使用WebGL进行3D图形渲染。 |
| 本地存储 | 没有提供本地存储功能。 | 引入了本地存储（localStorage）和会话存储（sessionStorage），允许网页在用户设备上存储数据。 |
| 离线应用 | 不支持离线应用。 | 通过应用程序缓存（AppCache）支持离线应用，允许网页在没有网络连接的情况下工作。 |
| Web Workers | 不支持后台线程。 | 引入了Web Workers，允许在后台线程中运行脚本，避免阻塞UI线程。 |
| 地理定位 | 没有提供地理定位功能。 | 通过地理位置API允许网页获取用户的位置信息。 |
| 内容安全策略 | 没有内容安全策略。 | 引入了内容安全策略（CSP），增强了网页的安全性。 |
| 弃用元素 | 一些元素如<font>、<center>、<big>等在HTML5中被弃用或不再推荐使用。 | … |
| 结构和样式分离 | 在HTML中混入样式和脚本是常见的做法。 | 鼓励更严格的结构和样式分离，使用CSS和JavaScript来处理样式和行为。 |
HTML4和HTML5的基本示例
HTML4
在下面的案例中：
- 使用
<b>标签加粗文本（在HTML5中不推荐使用）。 - 使用bgcolor属性设置页面背景颜色（在HTML5中应该使用CSS）。
- 使用
<table>标签创建表格。 - 一个简单的表单，使用内联样式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>HTML4 示例</title>
</head>
<body bgcolor="#f0f0f0">
<table width="100%" border="1">
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>内容1-1</td>
<td>内容1-2</td>
</tr>
</table>
<form action="submit.php" method="post">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
</body>
</html>
HTML5
在下面的案例中：
- 使用
<!DOCTYPE html>声明文档类型。 - 语义化标签，如
<header>、<nav>、<section>、<footer>和<figure>。 - 使用
<figcaption>标签为图片添加说明。 - 表单控件使用
<label>和<input>标签，以及for属性与id属性的关联。 - 使用CSS样式而不是内联样式或旧的HTML属性来控制布局和颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 示例</title>
<style>
body { background-color: #f0f0f0; }
table, th, td { border: 1px solid black; }
</style>
</head>
<body>
<header>
<h1>页面标题</h1>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>
</header>
<section id="section1">
<h2>Section 1</h2>
<p>这是第1节的内容。</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>这是第2节的内容。</p>
</section>
<footer>
<p>版权所有 © 2023</p>
</footer>
<figure>
<img src="image.jpg" alt="示例图片">
<figcaption>图片说明</figcaption>
</figure>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<button type="submit">提交</button>
</form>
</body>
</html>
参考
- https://www.w3.org/
- https://developer.mozilla.org/zh-CN/
- https://html5doctor.com/
- https://html.spec.whatwg.org/multipage/
- https://www.runoob.com/html/html5-intro.html
转载自开思通智网：https://www.opensnn.com/os/article/10001061
