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

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

news 2025/9/12 9:43:43

当我们提到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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/9/11 16:48:32

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/9/7 7:10:25

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/7/27 23:10:57

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/7/23 18:46:38

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/9/2 16:07:10

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/9/3 19:32:54

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/9/2 16:58:48

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2025/9/7 8:50:37

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/9/7 8:50:27