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

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

news 2025/12/17 8:53:04

一、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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/12/15 19:31:01

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/12/16 10:12:39

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/12/12 17:03:26

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/10/17 21:16:57

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2025/12/9 6:32:26

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/12/15 5:25:28