《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.mzph.cn/diannao/63550.shtml

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

相关文章

SQL注入--堆叠注入

一.基本概念 堆叠注入概念&#xff1a;在 SQL 中&#xff0c; 分号&#xff08;;&#xff09; 是用来表示一条 sql 语句的结束。 试想一下我们在 ; 结束一个 sql语句后继续构造下一条语句&#xff0c; 会不会一起执行&#xff1f; 因此这个想法也就造就了堆叠注入。 二.堆叠注入…

【论文阅读】PRIS: Practical robust invertible network for image steganography

内容简介 论文标题&#xff1a;PRIS: Practical robust invertible network for image steganography 作者&#xff1a;Hang Yang, Yitian Xu∗, Xuhua Liu∗, Xiaodong Ma∗ 发表时间&#xff1a;2024年4月11日 Engineering Applications of Artificial Intelligence 关键…

Linux DNS域名解析服务器

DNS简介 DNS &#xff08; Domain Name System &#xff09;是互联网上的一项服务&#xff0c;它作为将域名和 IP 地址相互映射的一个分 布式数据库&#xff0c;能够使人更方便的访问互联网。 DNS 使用的是 53 端口&#xff0c; 通常 DNS 是以 UDP 这个较快速的数据传输协议…

LeetCode面试题04 检查平衡性

题目&#xff1a; 实现一个函数&#xff0c;检查二叉树是否平衡。在这个问题中&#xff0c;平衡树的定义如下&#xff1a;任意一个节点&#xff0c;其两棵子树的高度差不超过 1。 一、平衡树定义&#xff1a; 二叉树&#xff0c;一种由节点组成的树形数据结构&#xff0c;每…

Notable是一款优秀开源免费的Markdown编辑器

一、Notable简介 ‌ Notable‌是一款开源的跨平台Markdown编辑器&#xff0c;支持Linux、MacOS、Windows以及国产操作系统等多种主流操作系统。它以其高颜值和强大的功能&#xff0c;成为了许多用户的首选工具。 主要特性 实时预览‌&#xff1a; Notable提供了实时预览功能&…

安卓报错Switch Maven repository ‘maven‘....解决办法

例如&#xff1a;Switch Maven repository ‘maven(http://developer.huawei.com/repo/)’ to redirect to a secure protocol 在库链接上方添加配置代码&#xff1a;allowInsecureProtocol true

es实现上传文件查询

es实现上传文件查询 上传文件&#xff0c;获取文件内容base64&#xff0c;使用es的ingest-attachment文本抽取管道转换为文字存储 安装插件 通过命令行安装&#xff08;推荐&#xff09; 1.进入 Elasticsearch 安装目录 2.使用 elasticsearch-plugin 命令安装 bin/elastics…

采集opc ua转profinet IO项目案例

目录 1 案例说明 1 2 VFBOX网关工作原理 1 3 准备工作 2 4 配置VFBOX网关采集OPC UA的数据 2 5 用PROFINET IO协议转发数据 4 6 案例总结 6 1 案例说明 设置网关采集OPC UA设备数据把采集的数据转成profinet IO协议转发给其他系统。 2 VFBOX网关工作原理 VFBOX网关是协议转换…

linux 安装composer

下载composer curl -sS https://getcomposer.org/installer | php下载后设置环境变量&#xff0c;直接通过命令composer -v mv composer.phar /usr/local/bin/composer查看版本看是否安装成功 composer -v

可视化建模以及UML期末复习----做题篇

一、单项选择题。&#xff08;20小题&#xff0c;每小题2分,共40分&#xff09; 1、UML图不包括&#xff08; &#xff09; A、用例图 B、状态机图 C、流程图 D、类图 E、通信图 答案&#xff1a;C、流程图 UML中不包括传统意义上的流程图&#xff0c;流程图通常是指B…

VBA高级应用30例应用在Excel中的ListObject对象:向表中添加注释

《VBA高级应用30例》&#xff08;版权10178985&#xff09;&#xff0c;是我推出的第十套教程&#xff0c;教程是专门针对高级学员在学习VBA过程中提高路途上的案例展开&#xff0c;这套教程案例与理论结合&#xff0c;紧贴“实战”&#xff0c;并做“战术总结”&#xff0c;以…

Mac mini m4本地跑大模型(ollama + llama + ComfyUI + Stable Diffusion | flux)

安装chat大模型&#xff08;不推荐&#xff0c;本地运行的大模型只能聊废话&#xff0c;不如网页版使用openAI等高效&#xff09; 首先下载ollama的安装包 https://ollama.com/ 点击启动访问&#xff1a;http://localhost:11434 Ollama is running 代表已经运行起来了&#x…

借助Aspose.Cells ,在 Excel 中将文本转换为数字

在 Excel 中将文本转换为数字是一项常见要求。许多用户会遇到以文本形式存储的数字&#xff0c;这可能会导致计算错误。此问题会影响财务、数据分析和报告。将这些文本条目转换为实际数字对于准确的数据处理至关重要。在这篇博文中&#xff0c;我们将探讨如何使用 C# 将以文本形…

2024 年 11 月区块链游戏研报:牛市加持下的 GameFi 破局之路

2024 年 11 月区块链游戏研报 作者&#xff1a;Stella L (stellafootprint.network) 数据来源&#xff1a;Footprint Analytics 区块链游戏 Research 页面 2024 年 11 月 Web3 游戏行业市场增长显著但大规模采用策略仍在演进。随着比特币创下历史新高并接近 10 万美元里程碑…

QT 多级嵌套结构体,遍历成员--半自动。<模板+宏定义>QTreeWidget树结构显示

Qt的QTreeWidget来显示嵌套结构体的成员&#xff0c;并以树形结构展示。 #include <QApplication> #include <QTreeWidget> #include <QTreeWidgetItem> #include <QString> #include <cstdint>// 假设这些是你的结构体定义 struct BaseMeterPa…

【JAVA高级篇教学】第一篇:Springboot对接通义千问大模型

博主今天打算讲解下Java如何对接阿里云的通义千问大模型&#xff0c;可以自己玩玩ai问答之类的&#xff01; 目录 一、发展历程 二、API-KEY的获取与配置 三、引用SDK 四、文本模型 1.代码 2.返回数据 3.官方代码案例 五、通义千问VL 1.计量计费 六、查看API-KEY调用额…

快捷构建AI大模型,源码自取可直接运行

Node.js 和 WebSocket 实现一个基于kimi&#xff08;Moonshot 月之暗大模型&#xff09;的AI工具 前端&#xff1a;前端界面比较容易&#xff0c;只需要简单的额css js即可&#xff0c;本文使用vue作为作为demo。 后端&#xff1a;我java很垃圾&#xff0c;写不出好的代码&am…

R语言 | 峰峦图 / 山脊图

目的&#xff1a;为展示不同数据分布的差异。 1. ggplot2 实现 # 准备数据 datmtcars[, c("mpg", "cyl")] colnames(dat)c("value", "type") head(dat) # value type #Mazda RX4 21.0 6 #Mazda RX4 Wag …

Redis性能优化18招

Redis性能优化的18招 目录 前言选择合适的数据结构避免使用过大的key和value[使用Redis Pipeline](#使用Redis Pipeline)控制连接数量合理使用过期策略使用Redis集群充分利用内存优化使用Lua脚本监控与调优避免热点key使用压缩使用Geo位置功能控制数据的持久化尽量减少事务使…

学习笔记063——通过使用 aspose-words 将 Word 转 PDF 时,遇到的字体改变以及乱码问题

文章目录 1、问题描述&#xff1a;2、解决方法&#xff1a; 1、问题描述&#xff1a; Java项目中&#xff0c;有个需要将word转pdf的需求。本人通过使用aspose-words来转换的。在Windows中&#xff0c;转换是完全正常的。但是当部署到服务器时&#xff0c;会出现转换生成的pdf…