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

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

news 2025/7/13 15:54:43

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

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2025/7/1 10:09:55

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

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

编程新知 2025/7/13 6:14:49

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/7/12 13:01:09

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/7/12 11:01:43

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/7/11 17:41:53

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/6/16 8:33:33

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/7/12 17:51:32

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/7/12 4:41:38

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/6/22 19:33:11

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2025/7/5 12:24:36