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

一、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 提供了新标签如headerarticlefooter等。例如,在一个新闻网站页面中,可以使用article标签包裹每一篇新闻内容,header标签放置页面头部信息,footer标签放置版权等底部信息,这有利于 SEO 优化,而 HTML4 主要依赖div等通用标签,语义性较差。
  4. 新增内容包括多种input类型,如datetimeemailurl等,方便了用户输入特定格式的数据。内联元素如figure用于展示图片等内容,内嵌元素如audio用于嵌入音频,交互元素如detailssummary可实现折叠展开效果等。
  5. 标签替代 Flash,HTML5 中的videoaudio标签减少了播放 Flash 所需的代码和插件,降低了资源消耗和安全风险,提升了页面加载速度和用户体验。
  6. 废除了能用 CSS 替代的元素,如font标签等,不再使用 Frame 框架以及只有部分浏览器支持的元素,使 HTML 更加精简和规范。

三、HTML5 的新特性

  1. canvas标签可在网页上使用 JavaScript 绘制图像。开发者可以利用它创建各种复杂的图形、图表甚至游戏画面,例如绘制一个动态的数据可视化图表,通过 JavaScript 代码动态地在canvas上绘制线条、柱状图等元素,为网页增添丰富的视觉效果和交互性。
  2. video标签定义视频,具有src(指定视频源)、controls(显示播放控件)、autoplay(自动播放)等多种属性。比如在一个在线视频课程网站,可以方便地使用video标签嵌入教学视频,让用户直接在网页中观看学习。
  3. localStoragesessionStorage用于本地存储,localStorage存储的数据没有过期时间,即使关闭浏览器再次打开仍然存在,可用于存储用户的长期偏好设置等;sessionStorage的数据在会话结束(浏览器关闭)时就会被清除,适合存储临时的表单数据等。
  4. 语义化标签如headerfooterhgroup等,便于开发者观察和 SEO。以一个企业官网为例,header可以放置公司 logo、导航菜单等头部信息,footer放置联系我们、版权声明等内容,搜索引擎能够更好地理解页面结构和内容,提高网站的搜索排名。
  5. 新表单控件包括datetimeemailurl等。在用户注册页面中,email类型的input会自动验证用户输入的是否为合法的电子邮件格式,date类型会弹出日期选择器,提升了用户输入的便利性和数据的准确性。
  6. 去掉scriptlink标签里的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 在不断发展变革中,随着技术的不断进步和用户需求的日益多样化,未来有望继续为网页开发带来更多创新和便利。例如,可能会在响应式设计方面进一步优化,让网页在各种设备上都能有更加完美的展示效果;在与新兴技术如人工智能、虚拟现实的融合上取得突破,创造出更加智能、沉浸式的网页应用;在性能优化方面持续发力,进一步提高网页的加载速度和运行效率,为用户打造更加流畅、高效、精彩的网络世界。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/488033.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webrtc学习----前端推流拉流,局域网socket版,一对一

提示&#xff1a;局域网socket版 文章目录 [TOC](文章目录) 前言一、教程二、webrtc工作流程三、推流端四、拉流五、socket服务六、效果七、备注总结 前言 ‌‌‌‌‌WebRTC&#xff08;Web Real-Time Communication&#xff09;‌是一种实时通讯技术&#xff0c;允许网络应用或…

IMX6ULL开发板挂载 Ubuntu 的 NFS 目录,并以交叉编译得到的hello程序进行测试

首先参考博文 https://blog.csdn.net/wenhao_ir/article/details/144404637 使得IMX6ULL开发板、PC机上的USB网卡、VMware中的Ubuntu能互相Ping 通 然后开始将Ubuntu 的 NFS 目录挂载到Ubuntu中。 为什么挂载&#xff1f; 答&#xff1a;其实是把 Ubuntu中的某个目录通过NFS网…

Vscode 构建 uniapp vue3 + ts 微信小程序项目

前言 为什么要使用 Vscode 来开发构建 uniapp 项目&#xff1f;从个人角度来讲&#xff0c;仅是想要 Vscode 丰富的插件生态&#xff0c;以及最重要的优秀的 TtypeScript 类型检查支持&#xff0c;因为本人是 TS 重度使用者。 如果你更习惯使用 js 进行开发&#xff0c;使用 …

【Spark】Spark的两种核心Shuffle工作原理详解

Spark 的shuffle机制 一、Spark ShuffleManager 发展历程 Spark 1.1.0 之前 在 Spark 1.1.0 之前&#xff0c;Spark 使用 BlockStoreShuffleFetcher 来处理 Shuffle 操作。这个实现主要依赖于直接从 BlockManager 获取 Shuffle 数据&#xff0c;并通过网络进行交换。 Spark …

网上商城系统设计与实现

文末获取源码和万字论文&#xff0c;制作不易&#xff0c;感谢点赞支持。 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本网上商城系统就是在这样的大环境…

UE5制作血条和血包【扣血/回血机制】

首先到第三人称蓝图&#xff0c;创建一个变量health&#xff0c;代表血量&#xff0c;默认值改为100 接着创建一个控件蓝图 设置血条颜色和绑定百分比 绑定血条&#xff0c;因为是百分比所以除以100 然后到第三人称蓝图Begin Play后创建控件蓝图&#xff0c;添加到视口 …

LabVIEW实验站反馈控制系统

开发了一套基于LabVIEW的软X射线磁性圆二色实验站的反馈控制系统。这套系统主要用于实现对实验站高电压的精确控制&#xff0c;从而保持照射在样品上的流强稳定性&#xff0c;为分析样品吸收谱提供可靠基准&#xff0c;同时提供了易用的用户界面和强大的数据存储功能。 项目背景…

【区块链】区块链密码学基础

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 区块链密码学基础引言一、哈希函数1.1 基本概念1.2 数学表达 二、非对称加密2.1…

题海拾贝:力扣 20、有效的括号

Hello大家好&#xff01;很高兴我们又见面啦&#xff01;给生活添点passion,开始今天的编程之路&#xff01; 我的博客&#xff1a;<但凡.-CSDN博客 我的专栏&#xff1a;《编程之路》、《题海拾贝》、《数据结构与算法之美》 欢迎点赞、关注&#xff01; 1、题目 2、题解 这…

在 Ansys Mechanical 中使用“螺栓工具”插件自动生成螺栓

总结 在有限元分析 &#xff08;FEA&#xff09; 中&#xff0c;高效创建螺栓连接对于确保机械装配的结构完整性和性能至关重要。螺栓是连接组件不可或缺的一部分&#xff0c;它们在负载下的精确建模会影响整个系统。快速高效的螺栓建模使工程师能够快速优化设计&#xff0c;满…

汽车零部件设计之——发动机曲轴预应力模态分析仿真APP

汽车零部件是汽车工业的基石&#xff0c;是构成车辆的基础元素。一辆汽车通常由上万件零部件组成&#xff0c;包括发动机系统、传动系统、制动系统、电子控制系统等&#xff0c;它们共同确保了汽车的安全、可靠性及高效运行。在汽车产业快速发展的今天&#xff0c;汽车零部件需…

螺丝螺帽缺陷检测识别数据集,支持yolo,coco,voc三种格式的标记,一共3081张图片

螺丝螺帽缺陷检测识别数据集&#xff0c;支持yolo&#xff0c;coco&#xff0c;voc三种格式的标记&#xff0c;一共3081张图片 3081总图像数 数据集分割 训练组90&#xff05; 2781图片 有效集7% 220图片 测试集3% 80图片 预处理…

css矩形样式,两边圆形

废话不多说&#xff0c;代码如下&#xff0c;直接拷贝即可使用&#xff1a; index.vue文件 <template><view class"wrap"><view class"tabs"><view class"tab active"><view class"name">标签</view…

在C#中编程绘制和移动线段

这个示例允许用户绘制和移动线段。它允许您根据鼠标下方的内容执行三种不同的操作。 当鼠标位于某个线段上时&#xff0c;光标会变成手的形状。然后您可以单击并拖动来移动该线段。当鼠标位于线段的终点上时&#xff0c;光标会变成箭头。然后您可以单击并拖动以移动终点。当鼠…

MBox20网关助力汽车零部件企业实现与效率飞跃

背景概述 该企业为一家深耕汽车零部件制造的传统企业&#xff0c;拥有高效运作的自动化生产线体系&#xff0c;专注于汽车发动机零部件的生产制造。然而&#xff0c;面对市场需求的瞬息万变及消费者个性化需求的日益凸显&#xff0c;该企业正遭遇生产效率瓶颈、质量控制挑战、…

【Golang】Go语言编程思想(六):Channel,第六节,并发编程模式

并发模式 下例重新对 channel 的用法进行回顾&#xff1a; package mainimport ("fmt""math/rand""time" )func msgGen(name string) chan string {c : make(chan string)go func(name string) { // 在这个 goroutine 当中向外发送数据i : 0fo…

数造科技入选 2024 爱分析·数据要素 x 厂商全景报告两大场景

近日&#xff0c;爱分析正式发布《2024 爱分析数据要素厂商全景报告》。数造科技凭借在数据要素领域的卓越技术能力和长期深耕的行业大数据解决方案服务积淀&#xff0c;成功入选为协同制造以及区域协同治理两个细分领域的代表厂商。 一、数据要素引领新时代经济发展 在当今时…

Leecode刷题C语言之半有序排列

执行结果:通过 执行用时和内存消耗如下&#xff1a; 代码如下&#xff1a; int semiOrderedPermutation(int* nums, int numsSize) {int first 0, last 0;for (int i 0; i < numsSize; i) {if (nums[i] 1) {first i;}if (nums[i] numsSize) {last i;}}return firs…

Wend看源码-DataX

官方文档 GitHub - alibaba/DataX: DataX是阿里云DataWorks数据集成的开源版本。 简介 DataX 是由阿里巴巴开源的一款功能强大的 ETL 工具。所谓 ETL&#xff0c;具体涵盖了 Extract&#xff08;抽取&#xff09;、Transform&#xff08;转换&#xff09;以及 Load&#xff0…

Vue.js:代码架构组成与布局设置

前言&#xff1a;最近在弄一个开源的管理系统项目&#xff0c;前后端分离开发&#xff0c;这里对前端的Vue框架做一个总结&#xff0c;有遗漏和错误的地方欢迎大家指出~ &#x1f3e1;个人主页&#xff1a;謬熙&#xff0c;欢迎各位大佬到访❤️❤️❤️~ &#x1f472;个人简介…