HTML5是目前的互联网的基石。这听起来很简单,但事实并非如此。至少不是真的。你看,互联网现在比以前酷多了。为了实现这些更酷的功能,必须改进 HTML。在本教程中,我们将讨论 HTML 和 HTML5 之间的区别。但首先,我们先来介绍HTML是什么开始的。
目录
什么是HTML?看到
第一部分会告诉您“什么是HTML?”,并告诉您HTML和 HTML5 之间的区别是破译首字母缩略词。HTML代表超文本标记语言。但是除非你在互联网上制作很酷的东西有一段时间了,否则这可能没有帮助,不是吗?
最新优惠现在有效:
SAVE 50%
DataCamp End of Year Sale
Unlock a year of unlimited data and AI learning at half the price! This is your final call to save big on expertise for 2025. Act fast and secure your 50% discount with DataCamp's End of Year Sale – the clock is ticking!
首先,人们犯的最大错误是将HTML视为一种编程语言。相反,它是一种为 Web 浏览器编写说明的方法。这些说明告诉它网站的框架应该是什么。
HTML 和 HTML5 与适当的编程语言之间的区别在于HTML无法处理逻辑。这就是编程语言的全部意义所在。你不能像使用完整的编程语言那样让HTML在某些条件下做一件事,而在不同的情况下做另一件事。
这就是“什么是 HTML?”的简短回答。问题以及正确解释HTML和 HTML5 之间差异的第一步。
那么,HTML 是如何工作的呢?
弄清楚HTML是如何工作的,也可以告诉我们关于HTML和 HTML5 之间差异的答案。您会看到,该语言的第五次迭代建立在 Web 开发的悠久历史之上,并处理了截然不同的技术领域。
话虽如此,什么是HTML以及它是如何工作的?
您使用HTML编写的所有内容都会告诉浏览器您想要在页面上显示的内容以及顺序。如果您使用简单的HTML制作一个网站,它看起来会非常简单,因为这种标记语言并不是为了设计您网站的外观(为此使用 CSS)。它只放入您想要的元素并创建正确的网站结构(这就是为什么了解它对 Web 开发如此重要的原因)。尽管如此,有些人甚至可能会争辩说HTML 就是网络。
简单地说,HTML 通过在 < >(开始)和 </ >(结束)标签中定义不同的元素来工作。它们告诉 Web 浏览器元素应该是什么以及应该放置在哪里。
一些例子:
-
标签中的 p 告诉浏览器这是一个段落文本元素。
-
会告诉它是标题 2。
- 如果你希望它是标题 2,你可以用 或 关闭段落。
如果您想了解更多的标签,我们有一个完整的HTML标记参考列表右侧这里。
当然,这是基础,它可以变得比这更复杂,但最终,HTML 只是一个接一个地放置元素。现在,如何和在哪里放置该元素以及哪个标签最能代表它是多年来发展起来的另一个问题。这就是为什么HTML和 HTML5 之间的众多差异之一是语法。随着HTML的发展以及 Web 开发的概念和功能的发展,HTML 变得越来越好,变得不那么复杂,而且对人眼来说更加直观。
什么是 HTML5?
好的,我们对HTML有了很好的了解。现在,什么是 HTML5?
早在 1995 年,创建HTML的人都不知道 Internet 会发生如此大的变化。
自然,Web 标记语言也必须与 Web 一起发展。HTML5 是超文本标记语言的最新发展。它的目的是让网站尽可能与任何浏览器兼容(让我们面对现实,有时我们仍然确保)。
虽然您在技术上可以使用HTML的早期版本编写网站的框架,但它不会那么好或技术上不准确。HTML 和 HTML5 之间最明显的区别可能是它们如何处理一些现代网站属性,其中之一正在适应其基础每天都在增长的手机用户。残酷的事实是,如果您要在 2023 年从头开始制作网站,则必须使用 HTML5。
HTML 和 HTML5 的区别
现在我们知道什么是HTML以及什么是 HTML5,我们可以看看最新版本是如何从其前身演变而来的。
你还记得网络是这样的吗?
HTML 的第一个基本版本是在 1993 年“创建”的,HTML 2.0 于 1995 年问世。试着记住你见过的第一个网站(如果你不记得了,上面的例子会帮助你)。现在打开一个新选项卡并转到任何现代响应式网站。
你看到新网站与旧网站相比有多先进吗?
这是惊人的。使用HTML的基本版本创建现代的东西是非常困难的,如果不是不可能的话。过去根本没有这样做的技术,因此对它的支持同样滞后。
随着计算机和 Internet 功能的增长,世界各地的开发人员为了一个目标不断地重新编写 HTML。以确保他们可以提高网站功能。
在HTML2.0 于 1997 年 1 月发布HTML3.0 之后,但它只停留了很短的一段时间(大约 11 个月),HTML4 诞生了。
HTML4 于 1997 年由 W3C(万维网联盟)推荐创建,并作为互联网的基础保持了 17 年以上(比其前辈长得多)。2014 年,HTML5 诞生,开发人员很快就开始使用它开发网站。HTML 和 HTML5 之间的另一个区别是已决定不再有任何版本。也就是说,HTML5 将继续存在,并且只会在此过程中更新一些功能,但不会有 HTML6(至少现在没有计划)。
但让我们深入了解一下:HTML5 是如何适应网络使用变化的?
更好的错误处理
HTML 和 HTML5 之间的主要区别之一(我们将HTML用于所有旧的HTML版本,特别是 HTML4)是更好的错误处理。为什么需要它?
好吧,不幸的是,没有人可以编写永远不会中断的代码。至少现在还没有。
HTML5 开发的最大目标之一是让浏览器开发人员更容易制作浏览器解析器,从而更好地处理损坏的HTML代码。
HTML5 旨在提供一致的错误处理,这将使流程更加统一,并显着减少制作可工作的 Web 浏览器的工作量和成本。
HTML5 更擅长帮助浏览器向您显示正确的网页,即使开发人员犯了一些小错误或遗漏了某处的样式规则。
现代 Web 应用程序支持
显着改进的 Web 应用程序支持是HTML和 HTML5 之间的另一个区别。为什么需要它?
想想一个 90 年代的网站。现在想想 YouTube 或 Netflix(下图)。现代网站更像是在您的网络浏览器中运行的独立程序。HTML5 是开发者能够为我们带来这样的产品的原因之一。
当 HTML4 成为黄金标准时,开发人员必须找到使用 Flash 和 JavaScript、浏览器扩展和许多其他工具来解决其局限性的方法。
随着 HTML5 的引入,许多这些变通方法成为HTML本身的一部分,并允许开发人员通过从一开始就按预期工作来节省时间。
改进的语义
HTML 和 HTML5 之间的另一个区别是改进的语义,换句话说,简化的语法。
复杂的网站可能会令人生畏。到处都是不同的元素,成百上千,地狱,甚至可能有几十万个。
HTML5 旨在使HTML达到 21 世纪的标准。超文本标记语言语法变得更加直观。例如,现在有像
更改的目的是使HTML的编写和校对都更容易。
手机支持改进
1997 年,当 HTML4 发布时,手机还是一个相当新的东西。
2014 年,当 HTML5 推出时,我们生活在一个全新的世界。智能手机加上4G互联网成为了每个人口袋里的强大力量。
这种转变导致了HTML和 HTML5 之间最受欢迎的区别——改进了手机支持。
手机屏幕通常长于宽,而电脑显示器则相反。在计算机上看起来不错的东西在智能手机上自然会看起来更糟(问题 1:内容比屏幕宽),除非网站是为适应正在加载的设备而设计的。
这就是 HTML5 让世界各地的开发人员更轻松地创建适合手机设备的网站的地方。
现在是时候了。超过一半的互联网用户使用智能手机浏览网页。你也有可能这样做。您留在智能手机上看起来像废话的网站上的可能性有多大?
此外,据ThinkWithGoogle 称,如果该品牌拥有手机网站,则 80% 的用户更有可能购买商品。因此,手机支持不仅对用户本身很重要,而且对公司也有好处。
视频和音频支持
它处理音频和视频的方式是HTML和 HTML5 之间的另一个区别。
1997 年,由于拨号连接速度和计算机功能不如现代的宽带和计算机,HTML4 没有无缝支持网站上的音频和视频,这很好。
2014 年甚至 2023 年?这是完全不同的。互联网速度要快得多,音频和视频内容非常重要。众所周知,播客和各种形式的视频内容在大多数情况下比书面文字表现得更好。
在这样的环境中,HTML 4 中增加的视频和音频支持是对超文本标记语言的重要改进。
矢量图形支持
HTML 和 HTML5 之间的另一个区别是后者大大改进了矢量图形支持,这是用于使网站在各种设备上更美观的工具之一。
一个普通的 .jpg 文件是通过将原始像素靠得更近或将它们拉得更远来缩放的,这是非常基本的术语。
当您想在需要大得多的设计中使用小图像时会发生什么?当你试图让它更大时,你会失去质量:出现像素化。矢量图形解决了这个问题,有点。
假设您使用 Adobe Photoshop 使用来自各地的资源制作 700x700 合成并将其另存为 .png 或 .jpg。如果你想让它更大,你可以,但你可能会失去质量。
您可以尝试在 Photoshop 中将其重新制作为更大的版本,但是如果您的源图像比所需的要小,那么您将不会有太多运气,质量会很差。
使用 .svg 格式和 Adobe Illustrator。如果您使用 Illustrator 制作矢量对象,无论您尝试制作多大或多小,它都会完美缩放。
在 4k 分辨率显示器和电视以及几乎无限连接速度的时代,矢量图形是确保您网站的基本元素(如徽标、图表等)无论在何种设备上查看都看起来完美无缺的好方法。
HTML5 支持矢量图形和 .svg 格式,而 HTML4 不支持。
HTML5 的更多改进
在上面提到的所有改进中,即使我们尝试过,我们也无法找出HTML和 HTML5 之间最重要的区别。但这并不意味着优势列表已经结束。
首先,HTML4网站只能在浏览器缓存中存储临时数据,而基于HTML5的网页还可以利用web SQL数据库和应用程序缓存,这使得网站在内存中更容易运行。
由于JS Worker API被集成到HTML5中,它现在可以在web浏览器中运行JavaScript,而不是浏览器界面线程,这是在HTML4中完成的方式。
HTML5中还引入了许多表单控件和元素,将其带入现代。并为开发人员提供制作现代网站所需的工具。
HTML5 的兼容性
HTML和HTML5之间的一个巨大的优势区别是它增强了兼容性。
由于需要担心大量的 Web 浏览器以及更多不同的平台和设备,因此使用 HTML4 制作网页很麻烦,尤其是当您想要一些奇特的东西时。新版本可在所有设备上无缝运行,从而简化了 Web 开发。
所有网络浏览器不仅支持而且鼓励采用它。尽管如此,旧网站仍然使用 HTML4 作为其基础。原因很简单,该网站自 2014 年以来就没有更新过。
所有现代网络浏览器仍然支持 HTML4,只是新版本更容易处理。
HTML5 示例
您可能会对您最喜欢的网站使用的HTML版本感到好奇。最简单的检查方法是检查浏览器中的代码,然后转到顶部。然后,您需要查看HTML文本是如何开始的。
虽然HTML和HTML5之间并没有太大的区别,但是语法上的区别却是显而易见的。让我们看一些HTML5的例子,从任何HTML5文件的强制第一行开始。
任何HTML文件的第一行都以doctype声明开头。如果不是以<!DOCTYPE html>,它不是HTML5。这个声明就是在这个版本的超文本标记语言中启动文件所需要的全部内容。
另一方面,HTML 4.01的前一个版本有三个不同的声明。
您可以在此处了解更多信息。
在旧的HTML版本中,如果doctype声明看起来像这样::
最短的 HTML5 示例之一可能如下所示:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Sample h1 tag</h1>
<p>Sample</p>
</body>
</html>
但是,这不是具有适当代表性的 HTML5 示例。复杂网站(如 BitDegree.org)的实际HTML片段如下所示:
你知道吗
您是否想知道哪些在线学习平台最适合您的职业?
结论
超文本标记语言(或 HTML)对于 Web 开发至关重要。在 2014 年之前,HTML 指南已经落后了一段时间,直到W3C发布了HTML建议。
HTML5 引入了一些非常受欢迎的变化,例如:
- 错误处理的改进
- 简化的语法
- 增强移动设备支持
- 视频、音频和矢量图形支持
移动设备和媒体支持增强对用户来说是最重要的,但也发生了各种各样的调整,以使 Web 开发人员的工作也更轻松。总而言之,是时候了。