HTML发展，HTML4与HTML5?

Dd_ddc

于 2024-07-19 18:01:01 发布

阅读量780

点赞数 23

文章标签： html html5 前端

本文链接：https://blog.csdn.net/Dd_ddc/article/details/140556643

版权

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

Dd_ddc

关注

23
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML发展，HTML4与HTML5?

HTML（超文本标记语言）是用于创建网页和网页应用的标准标记语言。自1990年代初首次发布以来，HTML已经经历了多个版本的更新，每个版本都引入了新特性、改进和规范。以下是HTML主要版本的发展历程和区别：在下面的案例中：HTML5在下面的案例中：参考https://www.w3.org/https://developer.mozilla.org/zh-CN/https://html5doctor.com/https://html.spec.whatwg.org/multipage/htt
复制链接

扫一扫