当前位置： 首页 > news >正文

介绍 Html 和 Html 5 的关系与区别

news 2026/2/11 5:11:20

HTML（HyperText Markup Language）是构建网页的标准标记语言，而 HTML5 是 HTML 的最新版本，包含了一些新的功能、元素、API 和属性。HTML5 相对于早期版本的 HTML（比如 HTML4）有许多重要的改进和变化。以下是 HTML 和 HTML5 之间的一些主要区别：

1. 文档类型声明（Doctype）

HTML：HTML4 使用的是较为复杂的 DOCTYPE 声明，如：

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

HTML5：HTML5 使用的是简化的 DOCTYPE 声明：

<!DOCTYPE html>

这个变化使得 HTML5 的文档声明更加简洁易读。

2. 语义化标签

  • HTML：HTML4 中没有很多语义化的标签，网页的结构通常是通过
    和 等标签来构建的，缺乏对页面内容的描述。
  • HTML5：引入了许多新的语义化标签，使得页面结构更加清晰、易读，且对搜索引擎优化（SEO）有帮助。常见的 HTML5 语义标签包括：
<header>：定义页面或部分的头部。
<footer>：定义页面或部分的底部。
<nav>：定义导航链接。
<article>：定义独立的内容块。
<section>：定义文档中的节或部分。
<aside>：定义与页面内容相关的附加信息，如侧边栏。
<figure> 和 <figcaption>：定义图像和图像的标题。

3. 多媒体支持

  • HTML：HTML4 没有原生支持音频和视频，通常需要使用插件（如 Flash）来播放多媒体内容。
  • HTML5：HTML5 引入了原生的多媒体元素，直接支持音频和视频播放，使用 和 标签。例如：
<audio controls><source src="audio.mp3" type="audio/mp3">Your browser does not support the audio element.
</audio><video controls><source src="video.mp4" type="video/mp4">Your browser does not support the video element.
</video>

4. 本地存储

  • HTML：HTML4 没有提供本地存储的功能，开发者通常依赖于 cookie 来存储数据，但 cookie 存储的数据量非常有限（通常为 4KB）。
  • HTML5：HTML5 引入了本地存储机制，提供了 localStorage 和 sessionStorage，这使得网页能够在用户的浏览器中存储大量数据，且存储的数据不会被清除直到主动删除：
	 localStorage：无过期时间的数据存储，数据在浏览器关闭后依然存在。sessionStorage：在会话期间存储数据，浏览器窗口关闭时数据会被清除。

5. 新的表单控件

  • HTML：HTML4 的表单控件相对基础，只支持传统的输入类型（如文本框、单选框、复选框、按钮等）。
  • HTML5：HTML5 引入了许多新的表单元素和输入类型，增强了表单功能。例如：
新的输入类型：email、tel、number、date、time、url、range 等。
新的表单控件：<datalist>（提供自动完成的输入框）、<progress>（显示进度条）、<meter>（显示度量数据）等。
<input type="email" placeholder="Enter your email">

6. Canvas 和 SVG

  • HTML：HTML4 没有内建的支持用于绘图和图形的功能。

  • HTML5：引入了 元素，允许开发者使用 JavaScript 绘制图形、图表、动画等。HTML5 还加强了对 SVG（可缩放矢量图形）的支持。

<canvas id="myCanvas" width="200" height="100"></canvas>

7. Web API（Web 应用接口）

  • HTML4：HTML4 没有提供直接的 Web 应用接口。
  • HTML5：HTML5 引入了许多新的 Web API，使得开发者可以实现更多的功能，例如：
Geolocation API：获取用户的位置信息。
Web Workers：实现多线程处理，提升应用性能。
WebSockets：进行实时双向通信。
File API：允许浏览器直接访问文件系统并读取文件。
Offline Storage：用于离线应用，允许将数据缓存到本地。

8. 移除了一些过时的元素和属性

  • HTML：HTML4 中有一些不再推荐使用的元素和属性，如 、
    、 等。 
<font>、<center>、<strike>
  • HTML5：移除了这些过时的元素和属性，推荐使用 CSS 来处理样式和布局。

9. 更好的兼容性

  • HTML5：HTML5 更加注重跨平台和跨设备的兼容性，支持现代浏览器、移动设备、触摸屏等设备，并且能更好地支持响应式设计。

10. 离线支持

  • HTML：HTML4 不支持离线应用。
  • HTML5：HTML5 引入了 AppCache 和 Service Workers，支持离线应用，使得应用在没有网络连接时依然能正常运行。

11. 总结

  • HTML 是构建网页的基础标准，它提供了网页结构和内容的基本定义。
  • HTML5 是 HTML 的最新版本，加入了许多新的功能和元素，如新的语义标签、音视频支持、表单控件、Canvas、Web API、离线支持等，使得开发更为现代化、功能更强大。

HTML5 的引入使得网页和应用变得更加丰富，支持多媒体、图形、动画、数据存储等功能，提升了用户体验，并且让开发者能够更方便地构建跨平台的网页和应用。

相关文章：

介绍 Html 和 Html 5 的关系与区别

HTML&#xff08;HyperText Markup Language&#xff09;是构建网页的标准标记语言&#xff0c;而 HTML5 是 HTML 的最新版本&#xff0c;包含了一些新的功能、元素、API 和属性。HTML5 相对于早期版本的 HTML&#xff08;比如 HTML4&#xff09;有许多重要的改进和变化。以下是…...

编程日记 2024/12/22 1:18:43

C05S13-MySQL数据库备份与恢复

一、MySQL数据备份 1. 数据备份概述 数据备份的主要目的是灾难恢复&#xff0c;也就是当数据库等出现故障导致数据丢失&#xff0c;能够通过备份恢复数据。 数据备份可以分为物理备份和逻辑备份。物理备份&#xff0c;又称为冷备份&#xff0c;需要关闭数据库进行备份&#…...

编程日记 2024/12/22 1:16:41

【MySQL — 数据库基础】深入理解数据库服务与数据库关系、MySQL连接创建、客户端工具及架构解析

目录 1. 数据库服务&#xff06;数据库&#xff06;表之间的关系 1.1 复习 my.ini 1.2 MYSQL服务基于mysqld启动而启动 1.3 数据库服务的具体含义 1.4 数据库服务&数据库&表之间的关系 2. 客户端工具 2.1 客户端连接MySQL服务器 2.2 客…...

编程日记 2024/12/22 1:15:40

Three.js相机Camera控件知识梳理

原文&#xff1a;https://juejin.cn/post/7231089453695238204?searchId20241217193043D32C9115C2057FE3AD64 1. 相机类型 Three.js 主要提供了两种类型的相机&#xff1a;正交相机&#xff08;OrthographicCamera&#xff09;和透视相机&#xff08;PerspectiveCamera&…...

编程日记 2024/12/22 1:14:39

Unity 开发Apple Vision Pro空间锚点应用Spatial Anchor

空间锚点具有多方面的作用 虚拟物体定位与固定&#xff1a; 位置保持&#xff1a;可以把虚拟物体固定在现实世界中的特定区域或位置。即使使用者退出程序后再次打开&#xff0c;之前锚定过的虚拟物体仍然能够出现在之前所锚定的位置&#xff0c;为用户提供连贯的体验。比如在一…...

编程日记 2024/12/22 1:13:38

BGP的六种状态分别是什么？

此文章主要简单介绍下BGP的六种状态 1.Idle BGP会话的初始状态&#xff0c;路由器在此状态下不与任何BGP邻居通信&#xff0c;通常标识会话还没有开始或由于错误而未能启动&#xff0c;一般来说&#xff0c;缺乏去往BGP对等体的路由是导致BGP路由器其状态一直处于idle状态的常…...

编程日记 2024/12/22 1:10:35

IDEA搭建SpringBoot，MyBatis，Mysql工程项目

目录 一、前言 二、项目结构 三、初始化项目 四、SpringBoot项目集成Mybatis编写接口 五、代码仓库 一、前言 构建一个基于Spring Boot框架的现代化Web应用程序&#xff0c;以满足[公司/组织名称]对于[业务需求描述]的需求。通过利用Spring Boot简化企业级应用开发的优势&…...

编程日记 2024/12/22 1:07:32

Reactor

文章目录 正确的理解发送double free问题 1.把我们的reactor进行拆分2.链接管理3.Reactor的理论 listensock只需要设置_recv_cb&#xff0c;而其他sock&#xff0c;读&#xff0c;写&#xff0c;异常 所以今天写nullptr其实就不太对&#xff0c;添加为空就没办法去响应事件 获…...

编程日记 2024/12/22 1:00:22

在ESP32使用AT指令集与服务器进行TCP/IP通信时，＜link ID＞ 解释

在ESP32使用AT指令集与服务器进行TCP/IP通信时&#xff0c;<link ID> 是一个非常重要的参数。它用于标识不同的连接实例&#xff0c;特别是在多连接场景下&#xff08;如同时建立多个TCP或UDP连接&#xff09;。每个连接都有唯一的<link ID>&#xff0c;通过这个ID…...

编程日记 2024/12/22 0:58:20

[SZ901] JTAG合并功能（类似FPGA菊花链）

SZ901 JTAG支持将JTAG端口组合&#xff0c;最多将四个JTAG变成一个 设置如下 Vivado 识别结果如下 两块板子&#xff0c;变成一组&#xff0c;&#xff0c;可以同时抓取信号&#xff0c;调试&#xff01; SZ901 已上架淘宝&#xff0c;搜素“SZ901”哦...

编程日记 2024/12/22 0:57:19

paimon中的Tag

TAG 在传统数仓场景中&#xff0c;从传统数据库中导入的事实表数据一般是全量导入&#xff0c;按天分区每天都存储一份全量数据&#xff0c;paimon对此提供了Tag机制&#xff0c;创建TAG时&#xff0c;会对当前数据做一份全量快照&#xff0c;在之后对表的数据进行更新也不会影…...

编程日记 2024/12/22 0:53:15

3分钟读懂数据分析的流程是什么

数据分析是基于商业目的&#xff0c;有目的地进行收集、整理、加工和分析数据&#xff0c;提炼出有价值的 信息的一个过程。整个过程大致可分为五个阶段&#xff0c;具体如下图所示。 1.明确目的和思路 在开展数据分析之前&#xff0c;我们必须要搞清楚几个问题&#xff0c;比…...

编程日记 2024/12/22 0:52:14

uniapp入门 01创建项目模版

0安装 hbuilder x 标准版 1.创建模版工程 2.创建官方 案例工程 index.uvuewen 文件解析 <!-- 模版 标签 --> <template><view></view></template><!-- 脚本 --> <script>export default {data() {return {}},onLoad() {},methods:…...

编程日记 2024/12/22 0:50:12

React 19新特性探索：提升性能与开发者体验

React作为最受欢迎的JavaScript库之一&#xff0c;不断推出新版本以应对日益复杂的应用需求。React 19作为最新的版本&#xff0c;引入了一系列令人兴奋的新特性和改进&#xff0c;旨在进一步提升应用的性能、开发效率和用户体验。 本文将深入探讨React 19的新特性&#xff0c;…...

编程日记 2024/12/22 0:49:11

Hive是什么，Hive介绍

官方网站&#xff1a;Apache Hive Hive是一个基于Hadoop的数据仓库工具&#xff0c;主要用于处理和查询存储在HDSF上的大规模数据‌。Hive通过将结构化的数据文件映射为数据库表&#xff0c;并提供类SQL的查询功能&#xff0c;使得用户可以使用SQL语句来执行复杂的​MapReduce任…...

编程日记 2024/12/22 0:46:08

[LeetCode-Python版] 定长滑动窗口1（1456 / 643 / 1343 / 2090 / 2379）

思路 把问题拆解成三步&#xff1a;入-更新-出。 入&#xff1a;下标为 i 的元素进入窗口&#xff0c;更新相关统计量。如果 i<k−1 则重复第一步。更新&#xff1a;更新答案。一般是更新最大值/最小值。出&#xff1a;下标为 i−(k-1) 的元素离开窗口&#xff0c;更新相关…...

编程日记 2024/12/22 0:39:02

imx6ull qt多页面控制系统（正点原子imx系列驱动开发）

开题答辩完了也考完了四六级&#xff0c;赶紧来更新一下一个月前留下的坑吧 QAQ首先&#xff0c;因为毕业设计需要用到这些知识所以就从网络上找了一个智能车机系统&#xff0c;借鉴了一下大佬的项目思路&#xff0c;缝缝补补一个月终于完成了这一内容。 在这里先感谢从两位大佬…...

编程日记 2024/12/22 0:33:56

OCR:文字识别

使用场景: 远程身份认证 自动识别录入用户身份/企业资质信息&#xff0c;应用于金融、政务、保险、电商、直播等场景&#xff0c;对用户、商家、主播进行实名身份认证&#xff0c;有效降低用户输入成本&#xff0c;控制业务风险 文档电子化 识别提取各类办公文档、合同文件、企…...

编程日记 2024/12/22 0:29:51

SQL Server通过存储过程实现自定义邮件格式并定时发送

在 SQL Server 中，可以通过存储过程实现自定义邮件格式并定时发送。这通常涉及以下几个步骤： 1. 配置 Database Mail：首先需要配置 SQL Server 的 Database Mail 功能。 2. 创建存储过程：编写存储过程来生成自定义邮件格式并发送邮件。 3. 设置 SQL Server 代理作…...

编程日记 2024/12/22 0:25:48

【进阶编程】MVC和MVVM实现前后端分离的实现

在 WPF 开发中&#xff0c;通常使用 MVVM&#xff08;Model-View-ViewModel&#xff09;架构来分离视图和业务逻辑&#xff0c;但在某些情况下&#xff0c;你可能希望将 MVC&#xff08;Model-View-Controller&#xff09;模式与 MVVM 结合使用。这种结合有时是为了兼顾不同的架…...

编程日记 2024/12/22 0:22:45

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2026/2/10 11:45:58

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/8 20:42:55

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2026/1/31 10:55:22

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2026/1/23 2:04:44

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2026/2/1 2:08:53