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

HTML5与HTML：不仅仅是标签的革新

news 2026/2/10 1:47:44

当我们提到HTML5，很多人会想到这是HTML的一个升级版本，增加了许多新的标签和特性。然而，HTML5带来的变化远不止于此。它是一个全面的网页开发框架，重新定义了网络应用程序的构建方式，为开发者提供了前所未有的灵活性和控制力。本文将深入探讨HTML5与经典HTML之间的主要区别，并展示一些代码示例来阐明这些概念。

一、文档类型声明的简化

在HTML5中，文档类型声明变得非常简洁：

<!DOCTYPE html>

而在早期的HTML版本中，声明更为复杂：

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

HTML5的简化减少了代码量，提高了加载速度。

二、语义化标签

HTML5引入了一系列语义化标签，使页面结构更加清晰，有利于搜索引擎优化和无障碍访问。例如：

<header><h1>网站标题</h1><nav><ul><li><a href="#home">首页</a></li><li><a href="#about">关于我们</a></li><li><a href="#contact">联系我们</a></li></ul></nav>
</header><section><article><h2>文章标题</h2><p>文章内容...</p></article>
</section><footer><p>&copy; 2024 网站名称</p>
</footer>

三、多媒体支持

HTML5提供了<audio>和<video>标签，无需额外插件即可嵌入音频和视频：

<audio controls><source src="audio.mp3" type="audio/mpeg">您的浏览器不支持音频播放。
</audio><video width="320" height="240" controls><source src="movie.mp4" type="video/mp4">您的浏览器不支持视频播放。
</video>

四、绘图和动画

HTML5的<canvas>和SVG（可缩放矢量图形）允许在网页上绘制图形和创建动画：

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.fillStyle = 'red';ctx.fillRect(10, 10, 100, 100);
</script>

五、本地存储

HTML5的Web Storage（localStorage和sessionStorage）和IndexedDB提供了客户端数据存储能力：

// 存储数据
localStorage.setItem('username', 'JohnDoe');// 获取数据
const username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe

六、离线应用

HTML5的Application Cache（AppCache）允许网页在离线状态下依然可以访问：

<!DOCTYPE html>
<html manifest="appcache.manifest">
<head><!-- AppCache manifest file -->
</head>
<body><!-- 页面内容 -->
</body>
</html>

七、Web Workers

Web Workers允许在后台线程中执行JavaScript，避免阻塞UI：

// main.js
const worker = new Worker('worker.js');
worker.postMessage({data: 'Hello from the main thread!'});
worker.onmessage = function(event) {console.log('Received message:', event.data);
};// worker.js
self.addEventListener('message', function(event) {console.log('Received data from main thread:', event.data);self.postMessage('Hello from the worker!');
}, false);

八、拖放API

HTML5支持原生的拖放功能，无需任何插件：

<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)">将文件拖放到这里...
</div><script>
function allowDrop(ev) {ev.preventDefault();
}function drop(ev) {ev.preventDefault();var files = ev.dataTransfer.files;for (var i = 0; i < files.length; i++) {console.log(files[i].name);}
}
</script>

HTML5的出现不仅增加了网页的表现力，还扩展了其功能边界，使其能够更好地适应现代网络应用的需求。从多媒体集成到本地存储，再到离线应用和绘图能力，HTML5为我们提供了前所未有的工具箱。随着技术的不断进步，HTML5将继续演化，为开发者和用户提供更多可能性。

相关文章：

HTML5与HTML：不仅仅是标签的革新

当我们提到HTML5&#xff0c;很多人会想到这是HTML的一个升级版本&#xff0c;增加了许多新的标签和特性。然而&#xff0c;HTML5带来的变化远不止于此。它是一个全面的网页开发框架&#xff0c;重新定义了网络应用程序的构建方式&#xff0c;为开发者提供了前所未有的灵活性和…...

编程日记 2024/6/28 9:43:43

Mybatis面试学习

1.介绍一下mybatis mybatis是一个半自动的ORM的框架&#xff0c;ORM就是对象关系映射。&#xff08;对象指的是Java对象&#xff0c;关系指的是数据库中的关系模型&#xff0c;对象关系映射&#xff0c;指的就是在Java对象和数据库的关系模型之间建立一种对应关系&#xff09;…...

编程日记 2024/6/28 9:41:41

el-date-picker设置时间范围

下面这种写法会报错&#xff1a;找不到expirationDate&#xff0c;这是因为涉及到this的指向问题 在普通函数中&#xff0c;this 的上下文并不指向 Vue 组件实例&#xff0c;而是取决于函数的调用方式或者是否使用了严格模式 <el-date-pickerclass"date-icon-common&q…...

编程日记 2024/6/28 9:40:40

Links: Challenging Puzzle Game Template（益智游戏模板）

链接：挑战益智游戏 《Links》是一款独特且具有挑战性的益智游戏，即将发布。 每个级别都会向玩家展示不同的棋盘。目标是通过移动和旋转所有棋子来连接它们。每个棋子都有自己的特点和功能-你可以移动它们，旋转它们，或者两者兼而有之。连接所有棋子，以解决难度和挑战不断增…...

编程日记 2024/6/28 9:38:38

java基于ssm+jsp 仓库智能仓储系统

1管理员功能模块 管理员登录&#xff0c;通过填写用户名、密码等信息&#xff0c;输入完成后选择登录即可进入智能仓储系统 &#xff0c;如图1所示。 图1管理员登录界面图 智能仓储系统 &#xff0c;在智能仓储系统可以查看个人中心、公告信息管理、员工管理、供应商管理、商…...

编程日记 2024/6/28 9:36:36

第24篇 滑动开关控制LED＜二＞

Q&#xff1a;如何使用Intel FPGA Monitor Program创建滑动开关控制LED工程并运行呢&#xff1f; A&#xff1a;创建工程的基本过程与前面的Intel FPGA Monitor Program的使用<三>一样&#xff0c;不同的地方是&#xff0c;本实验工程用到了开发板的外设硬件LED和SW&…...

编程日记 2024/6/28 9:35:35

Redis单例部署

目录 1. 概述2. 参考3. 环境4. 部署4.1 操作系统4.1.1 修改系统参数4.1.2 关闭透明大页内存4.1.3 修改系统限制 4.2 安装Redis4.2.1 下载Redis4.2.2 创建redis账号4.2.3 添加Redis环境变量4.2.4 创建Redis使用目录4.2.5 安装Redis4.2.6 手动修改配置文件&#xff08;**可跳过&a…...

编程日记 2024/6/28 9:33:32

HarmonyOS4升级到Harmonyos Next（Api 11）学习捷径

HarmonyOS4升级到Harmonyos Next&#xff08;Api 11&#xff09;学习捷径&#xff0c;新技术学习路上少走弯路。HarmonyOS NEXT和HarmonyOS 4的基本语法都是一样的&#xff0c;但是还有一些区别。如果你学会HarmonyOS4&#xff0c;那么HarmonyOS Next也自然而然的会了。 Harmon…...

编程日记 2024/6/28 9:30:27

[电子电路学]电路分析基本概念1

第一章 电路分析的基本概念和基本定律 电路模型 反映实际电路部件的主要电磁性质的理想电路元件及其组合&#xff0c;是实际电路电气特性的抽象和近似。 理想电路元件 实际电路器件品种繁多&#xff0c;其电磁特性多元而复杂&#xff0c;分析和计算时非常困难。而理想电路元件…...

编程日记 2024/6/28 9:29:26

Linux bash: /usr/local/gcc/bin/gcc: 不是目录

ln -s /usr/local/bin/gcc /usr/bin/gcc ln -s /usr/local/bin/g /usr/bin/g 创建的软连接不生效 问题&#xff1a; [rootdev003 local]# gcc -v bash: /usr/local/gcc/bin/gcc: 不是目录 或者 [rootdev003 local]# gcc -v bash: /usr/local/bin/gcc: 没有那个文件或目录 解决&…...

编程日记 2024/6/28 9:28:24

vue项目中,pnpm不能用-解决

方法四&#xff1a;解决 PowerShell 执行策略问题 如果你决定继续使用 PowerShell&#xff0c;并且遇到执行策略问题&#xff0c;可以尝试以下方法解决&#xff1a; 永久更改执行策略&#xff1a; 在管理员权限的 PowerShell 中运行以下命令&#xff0c;以永久更改执行策略&am…...

编程日记 2024/6/28 9:27:23

数据处理python

1.列筛选 &#xff08;1&#xff09;某一列&某几列 对于一个表单里面的数据&#xff0c;如果我们想要对于这个表单里面的数据进行处理&#xff0c;我们可以一列一列进行处理&#xff0c;也可以多列一起进行处理&#xff1b; 一列一列处理&#xff1a; 只需要在这个dataf…...

编程日记 2024/6/28 9:25:21

【MotionCap】SLAHMR 在 Colab 的demo运行笔记

【MotionCap】SLAHMR slahmr将人类和相机运动与野外视频分离 CVPR 2023跳至主要内容 SLAHMR (supports 4D Humans).ipynb SLAHMR (supports 4D Humans).ipynb_笔记本已移除星标Google Colab demo for: SLAHMR - Simultaneous Localization And Human Mesh Recovery @inproc…...

编程日记 2024/6/28 9:24:20

Qt-Advanced-Docking-System示例程序

写了一些简单的示例程序&#xff0c;帮助我更好地使用和了解Qt-Advanced-Docking-System 1.写一个如图页面布局的程序 m_pDockMangernew ads::CDockManager(this);this->setCentralWidget(m_pDockManger);ads::CDockWidget* centerDockWidgetnew ads::CDockWidget("中…...

编程日记 2024/6/28 9:23:18

戴尔笔记本重装系统？笔记本卡顿失灵？一键重装系统！

随着科技的快速发展&#xff0c;笔记本电脑已成为我们日常生活和工作中不可或缺的工具。然而&#xff0c;随着时间的推移&#xff0c;笔记本可能会遇到各种问题&#xff0c;如系统卡顿、失灵等。这时&#xff0c;重装系统往往是一个有效的解决方案。本文将详细介绍如何在戴尔笔…...

编程日记 2024/6/28 9:22:17

ViewController 的常用跳转及返回方法

ViewController 的常用跳转及返回方法 ViewController 的常用跳转及返回方法模态跳转导航控制器选项卡控制器Storyboard 的 segues 方式跳转 ViewController 的常用跳转及返回方法 模态跳转 一个普通的视图控制器一般只有模态跳转的功能&#xff0c;这个方法是所有视图控制器…...

编程日记 2024/6/28 9:21:16

FFmpeg开发笔记（四十一）结合OBS与MediaMTX实现SRT直播推流

《FFmpeg开发实战&#xff1a;从零基础到短视频上线》一书的“10.2 FFmpeg推流和拉流”提到直播行业存在RTSP和RTMP两种常见的流媒体协议。除此以外&#xff0c;还有于2017年推出的SRT协议&#xff0c;相比常见的RTMP协议&#xff0c;SRT协议具有更低的延迟&#xff0c;并且消…...

编程日记 2024/6/28 9:20:15

探索AI的巅峰：详解GPT-3.5与GPT-4系列模型的区别

人工智能领域不断涌现出令人惊叹的技术突破&#xff0c;其中OpenAI的ChatGPT系列模型尤为引人注目。随着GPT-4的发布&#xff0c;技术开发者们对比分析其与前一代GPT-3.5的差异显得尤为重要。本文将深入探讨GPT-3.5和GPT-4系列模型的主要区别&#xff0c;帮助大家更好地理解和应…...

编程日记 2024/6/28 9:19:13

Linux-笔记 使用SCP命令传输文件报错 ：IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!

前言 使用scp命令向开发板传输文件发生报错&#xff0c;报错见下图; 解决 rm -rf /home/<用户名>/.ssh/known_hosts 此方法同样适用于使用ssh命令连接开发板报错的情况。 参考 https://blog.csdn.net/westsource/article/details/6636096...

编程日记 2024/6/28 9:18:12

计算机网络 静态路由及动态路由RIP

一、理论知识 1.静态路由 静态路由是由网络管理员手动配置在路由器上的固定路由路径。其优点是简单和对网络拓扑变化不敏感&#xff0c;缺点是维护复杂、易出错&#xff0c;且无法自动适应网络变化。 2.动态路由协议RIP RIP是一种基于距离向量的动态路由协议。它使用跳数作…...

编程日记 2024/6/28 9:16:09

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2026/2/2 0:45:02

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2026/2/1 21:58:45

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2026/2/4 17:18:03

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/2/9 20:16:17

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2026/2/3 15:45:51

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

编程新知 2026/2/6 5:51:15

客户案例 | 短视频点播企业海外视频加速与成本优化：MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...

编程新知 2026/1/29 7:55:37

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...

编程新知 2026/1/22 11:13:58

算法250609 高精度

加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...

编程新知 2025/9/17 10:04:40