HTML vs HTML5:了解它们之间的关键差异

HTML vs HTML5:了解它们之间的关键差异

HTML vs HTML5:了解它们之间的关键差异

HTML 与 HTML5。有什么大不同?如果你打算进入前端开发或使用 WordPress 中的代码,则需要了解它们之间的区别。这可能会特别令人困惑,因为有些人可能会互换使用这两个术语,但是从技术上讲,它们是两个不同的方面,尽管它们也是相关的。

让我们讨论一下 HTML 与 HTML5 之间的区别,后者更好,并且流行的标记语言最大的更新也有所不同。

什么是 HTML?

HTML 代表超文本标记语言。它构成了网络的基本组成部分,并且可能是其中最普遍的编码语言。

HTML 是用于 Web 开发的标准语言。它允许你使用称为标记标签的小标签创建网页的基础结构。例如,要使文本倾斜,可以将其包装在 HTML 标记中,如下所示:

<i>Italicized text.</i>

HTML 标记示例

同样,许多 HTML 都简单易懂,因此即使非开发人员也发现它易于使用。对于它对万维网有多么重要,选择 HTML 非常容易。

如果不使用 HTML,就不可能建立网站。尽管有些网站建设者可以让你设计网站而无需接触任何代码,但包括 WordPress 在内,他们仍在幕后为你处理 HTML 代码。

因此,如果你想成为 Web 开发人员或更深入地研究 WordPress 之类的工具,则自然需要学习 HTML。

HTML 通常与其他语言(例如 CSS 和 JavaScript)配对以扩展其功能。CSS 通过添加颜色,布局等来帮助你设置 HTML 样式,而 JavaScript 是一种更传统的编程语言,可让你添加高级功能。

虽然这两种语言可以很好地与 HTML 捆绑在一起,但是创建网站并非绝对必要。HTML 当然是必需的,这就是为什么它是最重要的 Web 语言。

什么是 HTML5?

HTML5 不是独立的系统,而是 HTML 技术的最新版本。它的前身 HTML4 于 1999 年 12 月进行了第一次也是最后一次更新。实际上,HTML5 并不是很新,几年前于 2014 年发布。

那么,最大的区别是什么?为什么所有的炒作?尽管许多标记标记保持不变(毕竟,不解决未损坏的标记),但其中的一些标记已经简化,因此编写代码非常容易和快捷。它基于全新标准,并且其解析也完全不同。

与旧版 HTML(允许你创建主要需要使用 CSS 和 JavaScript 进行修饰的静态网站)不同,HTML5 更具动态性,并包含多媒体元素。它本身支持视频和音频,你甚至可以使用它制作游戏或动画。

换句话说,HTML5 完全能够使用 JavaScript,Flash 或 Silverlight 等旧工具来完成你以前需要做的事情。这意味着你的站点更安全,对尝试进入的攻击者的利用更加不开放。

而且,尽管创建一个完整的网站仍然绝对需要 CSS 和 JavaScript,但你不再需要依靠它们来进行任何动态处理。

HTML5 不再只是一个网站构建器。它本身就是一个完整的应用程序构建器。

HTML5 不会随着下一个更新发布为 “HTML6” 而不断更新,而随着生活的发展,HTML5 会随着 Web 需求的发展而不断更新。这是这项持久技术的最新,最强大的版本,并且它将存在很长一段时间。

HTML 与 HTML5:权衡差异

当大多数人谈论 “HTML” 时,他们指的是整个技术,包括其最新版本:HTML5。尽管 HTML5 在许多方面都非常不同,但它实际上只是对旧标准的完美更新。

尽管 HTML 和 HTML5 是同一系统的一部分,但这一重大更新对旧的编码语言进行了多项增强,使其效率更高。这里仅是所添加内容的一些示例。

兼容性

当 HTML5 首次问世时,兼容性是一个大问题,也是许多人选择不升级其网站的主要原因。如果浏览器不知道如何解析 HTML5 标签,则可能会导致页面损坏或外观奇怪。

事实恰恰相反:用旧的 HTML4 标准编写的网站通常会在现代浏览器中崩溃,因为浏览器早就放弃了对过时功能的支持。如果你想与大多数人的浏览器保持兼容,HTML5 是你的理想之选。

尽管旧版本的 HTML 在 Internet Explorer 之类的浏览器上运行良好,但大多数用户不再支持或使用这些过时的版本。大多数人不需要为此类旧版浏览器编写网站代码,因此无需使用 HTML4。

正如你在此处看到的那样,所有现代浏览器都支持 HTML5 及其大多数功能。除了 Internet Explorer 6–8 和 Firefox 2,所有其他版本都完全或部分支持其新标记,所有这些标记均来自 2000 年代初期,如今很少使用。

检查 HTML 与 HTML5 浏览器支持

尽管所有现代浏览器在技术上都支持 HTML4,但对过时标签的支持充其量是充其量。你应该避免使用过时的标准,而改用 HTML5。

多媒体支持

HTML5 带来的最大好处之一就是对多媒体元素的支持,例如音频,视频,矢量图形,动画和游戏。

在 Web 的旧时代,在站点上放置尽可能多的简单动画通常需要使用 JavaScript,Flash 或某些其他技术。现在,你可以使用 HTML 或 CSS 进行操作,而不必对任何潜在的漏洞敞开大门。

使用视频和音频,嵌入播放器就像放下一个简单标签一样容易。你可以从那里进行许多配置,例如打开自动播放或添加播放器控件。

HTML5 音频播放器

HTML5 还支持嵌入 SVG 矢量图形,这些图像可以调整为任何分辨率而不会出现像素化。由于 SVG 可以很好地拉伸以填充任何屏幕尺寸,因此它们在在线显示图形方面正变得越来越受欢迎。

最后,你可以使用 HTML5 制作完整的视频游戏,尤其是将其与 JavaScript 结合使用时。许多游戏创建工具甚至都移植到 HTML5,并允许你将结果嵌入到你的网站中。

这种多媒体支持使 HTML5 成为替代许多过时的技术(包括 Java Web Start,Silverlight 和最近的 Flash)的理想选择。在 HTML5 中,几乎可以使用这些系统完成的所有操作都可以更简单,更有效地完成。

SGML

原始的 HTML 语言(直到第 4 版)在很大程度上基于 SGML 标准或标准通用标记语言。

SGML 旨在使标记标准化,消除混淆并启发了 HTML 和 XML,但它是 1960 年代创建的一种语言。它很古老,因此在设计时就没有考虑到现代 Web 应用程序。

HTML5 已发展为不再符合 SGML;相反,它使用自己的独特规则进行解析。尽管它的起源仍然是 SGML,并且 HTML5 只是对现有技术的扩展,但它不再符合那些标准。

其结果之一是错误处理现在变得更加宽容。一个小错误将不再导致你页面上的查看者出现明显问题,或者根本不加载页面。

语义或标签也得到了极大的改善。之前,在所有需要经常使用 div 的标签构建你的页面:<div id="header"><div id="menu">,和<div class="post">

在 HTML5 中,这些笨重的代码是<header><nav><article>。这些标签既简洁又响应迅速。

还引入了几个新标签。它们中的许多是为了代替以前用于构造页面的 div 和框架而创建的。

许多旧的标记标签完全没有变化,因此 HTML5 与旧版本部分向后兼容。但是,未经修改的 HTML4 文档将不再能使用新标准正确解析。

尽管 HTML 和 HTML5 之间有很多区别,但是这些更改通常会变得更好,并且旨在使标记语言更易于访问。

更好的性能和移动支持

HTML5 的最大优点之一是,它比以前的迭代更快,响应速度更快。在原始 HTML 时代,计算机访问互联网以外的设备甚至还不是梦想。现在,部分由于 HTML5 的速度,可以从我们的手机,手表和电视访问所有这些内容。

新版本带来了更好的标准,可以使网站在更小,功能更弱的设备上更流畅地运行。许多性能问题仍然取决于你和你的代码质量。但是,HTML5 的许多局面都与 HTML5 更新捆绑在一起。

例如,HTML5 支持 JavaScript Web Workers 的多线程,从而使设备的处理器能够利用其更多功能来运行脚本。现在,用于深陷页面的代码将无缝运行。

在 HTML5 中,设计响应式网站也要容易得多。HTML4 具有许多无响应的元素(例如 div),已被在移动设备上更好地工作的结构标签所取代。

框架也被删除,从而导致可用性和可访问性问题。尽管仍然支持它们,但已弃用它们,除非你有理由使用过时的技术,否则不应该使用它们。

虽然无法直接用 HTML5 替换框架,但建议你使用 Flex 框或 iframe 之类的 CSS 元素(HTML5 仍支持这些元素)来替换旧功能。

更好的表格控制

新的表单控件等同于对网站的全新控制。尽管这似乎是一个很小的功能,但它意味着必须依靠一种较少的外部技术来创建工作表格。

HTML 5 表单示例

最初,HTML 仅支持文本,密码,隐藏,复选框 / 无线电和文件上传输入类型。尽管这足以构成一个基本的输入表单,但是现在你可以使用 HTML5 输入类型做更多的事情。

新增加的内容包括电子邮件,电话号码,URL,搜索框,滑块,数字,日期和时间选择器以及颜色选择器输入。

输入类型的多样化阵列使你可以创建更好的表单,以接受更多内容类型,并附带验证以确保它们正确无误。检查 HTML 输入的完整列表以获取更多信息。

网络存储

在网络存储方面,HTML4 及以下版本基本上支持 Cookie 和其他功能。除了基本的用户跟踪以外,将所有信息存储在一个很小的 4 KB cookie 中几乎是不可能的。

另一方面,本地存储使你可以存储 5-10 MB 的数据,具体取决于浏览器。这使你可以保存有关先前会话的客户端信息,脱机访问数据,个人定制等等。此外,与 cookie 不同,本地存储不会自动清除。

你可以使用本地存储的一个示例是保存用户对网站上的浅色或深色主题的偏好设置,以确保他们在下次访问时继续看到你喜欢的网站。虽然你还可以使用 cookie 保存用户首选项,但浏览器不可避免地会在一段时间后清除它们。

HTML5 通过 Web Storage API 支持本地存储。此外,它还支持 Web SQL 数据库存储,索引数据库存储,甚至使用 File API 进行文件访问。其中许多通过 API 与 JavaScript 集成。在此之前,这要么做起来非常麻烦,要么在某些情况下根本不可能,或者做起来非常麻烦。

HTML 还是 HTML5 哪个更好?

如果你想学习编码,则绝对应该避免使用过时的标准。HTML5 是 HTML 的最新版本,应始终在该语言的旧版本上使用。

如上所述,HTML5 在过时且难以使用的 HTML4 的几个方面进行了改进。此外,HTML5 可以原生执行许多操作,而 HTML4 完全依赖于长期以来已弃用的系统,例如 Silverlight,Java Web Start 和 Flash。

尽管 HTML5 并不总是能在超级旧的浏览器和操作系统(例如 Internet Explorer 或旧版本的手机)上正常显示,但是这些平台已经过时了,很少再使用了。不再有任何充分的理由在现代标准上使用过时的 HTML 版本。

不幸的是,Internet 上和有关旧版 HTML 的书中都有很多信息。每当你查找指南或从课程或书本中学习时,请确保它谈论的是 HTML5,并在 2014 年之后发布或更新。学习 1999 年以来的过时标准是没有用的。

如何将 HTML 转换为 HTML5

如果你的网站较旧,则需要对其进行更新。遗憾的是,如果不进行任何手动工作,就没有真正的方法可以完成全部转换。

最好的方法是通读 HTML5 规范(如果你是该语言的新手,则可以阅读 HTML 课程)并熟悉所做的更改。之后,你可以重写代码并添加它们在 HTML5 中添加的新功能。

查阅本指南,从 HTML4 迁移到 HTML5。它广泛涵盖了你需要对代码进行的手动更改。

你也可以尝试使用此 XHTML 到 HTML5 转换器,但是在将其导入到实际网站之前,请确保手动检查代码或将其插入验证器。

幸运的是,HTML5 主要是新内容。你需要替换一些不推荐使用的标签,但是除此之外,除非你的站点严重依赖于不推荐使用的技术(如框架),否则升级代码通常并不是一件大事。

总结

HTML 和 HTML5 只是同一技术的两个部分,尽管它们表示的内容略有不同。HTML 是指整个标记语言,通常是最新版本,而 HTML5 是它的最新更新。

如果你想学习 HTML,请务必使用最新版本的 HTML5。无论从哪方面来看,它都是更好的选择,即使这意味着必须手动转换许多旧代码,这绝对值得付出努力。

HTML5 已有数年历史了,作为该语言整体的生存标准,它将仅继续更新以与现代 Web 一起使用。