《HTML 的变革之路:从过去到未来》
一、HTML 的发展历程
图片:
HTML 从诞生至今,经历了多个版本的迭代。
(一)早期版本
- HTML 3.2 在 1997 年 1 月 14 日成为 W3C 推荐标准,提供了表格、文字绕排和复杂数学元素显示等新特性,但因实现复杂且缺乏浏览器支持,开发中止。之后出现的 HTML 3.1 版从未正式提出,取而代之的是 HTML 3.2,它加入了特定浏览器元素和属性。
- HTML 4.0 于 1997 年 12 月 18 日成为 W3C 推荐标准,同样加入了特定浏览器元素和属性,同时开始“清理”标准,标记一些元素和属性为过时。
- HTML 4.01 在 1999 年 12 月 24 日成为 W3C 推荐标准,进行了微小改进。
二、HTML5 的崛起
- HTML5 在 2014 年 10 月 28 日成为 W3C 推荐标准,虽然纯 HTML5 手机应用最初运行缓慢且错漏百出,但优化后效果好转,其最大优势是可以在网页上直接调试和修改。
(一)与 HTML4 的区别
- 在文档类型声明上,HTML4 代码长且难记,例如需要书写较为繁琐的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
,而 HTML5 声明简单,仅为<!DOCTYPE html>
,方便记忆。 - 设置页面字符编码方面,HTML5 可对
<meta>
元素直接追加 charset 属性指定字符编码,如<meta charset="UTF-8">
,推荐使用 UTF-8,相比 HTML4 更为简洁直接。 - 结构语义上,HTML5 提供了新标签如
header
、article
、footer
等。例如,在一个新闻网站页面中,可以使用article
标签包裹每一篇新闻内容,header
标签放置页面头部信息,footer
标签放置版权等底部信息,这有利于 SEO 优化,而 HTML4 主要依赖div
等通用标签,语义性较差。 - 新增内容包括多种
input
类型,如date
、time
、email
、url
等,方便了用户输入特定格式的数据。内联元素如figure
用于展示图片等内容,内嵌元素如audio
用于嵌入音频,交互元素如details
和summary
可实现折叠展开效果等。 - 标签替代 Flash,HTML5 中的
video
和audio
标签减少了播放 Flash 所需的代码和插件,降低了资源消耗和安全风险,提升了页面加载速度和用户体验。 - 废除了能用 CSS 替代的元素,如
font
标签等,不再使用 Frame 框架以及只有部分浏览器支持的元素,使 HTML 更加精简和规范。
三、HTML5 的新特性
canvas
标签可在网页上使用 JavaScript 绘制图像。开发者可以利用它创建各种复杂的图形、图表甚至游戏画面,例如绘制一个动态的数据可视化图表,通过 JavaScript 代码动态地在canvas
上绘制线条、柱状图等元素,为网页增添丰富的视觉效果和交互性。video
标签定义视频,具有src
(指定视频源)、controls
(显示播放控件)、autoplay
(自动播放)等多种属性。比如在一个在线视频课程网站,可以方便地使用video
标签嵌入教学视频,让用户直接在网页中观看学习。localStorage
和sessionStorage
用于本地存储,localStorage
存储的数据没有过期时间,即使关闭浏览器再次打开仍然存在,可用于存储用户的长期偏好设置等;sessionStorage
的数据在会话结束(浏览器关闭)时就会被清除,适合存储临时的表单数据等。- 语义化标签如
header
、footer
、hgroup
等,便于开发者观察和 SEO。以一个企业官网为例,header
可以放置公司 logo、导航菜单等头部信息,footer
放置联系我们、版权声明等内容,搜索引擎能够更好地理解页面结构和内容,提高网站的搜索排名。 - 新表单控件包括
date
、time
、email
、url
等。在用户注册页面中,email
类型的input
会自动验证用户输入的是否为合法的电子邮件格式,date
类型会弹出日期选择器,提升了用户输入的便利性和数据的准确性。 - 去掉
script
和link
标签里的type
属性仍可正常工作。在 HTML5 之前,通常需要明确指定type="text/javascript"
或type="text/css"
,现在简化了代码书写。 contenteditable
属性使任何dom
节点可编辑。比如在一个可编辑的富文本内容区域,可以设置某个div
元素为contenteditable="true"
,用户就可以直接在页面上对该区域内容进行编辑修改,像一些在线文档编辑平台就利用了这一特性。input
添加了placeholder
(提示文本)、required
(必填项)、autofocus
(自动聚焦)、pattern
(自定义正则表达式验证)等属性。在登录页面中,placeholder
可以提示用户输入用户名和密码,required
确保用户必须填写这些信息,autofocus
让光标自动聚焦到用户名输入框,提升用户体验和数据有效性。mark
标签可使内容有醒目的标记。在一篇文章中,如果想要突出某些关键词或重要语句,可以使用mark
标签包裹,如<mark>重要内容</mark>
,在页面中会以特殊样式显示,吸引读者注意力。pageInput
创建滑块,但显示不太友善。不过它在一些特定场景下仍有应用,比如在设置页面中调整音量、亮度等数值时,可以使用pageInput
滑块来实现直观的数值调整。
四、HTML 的最新改动
- 澳大利亚公布新版 Html,无视跨浏览器兼容性,提供几个额外功能让网页使用体验更好。例如,可能增加了一些独特的布局模式或者交互效果,虽然在跨浏览器方面存在挑战,但对于特定的本地应用或者对浏览器有一定控制的场景下,可以为用户带来新颖的体验。
- 多语言区分 html,根据不同语言需求维护多个 html 文件,实现多语言展示分享模块信息。比如一个国际型的电商网站,针对不同国家和地区的用户,可以有对应的英文、中文、日文等不同语言版本的 html 文件,每个文件中根据语言特点设置相应的文本内容、布局调整等,确保不同语言背景的用户都能顺利浏览和使用网站。
五、HTML 的未来展望
HTML 在不断发展变革中,随着技术的不断进步和用户需求的日益多样化,未来有望继续为网页开发带来更多创新和便利。例如,可能会在响应式设计方面进一步优化,让网页在各种设备上都能有更加完美的展示效果;在与新兴技术如人工智能、虚拟现实的融合上取得突破,创造出更加智能、沉浸式的网页应用;在性能优化方面持续发力,进一步提高网页的加载速度和运行效率,为用户打造更加流畅、高效、精彩的网络世界。
相关文章:
《HTML 的变革之路:从过去到未来》
一、HTML 的发展历程 图片: HTML 从诞生至今,经历了多个版本的迭代。 (一)早期版本 HTML 3.2 在 1997 年 1 月 14 日成为 W3C 推荐标准,提供了表格、文字绕排和复杂数学元素显示等新特性,但因实现复杂且缺乏浏览器…...
给我的小程序加了个丝滑的搜索功能,踩坑表情包长度问题
前言 最近在用自己的卡盒小程序的时候,发现卡片越来越多,有时候要找到某一张来看看笔记要找半天,于是自己做了一个搜索功能,先看效果: 怎么样,是不是还挺不错的,那么这篇文章就讲讲这样一个搜索…...
高阶数据结构--B树B+树实现原理B树模拟实现--Java
目录 一、B-树概念 二、B-树插入分析 1.用序列{53, 139, 75, 49, 145, 36, 101}构建B树的过程如下: 2.插入过程总结 三、B树插入实现 四、B树 1.B树概念 2.B树的特性 五、B树应用 1.索引 2.Mysql索引 3.InnoDB 一、B-树概念 1970 年, R.Bayer 和…...
CTF: 在本地虚拟机内部署CTF题目docker
step 1 安装基本依赖 sudo apt-get update sudo apt-get install -y \ca-certificates \curl \gnupg \lsb-releasestep 2 安装docker sudo apt-get remove docker docker.io containerd runc sudo apt-get update sudo apt-get install \apt-transport-https \ca-certificate…...
深度学习详解
深度学习(Deep Learning,DL)是机器学习(Machine Learning,ML)中的一个子领域,利用多层次(深层)神经网络来自动从数据中提取特征和规律,模仿人脑的神经系统来进…...
qt QCommandLineParser详解
1、概述 QCommandLineParser是Qt框架中提供的一个类,专门用于解析命令行参数。它简化了命令行参数的处理过程,使得开发者能够轻松定义、解析和验证命令行选项和参数。QCommandLineParser适用于需要从命令行获取输入的控制台应用程序,以及需要…...
支撑40多个委办局150余个应用场景,AI数字笔迹在多个领域助力数字重庆建设
12月6日,以“聚焦创新应用,AI引领赋能”为主题的2024 AI数字笔迹创新应用发展论坛在重庆两江新区举办。本届论坛由重庆市大数据应用发展管理局和重庆两江新区管理委员会联合指导,重庆亲笔签数字科技有限公司主办。现场来自政府部门、高等院校…...
MySQL 表字段太多超长问题及解决方案
哈喽,各位小伙伴们,你们好呀,我是。运营社区:C站/掘金/腾讯云/阿里云/华为云/51CTO;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点,并以文字的形式跟大家一起交流,互相学…...
LLM大语言模型私有化部署-OpenEuler22.03SP3上容器化部署Ollama与OpenWebUI
背景 你是不是也有私有化部署大模型的需求?如今有了 Ollama , HuggingFace , ModelScope 等开源平台,我们可以非常方便地搭建一个属于自己的大模型,如果网速给力,真是分分钟~~。简单起见,这篇文…...
【数据结构】哈夫曼树
哈夫曼树 路径长度:从树中一个结点到另一个结点之间的分支构成这两个节点之间的路径,路径上的分支数目称为路径长度 树的带权路径长度:树中所有叶子结点的带权路径长度之和,通常记为WPL ∑ k 1 n w k l k \sum^{n}_{k1}w_kl_k …...
网络安全法-网络运行安全
第三章 网络运行安全 第一节 一般规定 第二十一条 国家实行网络安全等级保护制度。网络运营者应当按照网络安全等级保护制度的要求,履行下列安全保护义务,保障网络免受干扰、破坏或者未经授权的访问,防止网络数据泄露或者被窃取、篡改&…...
188-下翻便携式6U CPCI工控机箱
一、板卡概述 下翻式CPCI便携工控机,系统采用6u cpci背板结构,1个系统槽,7个扩展槽, 满足对携带的需求,可装标准6U8槽CPCI主板,8个扩展槽, 满足客户对空间扩展的需求.可宽温服务的工作产品,15高亮度液晶显示屏,超薄88键笔记本键盘,触摸式鼠标,加固型机箱结构,使它能够适应各种复…...
【0362】Postgres内核 XLogReaderState readBuf 有完整 XLOG page header 信息 ? ( 7 )
上一篇: 【0361】Postgres内核 page_read 读取所请求数据长度(至少 short page header)( 6 ) 文章目录 1. 检查 page_read 返回值 readLen2. 根据 readBuf 计算 XLogPageHeader 大小2.1 验证 XLOG Page header2.2 更新 XLogReaderState 读取状态信息1. 检查 page_read 返回…...
调度系统:Luigi 的主要特性和功能
Luigi 是一个开源的 Python 工作流管理工具,用于构建批处理作业管道,特别适用于数据工程领域。它被设计用来编排任务和处理任务间的依赖关系,支持自动化复杂的 ETL 流程、数据分析、模型训练等任务。 Luigi 的主要特性和功能: 任…...
GO泛型
泛型是goSDK1.18版本之后才引入的新特性,即C中的模板。 为什么要有泛型? 我们现在要写一个两数相加的函数,相加的逻辑很简单,但是如果传入不同的类型,那么我们就需要再写一个函数,定义不同的参数类型&#…...
【笔记】C语言转C++
网课链接:【C语言 转 C 简单教程】 https://www.bilibili.com/video/BV1UE411j7Ti/?p27&share_sourcecopy_web&vd_source4abe1433c2a7ef632aeed6a3d5c0b22a 网课老师B站id:别喷我id 视频总时长:01:55:27 以下笔记是我通过此网课整理 建议先…...
Python 单例模式工厂模式和classmethod装饰器
前言: Python作为面向对象的语言,显然支持基本的设计模式。也具备面向对象的语言的基本封装方法:属性、方法、继承、多态等。但是,做为强大的和逐渐发展的语言,python也有很多高级的变种方法,以适应更多的…...
源码编译构建LAMP
源码编译构建LAMP 文章目录 源码编译构建LAMPLAMPDISCUZ论坛 1.安装编译工具等2.apache3.mysql4.php5.部署论坛网站6.其他6.其他 LAMPDISCUZ论坛 1.安装编译工具等 安装说明: 配置yum源 从阿里云下载新的配置文件 curl -o /etc/yum.repos.d/CentOS-Base.repo htt…...
如何让verilog支持二维数组,三维数组作为I/O ports
写在前面 先看看verilog中的一维数组,二维数组,三维数组长啥样? wire [31:0]data1;//一维数组 wire [31:0]data2 [0:15];//二维数组 wire [31:0]data3 [0:15][0:15];//三维数组众所周知,verilog只支持一维数组作为I/O ports&…...
字符编码讲解(C#)
在学习和编码的过程中,极容易遇到如下概念,他们有些是字符编码,有些是涉及的相关概念,接下来我将围绕下面的熟悉又陌生的概念做详细解释,并且梳理其之间的关系 UTF8, Unicode ,ASCII࿰…...
Unreal Engine 中的UI界面开发
推荐的使用方式 轻量级 HUD:使用 Canvas 绘制简单的文本、调试信息或基础 UI(如准星、血量条等)。 复杂 UI:使用 UMG(Unreal Motion Graphics)和 Slate 进行布局和交互,避免手动管理 Canvas 绘制…...
聚类及Python下实现 K-means 算法
聚类 聚类是无监督学习中的一种重要方法,旨在将数据集中相似的数据对象划分到同一个簇中,使得不同簇之间的数据对象差异尽可能大。在大数据环境下,聚类可以帮助挖掘数据中的隐藏结构和模式,应用场景十分广泛,比如在客…...
【中间件开发】Redis基础命令详解及概念介绍
文章目录 前言一、Redis相关命令详解及原理1.1 string、set、zset、list、hash1.1.1 string1.1.2 list1.1.3 hash1.1.4 set1.1.5 zset 1.2 分布式锁的实现1.3 lua脚本解决ACID原子性1.4 Redis事务的ACID性质分析 二、Redis协议与异步方式2.1 Redis协议解析2.1.1 redis pipeline…...
分布式文件存储 - - - MinIO从入门到飞翔
MinIO从入门到飞翔 文章目录 MinIO从入门到飞翔 0、前言1、分布式文件系统2、MinIO 介绍3、 MinIO安装(docker)4、基本概念5、通过代码上传文件到MinIO6、封装MinIO为starter7、在其他项目中集成封装好的模块 0、前言 对象存储是一种数据存储架构&a…...
Cadence学习笔记 1 原理图库绘制
基于Cadence 17.4,四层板4路HDMI电路 目录 一、原理图绘制及封装制作 1、原理图库绘制简介 一、原理图绘制及封装制作 1、原理图库绘制简介 File--Change Product,选择OrCAD Capture CIS。绘制原理图和原理图库都是用CIS完成 更改界面颜色:…...
Unity 制作一个视频播放器(打包后,可在外部编辑并放置新的视频)
效果展示: 在这里,我把视频名称(Json)和对应的视频资源都放在了StreamingAssets文件夹下,以便于打包后,客户还可以自己在外部增加、删除、修改对应的视频资料。 如有需要,请联细抠抠。...
python爬虫--小白篇【爬虫实践】
一、前言 1.1、王者荣耀皮肤爬虫 根据王者荣耀链接,将王者荣耀的全部英雄的全部皮肤图片爬取保存到本地。经过分析得到任务的三个步骤: 根据首页全部英雄列表连接获取全部英雄的名称hero_name以及对应的hero_id;根据单个英雄的hero_name和h…...
CountDownLatch阻塞后countDown未执行会如何?
背景 某项目封装了 Kafka 消费者 API,根据传递的消费者线程数,创建 N 个消费者线程同时消费对应 topic 的数据,并在线程启动后收集到全局列表中,方便在程序调用 stop 流程时逐个停止。 主控类在创建 Kafka 消费线程时使用了 Cou…...
《MySQL 查询进阶:复杂查询语句的魅力》
一、引言 MySQL 的复杂查询语句就像是一把神奇的钥匙,能够打开数据世界的大门,展现出数据的无限魅力。本文将带你深入探索 MySQL 查询进阶技巧,从常用查询到子查询,再到视图的运用,让你领略复杂查询语句的强大功能。 …...
Vue解决跨域问题
要解决 Vue 项目的跨域问题并通过 vue.config.js 配置代理,可以按照以下步骤修改 vue.config.js 文件。你提供的代码大部分已经正确,只需要做一些格式上的调整。以下是正确的 vue.config.js 配置: // vue.config.jsmodule.exports {devServ…...
大语言模型(LLM)与智能机器人的应用分析
系列文章目录 前言 近年来,大型语言模型(LLM)的集成彻底改变了机器人领域,使机器人能够以人类熟练程度进行交流、理解和推理。本文探讨了 LLM 对机器人的多方面影响,并针对在不同领域利用这些模型的关键挑战和机遇进行了研究。通过将 LLM 应用程序分类并分析核心机器人元素…...
String【Redis对象篇】
🏆 作者简介:席万里 ⚡ 个人网站:https://dahua.bloggo.chat/ ✍️ 一名后端开发小趴菜,同时略懂Vue与React前端技术,也了解一点微信小程序开发。 🍻 对计算机充满兴趣,愿意并且希望学习更多的技…...
Elasticsearch高性能实践
前言 本方案主要从运维层面分析es是实际生产使用过程中的参数优化,深入理解es各个名词及含义,深入分析es的使用过程中应注意的点,详细解释参数设置的原因以及目的,主要包括系统层面,参数层面。除此之外,优…...
Maven 安装配置(详细教程)
文章目录 一、Maven 简介二、下载 Maven三、配置 Maven3.1 配置环境变量3.2 Maven 配置3.3 IDEA 配置 四、结语 一、Maven 简介 Maven 是一个基于项目对象模型(POM)的项目管理和自动化构建工具。它主要服务于 Java 平台,但也支持其他编程语言…...
sql server 创建索引实验
创建一个非主键索引,大小30G,数据文件增加了30G,日志文件增长了50G,4分钟完成, (日志文件增加设置为2048MB 或者 256MB 执行时间都是4分钟,没有多大的时间差异) 实验环境: 主机cpu…...
解决Vue项目中npm install卡住问题的详细指南
解决Vue项目中npm install卡住问题的详细指南 引言 在开发Vue项目时,我们经常会遇到npm install命令卡住的问题,特别是在构建依赖树时。本文将分享一些实用的解决方案,帮助您快速解决这一常见问题。 问题描述 在执行npm install时…...
手机实时提取SIM卡打电话的信令声音--社会价值(一、方案解决了什么问题)
手机实时提取SIM卡打电话的信令声音 --社会价值(一、方案解决了什么问题) 一、前言 这段时间,我们在技术范围之外陷入了一个自证或者说下定义的怪圈,即要怎么样去介绍或者描述:我们是一个什么样的产品。它在当前这个世界上,处于…...
35.1 thanos项目介绍和二进制部署
本节重点介绍 : 核心优点 无需维护存储,存储高可用: 利用廉价的公有云对象存储,高可用长时间存储,数据降采样:利用Compactor降采样完全适配原生prometheus查询接口:Query实现多级数据缓存配置 二进制部署 …...
【中工开发者】鸿蒙商城实战项目(启动页和引导页)
创建一个空项目 先创建一个新的项目选择第一个,然后点击finish 接下来为项目写一个名字,然后点击finish。 把index页面的代码改成下面代码块的代码,就能产生下面的效果 Entry Component struct Index {build() {Column(){Blank()Column(){…...
云计算IaaS-PaaS-SaaS三种服务模式转至元数据结尾
在当今数字化时代,云计算已经成为推动企业创新与发展的核心力量。而云计算的模型主要有三种:IAAS、PAAS 和 SAAS,它们各自在云计算的庞大体系中扮演着独特且关键的角色,恰似一座大厦的不同楼层,共同构建起强大而灵活的…...
Python爬虫:如何优雅地“偷窥”商品详情
在这个信息爆炸的时代,获取商品详情已经不再是简单的点击和浏览。我们需要的是速度、效率,还有一点点的...偷偷摸摸。没错,今天我们要聊的是如何使用Python爬虫来“偷窥”商品详情。别担心,我们保证一切都是合法合规的,…...
自动化测试报错:Exception managing chrome: error decoding response body
报错:Exception managing chrome: error decoding response body 报错解释: 这个错误通常发生在使用Selenium WebDriver时,尝试管理(例如关闭)Chrome浏览器时出现了问题。具体来说,是在解码Chrome浏览器响…...
Dataset 与 JavaRDD
是的,Dataset 底层确实是基于 RDD 实现的,但它是通过更高层次的抽象和优化来提供更强大和易用的功能。以下是关于 Dataset 底层实现的一些详细信息: 1. RDD 是基础 RDD(弹性分布式数据集) 是 Spark 最基础的抽象&…...
【后端面试总结】Golang defer的实现原理和常见面试问题
前言 在Go语言中,defer关键字用于延迟函数的执行,即在包含defer语句的函数返回之前执行。这一特性使得defer在资源释放、文件关闭、解锁资源等场景中非常有用。本文将深入探讨defer的实现原理,并总结一些常见的面试问题。 基本使用 defer通…...
http 502 和 504 的区别
首先看一下概念: 502:作为网关或者代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应。503:由于临时的服务器维护或者过载,服务器当前无法处理请求。这个状况是临时的,并且将在一段时间以后恢…...
农业园区气象站
农业园区气象站是一种专为农业生产和科研设计的气象监测设备,它集成了多种传感器和技术,用于实时、准确地监测和记录农业园区内的气象数据。以下是农业园区气象站的主要功能和用处: 一、主要功能 实时监测:农业园区气象站能够实时…...
机器学习学习笔记-20241211
文章目录 空间归纳偏置局部性(Locality)平移不变性(Translation Invariance)空间关系(Spatial Relationships)尺度不变性(Scale Invariance)上下文依赖(Context Dependen…...
【在Linux世界中追寻伟大的One Piece】HTTP Session
目录 1 -> 引入HTTP Session 1.1 -> 定义 1.2 -> 工作原理 1.3 -> 安全性 1.4 -> 超时和失效 1.5 -> 用途 2 -> 模拟session行为 3 -> 实验测试session 1 -> 引入HTTP Session 1.1 -> 定义 HTTP Session是服务器用来跟踪用户与服务器交…...
人工智能|自然语言处理——机器翻译评价指标Bleu和Rouge
在机器翻译任务中,BLEU 和 ROUGE 是两个常用的评价指标,BLEU 根据精确率(Precision)衡量翻译的质量,而 ROUGE 根据召回率(Recall)衡量翻译的质量 BLEU(Bilingual Evaluation Understudy): BLEU是一种用于评…...
【前端】JavaScript中的函数形式参数:预解析与作用域详解
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 💯前言💯示例代码💯1. 形式参数的预解析模拟预解析后的代码 💯2. 函数作用域与子函数的关系代码详解 💯3. 扩展:块作用域与变量提…...