[分享]HTML发展，HTML4与HTML5?
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 |
|---|---|---|
语义元素 | 主要使用<div>和<span>等通用元素来创建结构。 | 引入了大量新的语义元素，如 |
文档类型声明 | 使用 | 文档类型声明简化为 |
表单控件 | 表单控件较少，功能相对简单。 | 增加了新的表单控件和属性，如 |
多媒体支持 | 多媒体内容通常通过插件（如Flash）来实现。 | 通过 |
2D/3D图形 | 不支持直接在浏览器中绘制图形。 | 通过 |
本地存储 | 没有提供本地存储功能。 | 引入了本地存储（localStorage）和会话存储（sessionStorage），允许网页在用户设备上存储数据。 |
离线应用 | 不支持离线应用。 | 通过应用程序缓存（AppCache）支持离线应用，允许网页在没有网络连接的情况下工作。 |
Web Workers | 不支持后台线程。 | 引入了Web Workers，允许在后台线程中运行脚本，避免阻塞UI线程。 |
地理定位 | 没有提供地理定位功能。 | 通过地理位置API允许网页获取用户的位置信息。 |
内容安全策略 | 没有内容安全策略。 | 引入了内容安全策略（CSP），增强了网页的安全性。 |
弃用元素 | 一些元素如 | ... |
结构和样式分离 | 在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>鸟云
52 天前