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

《HTML 的变革之路：从过去到未来》

news 2026/3/29 12:57:52

一、HTML 的发展历程

图片: Alt

HTML 从诞生至今，经历了多个版本的迭代。

（一）早期版本

  1. HTML 3.2 在 1997 年 1 月 14 日成为 W3C 推荐标准，提供了表格、文字绕排和复杂数学元素显示等新特性，但因实现复杂且缺乏浏览器支持，开发中止。之后出现的 HTML 3.1 版从未正式提出，取而代之的是 HTML 3.2，它加入了特定浏览器元素和属性。
  2. HTML 4.0 于 1997 年 12 月 18 日成为 W3C 推荐标准，同样加入了特定浏览器元素和属性，同时开始“清理”标准，标记一些元素和属性为过时。
  3. HTML 4.01 在 1999 年 12 月 24 日成为 W3C 推荐标准，进行了微小改进。

二、HTML5 的崛起

  1. HTML5 在 2014 年 10 月 28 日成为 W3C 推荐标准，虽然纯 HTML5 手机应用最初运行缓慢且错漏百出，但优化后效果好转，其最大优势是可以在网页上直接调试和修改。

（一）与 HTML4 的区别

  1. 在文档类型声明上，HTML4 代码长且难记，例如需要书写较为繁琐的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，而 HTML5 声明简单，仅为<!DOCTYPE html>，方便记忆。
  2. 设置页面字符编码方面，HTML5 可对<meta>元素直接追加 charset 属性指定字符编码，如<meta charset="UTF-8">，推荐使用 UTF-8，相比 HTML4 更为简洁直接。
  3. 结构语义上，HTML5 提供了新标签如header、article、footer等。例如，在一个新闻网站页面中，可以使用article标签包裹每一篇新闻内容，header标签放置页面头部信息，footer标签放置版权等底部信息，这有利于 SEO 优化，而 HTML4 主要依赖div等通用标签，语义性较差。
  4. 新增内容包括多种input类型，如date、time、email、url等，方便了用户输入特定格式的数据。内联元素如figure用于展示图片等内容，内嵌元素如audio用于嵌入音频，交互元素如details和summary可实现折叠展开效果等。
  5. 标签替代 Flash，HTML5 中的video和audio标签减少了播放 Flash 所需的代码和插件，降低了资源消耗和安全风险，提升了页面加载速度和用户体验。
  6. 废除了能用 CSS 替代的元素，如font标签等，不再使用 Frame 框架以及只有部分浏览器支持的元素，使 HTML 更加精简和规范。

三、HTML5 的新特性

  1. canvas标签可在网页上使用 JavaScript 绘制图像。开发者可以利用它创建各种复杂的图形、图表甚至游戏画面，例如绘制一个动态的数据可视化图表，通过 JavaScript 代码动态地在canvas上绘制线条、柱状图等元素，为网页增添丰富的视觉效果和交互性。
  2. video标签定义视频，具有src（指定视频源）、controls（显示播放控件）、autoplay（自动播放）等多种属性。比如在一个在线视频课程网站，可以方便地使用video标签嵌入教学视频，让用户直接在网页中观看学习。
  3. localStorage和sessionStorage用于本地存储，localStorage存储的数据没有过期时间，即使关闭浏览器再次打开仍然存在，可用于存储用户的长期偏好设置等；sessionStorage的数据在会话结束（浏览器关闭）时就会被清除，适合存储临时的表单数据等。
  4. 语义化标签如header、footer、hgroup等，便于开发者观察和 SEO。以一个企业官网为例，header可以放置公司 logo、导航菜单等头部信息，footer放置联系我们、版权声明等内容，搜索引擎能够更好地理解页面结构和内容，提高网站的搜索排名。
  5. 新表单控件包括date、time、email、url等。在用户注册页面中，email类型的input会自动验证用户输入的是否为合法的电子邮件格式，date类型会弹出日期选择器，提升了用户输入的便利性和数据的准确性。
  6. 去掉script和link标签里的type属性仍可正常工作。在 HTML5 之前，通常需要明确指定type="text/javascript"或type="text/css"，现在简化了代码书写。
  7. contenteditable属性使任何dom节点可编辑。比如在一个可编辑的富文本内容区域，可以设置某个div元素为contenteditable="true"，用户就可以直接在页面上对该区域内容进行编辑修改，像一些在线文档编辑平台就利用了这一特性。
  8. input添加了placeholder（提示文本）、required（必填项）、autofocus（自动聚焦）、pattern（自定义正则表达式验证）等属性。在登录页面中，placeholder可以提示用户输入用户名和密码，required确保用户必须填写这些信息，autofocus让光标自动聚焦到用户名输入框，提升用户体验和数据有效性。
  9. mark标签可使内容有醒目的标记。在一篇文章中，如果想要突出某些关键词或重要语句，可以使用mark标签包裹，如<mark>重要内容</mark>，在页面中会以特殊样式显示，吸引读者注意力。
  10. pageInput创建滑块，但显示不太友善。不过它在一些特定场景下仍有应用，比如在设置页面中调整音量、亮度等数值时，可以使用pageInput滑块来实现直观的数值调整。

四、HTML 的最新改动

  1. 澳大利亚公布新版 Html，无视跨浏览器兼容性，提供几个额外功能让网页使用体验更好。例如，可能增加了一些独特的布局模式或者交互效果，虽然在跨浏览器方面存在挑战，但对于特定的本地应用或者对浏览器有一定控制的场景下，可以为用户带来新颖的体验。
  2. 多语言区分 html，根据不同语言需求维护多个 html 文件，实现多语言展示分享模块信息。比如一个国际型的电商网站，针对不同国家和地区的用户，可以有对应的英文、中文、日文等不同语言版本的 html 文件，每个文件中根据语言特点设置相应的文本内容、布局调整等，确保不同语言背景的用户都能顺利浏览和使用网站。

五、HTML 的未来展望

HTML 在不断发展变革中，随着技术的不断进步和用户需求的日益多样化，未来有望继续为网页开发带来更多创新和便利。例如，可能会在响应式设计方面进一步优化，让网页在各种设备上都能有更加完美的展示效果；在与新兴技术如人工智能、虚拟现实的融合上取得突破，创造出更加智能、沉浸式的网页应用；在性能优化方面持续发力，进一步提高网页的加载速度和运行效率，为用户打造更加流畅、高效、精彩的网络世界。

相关文章：

《HTML 的变革之路：从过去到未来》

一、HTML 的发展历程 图片: HTML 从诞生至今&#xff0c;经历了多个版本的迭代。 &#xff08;一&#xff09;早期版本 HTML 3.2 在 1997 年 1 月 14 日成为 W3C 推荐标准&#xff0c;提供了表格、文字绕排和复杂数学元素显示等新特性&#xff0c;但因实现复杂且缺乏浏览器…...

编程日记 2024/12/12 17:50:32

快速了解 Aurora DSQL

上周在 AWS re:Invent大会&#xff08;类似于阿里云的云栖大会&#xff09;上推出了新的产品 Aurora DSQL[1] &#xff0c;在数据库层面提供了多区域、多点一致性写入的能力&#xff0c;兼容 PostgreSQL。并声称&#xff0c;在多语句跨区域的场景下&#xff0c;延迟只有Google …...

编程日记 2024/12/12 17:48:29

计算机视觉与医学的结合：推动医学领域研究的新机遇

目录 引言医学领域面临的发文难题计算机视觉与医学的结合&#xff1a;发展趋势计算机视觉结合医学的研究方向高区位参考文章结语 引言 计算机视觉&#xff08;Computer Vision, CV&#xff09;技术作为人工智能的重要分支&#xff0c;已经在多个领域取得了显著的应用成果&…...

编程日记 2024/12/12 17:39:21

Scala的隐式对象

Scala中&#xff0c;隐式对象&#xff08;implicit object&#xff09;是一种特殊的对象&#xff0c;它可以使得其成员&#xff08;如方法和值&#xff09;在特定的上下文中自动可用&#xff0c;而无需显式地传递它们。隐式对象通常与隐式参数和隐式转换一起使用&#xff0c;以…...

编程日记 2024/12/12 17:38:19

PageHelper自定义Count查询及其优化

PageHelper自定义Count查询及其优化 文章目录 PageHelper自定义Count查询及其优化一&#xff1a;背景1.1、解决方法 二&#xff1a;利用反射判断请求参数是否有模糊查询2.1、分页不执行count2.2、思路2.3、代码示例 三&#xff1a;自定义COUNT查询SQL(只适用于单表)3.1、局限性…...

编程日记 2024/12/12 17:37:18

【数据结构】哈夫曼树

哈夫曼树 路径长度&#xff1a;从树中一个结点到另一个结点之间的分支构成这两个节点之间的路径&#xff0c;路径上的分支数目称为路径长度 树的带权路径长度&#xff1a;树中所有叶子结点的带权路径长度之和&#xff0c;通常记为WPL ∑ k 1 n w k l k \sum^{n}_{k1}w_kl_k …...

编程日记 2024/12/12 17:35:16

springboot422甘肃旅游服务平台代码-(论文+源码)_kaic

摘 要 使用旧方法对甘肃旅游服务平台的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在甘肃旅游服务平台的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发的…...

编程日记 2024/12/12 17:34:14

docker中安装minio

1.首先需要搜索可用镜像&#xff0c;当然也可以不用 docker search minio/minio 2.拉取镜像 docker pull minio/minio 3.在本地新建两个文件夹路径 mkdir -p /opt/minio/datamkdir -p /opt/minio/config解释一下&#xff0c;data是文件存储的首路径。config是配置路径&…...

编程日记 2024/12/12 17:31:11

golang实现简单的reids服务2

golang实现redis兼容的redis服务实现redis兼容的redis服务思路 golang实现redis兼容的redis服务 之前做的redis服务是通过tcp封装的自定义协议 原版项目地址:https://github.com/dengjiayue/my-redis.git 那么能不能实现一个redis兼容的redis服务,这样一般的redis包也可以调…...

编程日记 2024/12/12 17:30:09

跟李笑来学美式俚语（Most Common American Idioms）: Part 67

Most Common American Idioms: Part 67 前言 本文是学习李笑来的Most Common American Idioms这本书的学习笔记&#xff0c;自用。 Github仓库链接&#xff1a;https://github.com/xiaolai/most-common-american-idioms 使用方法: 直接下载下来&#xff08;或者clone到本地…...

编程日记 2024/12/12 17:26:05

QT 中 QDateTime::currentDateTime() 输出格式备查

基础 QDateTime::currentDateTime() //当前的日期和时间。 QDateTime::toString() //以特定的格式输出时间&#xff0c;格式 yyyy: 年份&#xff08;4位数&#xff09; MM: 月份&#xff08;两位数&#xff0c;07表示七月&#xff09; dd: 日期&#xff08;两位数&#xff0c…...

编程日记 2024/12/12 17:22:01

安卓手机怎么轻松转换更新ip网络地址

随着移动互联网的快速发展&#xff0c;IP地址作为网络身份标识的重要性日益凸显。对于安卓手机用户来说&#xff0c;但有时候我们希望能够轻松转更换ip地址&#xff0c;以提高网络安全性或访问特定内容的需要。那么&#xff0c;安卓手机如何更换IP地址呢&#xff1f;本文将为您…...

编程日记 2024/12/12 17:18:58

spring项目添加本地依赖，报java程序包不存在

删除引入程序中的iml文件 重新在当前项目目录下构建项目...

编程日记 2024/12/12 17:16:55

嵌入式硬件-- 元器件焊接

1.锡膏的使用 锡膏要保存在冰箱里。 焊接排线端子&#xff1b;138度的低温锡&#xff08;锡膏&#xff09;&#xff0c; 第一次使用&#xff0c;直接拿东西挑一点涂在引脚上&#xff0c;不知道多少合适&#xff0c;加热台加热到260左右&#xff0c;放在上面观察锡融化&#…...

编程日记 2024/12/12 17:15:52

物联网入门-Arduino的下载与配置教程(以ESP32为例)-2024

教程介绍 本次教程主要讲述如何下载与配置Arduino&#xff0c;以及开发版对应驱动的下载安装 原文链接&#xff1a;物联网入门-Arduino的下载与配置教程(以ESP32为例)-2024 步骤概述 1&#xff1a;下载Arduino 2&#xff1a;安装Arduino 3&#xff1a;下载安装驱动 4&am…...

编程日记 2024/12/12 17:09:45

防火墙旁挂部署+故障切换

一、实验环境 华为ENSP 二、拓扑 三、目的 1、内网PC1访问Server 2、防火墙旁挂部署&#xff0c;对流量进行过滤&#xff0c;防火墙挂掉之后&#xff0c;内网PC1能继续访问到Server 3、防火墙恢复正常后&#xff0c;流量能回切至防火墙转发 四、思路&#xff1a; 1、AR1…...

编程日记 2024/12/12 17:04:39

PyTorch基本使用-张量的基本运算及函数计算

文章目录 1. 张量数值计算1. 1 张量基本运算1.2 点乘运算1.3 矩阵运算 2. 张量运算函数 1. 张量数值计算 1. 1 张量基本运算 加减乘除取负号&#xff1a; add、sub、mul、div、neg add_ 、sub_、 mul_ 、div_、 neg_ (其中带下划线的版本会修改原数据) data torch.randin…...

编程日记 2024/12/12 17:02:37

C#--方法

C#的代码包装 三种实现途径&#xff1a;方法、类和名字空间。 • 方法是包含一系列语句的代码块。 • 类用于组合类&#xff0c;方法&#xff0c;属性。 • 将多个相关类组合成名字空间。 静态方法和静态变量 • 静态成员 在类中&#xff0c;使用static修饰符声明的成员称为静态…...

编程日记 2024/12/12 16:54:25

前端权限控制

前端权限控制 一、路由权限&#xff08;控制页面访问&#xff09; vue // router.js const routes [{path: /dashboard,name: Dashboard,component: () > import(/views/Dashboard.vue),meta: { requiresAuth: true, roles: [admin, manager] }},{path: /user,name: Use…...

编程日记 2024/12/12 16:53:16

mac下载安装jdk

背景 长时间不折腾mac全部忘记 特此记录 安装 1.下载jdk 根据需要下载对应的jdk 我直接 下载到/Applicatiions目录 https://www.oracle.com/java/technologies/downloads/#java8-mac 2.解压 cd /Applicatiions tar -zxvf jdk-8u431-macosx-x64.tar.gz 3.配置环境 …...

编程日记 2024/12/12 16:52:15

wangEditor 5移动端兼容性深度解析：终极跨平台富文本编辑实战指南

wangEditor 5移动端兼容性深度解析&#xff1a;终极跨平台富文本编辑实战指南 【免费下载链接】wangEditor wangEditor —— 开源 Web 富文本编辑器 项目地址: https://gitcode.com/gh_mirrors/wa/wangEditor 在移动优先的时代&#xff0c;富文本编辑器的移动端兼容性已…...

编程新知 2026/3/29 12:54:17

如何突破硬件限制？探索SwiftShader的高性能图形渲染革命

如何突破硬件限制&#xff1f;探索SwiftShader的高性能图形渲染革命 【免费下载链接】swiftshader SwiftShader is a high-performance CPU-based implementation of the Vulkan graphics API. Its goal is to provide hardware independence for advanced 3D graphics. 项目…...

编程新知 2026/3/29 11:43:36

遥感图像小目标检测实战：手把手教你用FFCA-YOLO复现TGRS 2024论文实验（附代码与环境配置）

遥感图像小目标检测实战&#xff1a;FFCA-YOLO从环境配置到结果复现全流程解析 当面对遥感图像中那些仅占3232像素的微小目标时&#xff0c;传统检测方法往往力不从心。FFCA-YOLO作为TGRS 2024的最新研究成果&#xff0c;通过特征增强模块(FEM)、特征融合模块(FFM)和空间上下文…...

编程新知 2026/3/29 11:27:19

丹青识画系统快速上手：3步完成镜像部署与首次调用

丹青识画系统快速上手&#xff1a;3步完成镜像部署与首次调用 想试试那个能看懂图片里有什么、还能跟你聊天的AI吗&#xff1f;丹青识画系统就是这么一个有趣的工具。你可能在网上看过一些演示&#xff0c;一张图丢进去&#xff0c;AI就能告诉你图里有啥&#xff0c;甚至能回答…...

编程新知 2026/3/29 10:22:37

手把手教你用Gemini 3和MediaPipe，为你的网页添加“隔空操控”魔法（附完整代码）

从零构建手势操控3D粒子系统&#xff1a;MediaPipe与Three.js深度整合指南 当我们在科幻电影中看到主角挥挥手就能操控全息界面时&#xff0c;总会心生向往。如今&#xff0c;借助MediaPipe的手势识别能力和Three.js的3D渲染技术&#xff0c;开发者完全可以在网页中实现这种&qu…...

编程新知 2026/3/29 9:30:04

三步解决TranslucentTB开机启动故障：从现象到原理的深度解析

三步解决TranslucentTB开机启动故障&#xff1a;从现象到原理的深度解析 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB TranslucentTB作…...

编程新知 2026/3/29 9:06:00

关于【进程池阻塞 + 子进程未回收问题】

续接上文&#xff1a;进程间通信&#xff08;二&#xff09;&#xff1a;实现一个高可用的进程池-CSDN博客 目录 一、先看现象&#xff1a;两个核心问题 二、核心原因&#xff1a;文件描述符泄漏&#xff08;管道读端没关干净&#xff09; 1. 管道的核心规则回顾 2. 后果&a…...

编程新知 2026/3/29 9:04:00

如何在Python中正确调用DeepSeek-Reasoner获取思考过程（附完整代码示例）

深度解析&#xff1a;Python调用DeepSeek-Reasoner获取思维链的工程实践 当开发者需要构建具备复杂推理能力的AI应用时&#xff0c;获取模型完整的思考过程&#xff08;Reasoning Content&#xff09;往往比最终答案更有价值。DeepSeek-Reasoner作为专为逻辑推理优化的模型&…...

编程新知 2026/3/29 8:57:59

Qwen-Image-2512-Pixel-Art-LoRA 跨界创作：生成像素风音乐专辑封面与海报

Qwen-Image-2512-Pixel-Art-LoRA 跨界创作&#xff1a;生成像素风音乐专辑封面与海报 最近在玩一个挺有意思的AI工具&#xff0c;叫Qwen-Image-2512-Pixel-Art-LoRA。名字有点长&#xff0c;但功能很直接&#xff0c;就是专门生成像素艺术。我琢磨着&#xff0c;像素风这种复古…...

编程新知 2026/3/29 8:01:34

Ubuntu 22.04/20.04 RTX 3050显卡驱动安装避坑指南：从黑屏/dev/***到成功点亮

1. 为什么你的RTX 3050在Ubuntu上会黑屏&#xff1f; 刚给Ubuntu装上RTX 3050显卡&#xff0c;重启后屏幕一片漆黑&#xff0c;只显示/dev/***: clean之类的信息&#xff1f;这场景我太熟悉了——去年给工作室六台Ubuntu工作站装RTX 30系显卡时&#xff0c;每台都经历过这个&qu…...

编程新知 2026/3/29 8:01:33