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

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

news 2025/9/15 0:51:47

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/9/14 9:18:09

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/9/7 8:52:40

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2025/9/9 10:11:58

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/9/8 21:10:29

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/8/3 5:51:09

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2025/9/7 3:22:38

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/9/6 5:46:56

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2025/9/8 20:54:35

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/9/2 17:48:53