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

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

news 2026/2/11 1:13:04

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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2026/2/10 23:54:46

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2026/2/10 13:19:02

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/30 3:28:14

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/2/3 15:24:36

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2026/1/31 6:01:08

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2026/1/29 5:21:31

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2026/1/26 17:26:03

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

编程新知 2026/2/10 15:49:10

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

编程新知 2026/1/21 17:44:45