《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 在不断发展变革中,随着技术的不断进步和用户需求的日益多样化,未来有望继续为网页开发带来更多创新和便利。例如,可能会在响应式设计方面进一步优化,让网页在各种设备上都能有更加完美的展示效果;在与新兴技术如人工智能、虚拟现实的融合上取得突破,创造出更加智能、沉浸式的网页应用;在性能优化方面持续发力,进一步提高网页的加载速度和运行效率,为用户打造更加流畅、高效、精彩的网络世界。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

机器视觉与OpenCV--01篇

计算机眼中的图像 像素 像素是图像的基本单位&#xff0c;每个像素存储着图像的颜色、亮度或者其他特征&#xff0c;一张图片就是由若干个像素组成的。 RGB 在计算机中&#xff0c;RGB三种颜色被称为RGB三通道&#xff0c;且每个通道的取值都是0到255之间。 计算机中图像的…

网络安全创新实验

一、网络拓扑设计 二、网络主机概况 本实验一共包含4台虚拟机&#xff0c;分别为攻击机attacker&#xff0c;网关gateway&#xff0c;内网普通用户主机pc&#xff0c;内网服务器server&#xff0c;四台主机的详细信息如下表所示&#xff1a; 名称操作系统IP地址网络模式作用攻…

y3编辑器教学5:触发器2 案例演示

文章目录 一、探索1.1 ECA1.1.1 ECA的定义1.1.2 使用触发器实现瞬间移动效果 1.2 变量1.2.1 什么是变量1.2.2 使用变量存储碎片收集数量并展现 1.3 if语句&#xff08;魔法效果挂接&#xff09;1.3.1 地形设置1.3.2 编写能量灌注逻辑1.3.3 编写能量灌注后&#xff0c;实现传送逻…

016 在路由器上配置 DHCP

配置路由器端口IP地址 将路由器的端口地址配置好&#xff0c; 左边的网络地址是 192.168.1.0 右边的网络地址是 192.168.2.0 配置路由器的DHCP服务 打开命令窗口&#xff0c;进入特权模式 进入全局配置 conf t创建一个DHCP地址池&#xff1b; po1 是地址池的名称&#xf…

恋爱脑学Rust之并行之旅:Rayon介绍和使用

文章目录 一、开启爱情的依赖之旅&#xff08;安装 Rayon&#xff09;二、甜蜜瞬间的并行享受&#xff08;基本数据并行操作&#xff09;&#xff08;一&#xff09;共享美好时光&#xff08;par_iter 方法&#xff09;&#xff08;二&#xff09;分块珍藏回忆&#xff08;par_…

【数据库系列】PostgreSQL 数据库连接

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

中介者模式的理解和实践

一、中介者模式概述 中介者模式&#xff08;Mediator Pattern&#xff09;&#xff0c;也称为调解者模式或调停者模式&#xff0c;是一种行为设计模式。它的核心思想是通过引入一个中介者对象来封装一系列对象之间的交互&#xff0c;使得这些对象不必直接相互作用&#xff0c;从…

吸烟抽烟行为识别数据集-超高识别率,支持YOLO,COCO,VOC格式的标注,10162张各种姿势场景下的吸烟图片

吸烟抽烟行为识别数据集-超高识别率&#xff0c;支持YOLO&#xff0c;COCO,VOC格式的标注&#xff0c;10162张各种姿势场景下的吸烟图片 数据集分割 训练组91&#xff05; 9279图片 有效集5&#xff05; 507图片 测试集4% 376图片 预处理 自动定…

【开源】基于SpringBoot框架的房屋租赁系统 (计算机毕业设计)+万字毕业论文 T020

系统合集跳转 源码获取链接 一、系统环境 运行环境: 最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 IDE环境&#xff1a; Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以 tomcat环境&#xff1a; Tomcat 7.x,8.x,9.x版本均可 操作系统…

C++20 标准概念

1. 所有标准概念的概述 “类型和对象基本概念”表列出了类型和对象的基本概念。 “范围、迭代器和算法概念”表列出了范围、视图、迭代器和算法的概念。 “辅助概念”表列出的概念主要用作其他概念的构建块&#xff0c;通常不会让应用程序开发者直接使用。 头文件和命名空间 …

git的卸载与安装

目录 一、Git的卸载 二、Git的安装 2.1.1 官网下载 2.1.2 镜像下载 ​编辑 2.2 安装 2.3 检验否安装成功 三、Git使用配置 一、Git的卸载 1.找到程序&#xff0c;卸载程序 2.找到Git&#xff0c;右键卸载 卸载完成&#xff01; 二、Git的安装 2.1.1 官网下载 网址&…

科技赋能电影,互动电影开启电影新格局

近年来&#xff0c;科技赋能电影&#xff0c;让电影越来越精彩&#xff0c;也越来越多元。层出不穷的新技术新类型&#xff0c;不断丰富着电影视听语言的表现形式&#xff0c;也为观众带来更多具有交互性和个性化的观影体验。进昂互动科技在推出全球首部院线互动电影《夜班》之…

python 下载 b站视频 和音频

video_bvid&#xff1a; import os import requests import json import re from bs4 import BeautifulSoup import subprocess # from detail_video import video_bvid# video_bvid 是一个从外部得到的单个视频ID video_bvid BV1cx421Q7veclass BilibiliVideoAudio:def __in…

操作系统:虚拟存储系统

目录 1、外存资源管理 外存空间划分 进程与外存对应关系 2、虚拟页式存储系统 3、 淘汰算法&#xff08;重点&#xff09;P217 最佳淘汰算法&#xff08;OPT&#xff09; 先进先出(FIFO) 最近最少使用算法&#xff08;LRU&#xff09; 最近不用的先淘汰(LNU) 最不经常…

Linux24.04 安装企业微信

今天工作需要把windows系统换成了linux&#xff0c;但是公司的沟通工具是企业微信。去企业微信官网看了&#xff0c;没有linux版本&#xff0c;只能想办法解决了&#xff0c;不然再换回去就太坑了。 方案 1、使用docker容器&#xff0c;2、使用deepin-wine 本人对docker不太熟…

手机实时提取SIM卡打电话的信令声音--社会价值(一、方案解决了什么问题)

手机实时提取SIM卡打电话的信令声音 --社会价值(一、方案解决了什么问题) 一、前言 这段时间&#xff0c;我们在技术范围之外陷入了一个自证或者说下定义的怪圈&#xff0c;即要怎么样去介绍或者描述&#xff1a;我们是一个什么样的产品。它在当前这个世界上&#xff0c;处于…

UnityShaderLab 实现黑白着色器效果

实现思路&#xff1a;取屏幕像素的RGB值&#xff0c;将三个通道的值相加&#xff0c;除以一个大于值使颜色值在0-1内&#xff0c;再乘上一个强度值调节黑白强度。 在URP中实现需要开启Opaque Texture ShaderGraph实现&#xff1a; ShaderLab实现&#xff1a; Shader "Bl…

Burp suite2 (泷羽sec)

声明 学习视频来自B站UP主 泷羽sec,如涉及侵泷羽sec权马上删除文章。 笔记只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 这节课旨在扩大自己在网络安全方面的知识面&#xff0c;了解网络安全领域的见闻&#xff0c;了…

Devops-蓝鲸篇-01-蓝鲸智云简介

官方社区 蓝鲸智云学习社区&#xff1a;https://bk.tencent.com/s-mart/communities 蓝鲸简介 腾讯蓝鲸智云&#xff0c;简称蓝鲸&#xff0c;是腾讯互动娱乐事业群&#xff08;Interactive Entertainment Group&#xff0c;简称 IEG&#xff09;基于海量异构业务自研的一套…

9. 高效利用Excel设置归档Tag

高效利用Excel设置归档Tag 1. Excle批量新建/修改归档Tag2. 趋势记录模型批量导入归档Tag(Method1)2. 趋势记录模型批量导入归档Tag(Method2)3. 趋势记录控件1. Excle批量新建/修改归档Tag Fcatory Talk常常需要归档模拟量,对于比较大的项目工程会有成千上万个重要数据需…