首页 前端知识 HTML发展,HTML4与HTML5?

HTML发展,HTML4与HTML5?

2024-07-30 22:07:44 前端知识 前端哥 967 348 我要收藏

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的区别

项目HTML4HTML5
语义元素主要使用 和 等通用元素来创建结构。 引入了大量新的语义元素,如<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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14624.html
标签
评论
发布的文章

AE、Lottie、JSON简单介绍

2024-08-12 10:08:42

VSCode配置settings.json

2024-08-12 10:08:42

JSON 格式说明

2024-08-12 10:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!