• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载

什么是 HTML5?

本教程提供了 html5 的介绍性概述。如果您对它的了解不多,或者只是想了解它的相关性,那么您来对地方了。

html5是浏览器显示和与网页交互的最新标准。它于 2014 年获得批准,是 14 年来对 HTML 的首次更新。在这个时代,这是更新之间的一生。

HTML5 的主要目的是让 Web 开发人员和浏览器创建者更容易遵循基于共识的标准,从而使合规性更加高效和授权。它还旨在为桌面和移动访问者提供更好、更快、更一致的用户体验。

以下是 HTML5 的一些关键改进:

  • 页面有一个更简单、更直接的元素结构,这使得它们更容易构建、调整和调试,并构建自动化服务,帮助您在 Web 上查找重要资源。

  • 它为以前需要烦人的音频、视频等插件的普通媒体对象提供标准元素。这些插件需要定期更新,即重复下载以管理安全性。

  • 与界面进行本机集成,以利用现代 Web 和移动需求。我最喜欢的例子之一是地理定位,它允许您通过浏览器确定网络访问者的 GPS 坐标。此功能以前仅限于配备 GPS 的手机应用程序

例如,下面是一个 HTML5 地理定位示例,来自使用 php 构建您的初创公司:地理定位和 Google Places:

什么是 HTML5?  第1张

HTML5 对谁重要?

您只是网络用户还是 YouTube 粉丝?

HTML5 提高了整个网络的速度、易用性和一致性。是的,您的 YouTube 体验将逐渐变得始终如一的美妙。将会有更少的浏览器和插件更新,更少的安全威胁,以及更优雅、更易读、更快的网站。

您是 Web 开发人员吗?

HTML5 让您的生活变得异常轻松,并极大地扩展了可能性。这也意味着您将能够构建东西并更多地依赖浏览器构建器来确保一致性。这意味着更少的条件布局代码。

您想构建 Web 浏览器吗?

一方面,您将在 HTML5 规范中有一个很好的路线图,详细说明您应该如何构建以及构建什么。另一方面,还有更多的事情要做并且做得对。将您的浏览器与大女孩浏览器制造商区分开来并不容易。

HTML5的背景

HTML5 从何而来?

自 1991 年 Web 推出以来,HTML5 是 20 多年浏览器编程标准中最新的一个。

HTML的历史

HTML 于 1993 年首次作为标准出现,以下是标准委员会接受的 HTML 版本的时间表:

  • HTML 2.0:1995

  • HTML 4.0:1997

  • HTML 4.01:2000

  • HTML 5:2014

HTML5 的目标

根据Wikipedia的说法,HTML5 旨在整合早期版本和不同的文档类型,例如 XHTML 1 和 dom Level 2 HTML:

[HTML5] 扩展、改进和合理化了可用于文档的标记,并为复杂的 Web 应用程序引入了标记和……(api)……HTML5 也是跨平台移动应用程序的潜在候选者。许多功能的设计都考虑了智能手机和平板电脑等低功耗设备。

以下是MakeUseOf如何解释 HTML5 目标的摘要:

  • 消除每个人都需要的常用功能的插件,例如 Flash。为音频和视频等内容构建原生支持。

  • 使用新的原生元素减少对 javascript 和额外代码的需求。

  • 提供跨浏览器和设备的一致性。

  • 尽可能透明地执行所有这些操作。

什么是 HTML5?  第2张

HTML5 提供了哪些新功能?

很多,事实证明!HTML5 提供了令人印象深刻的新功能列表,现在大多数浏览器都支持这些新功能。

HTML5 的新元素

HTML5 中最基本的新元素使网页布局和调试您的代码或其他人的代码变得更加容易。它还使自动化服务更容易扫描网络并了解不同页面组件的重要性。

对于页面布局和关键功能,现在有特定元素,例如:

  • <header>和<footer>

  • <nav>适用于各种菜单

  • <aside>用于侧边栏或附近的相关内容

  • <article>内容所在的位置,例如博客文章

  • <section>类似<div>但更注重内容

  • <audio>和<video>标签让本机浏览器管理每个的播放。没有更多的插件和安全更新

  • <canvas>专门用于让您使用单独的脚本语言绘制图形

  • <embed>将外部内容或应用程序放入页面

这是Smashing Magazine提供的一个很好的视觉轮廓:

什么是 HTML5?  第3张

以下是 HTML5 的一些更高级的功能,包括 API 集成,使 JavaScript 中复杂操作的编码更容易且跨浏览器更一致:

  • 音频和视频播放:提供跨浏览器的媒体播放,无需插件。

  • 地理位置:识别访问者的位置。

  • 拖放:用于通过简单的手势从浏览器上传文件。

  • 网络工作者:在后台运行 javaScript(非阻塞)。

  • 服务器发送事件:允许服务器在加载后在浏览器中更新网页,比 ajax 和 JavaScript 更简单、更高效。

  • 离线数据存储:提供一种在浏览器本地存储数据的方法,独立于 cookie

需要查看哪些浏览器支持哪些功能?HTML5Test对功能和浏览器支持有一个有用的交互式评估:

什么是 HTML5?  第4张

有如此多的新功能,因此无法在此处对所有功能进行分类。请检查本教程底部的资源链接以获取我推荐的更深入的资源。

一些 HTML5 实际应用示例

让我们来看看几个很酷的 HTML5 示例。

样板 HTML5 页面

HTML5 的简单性在其新的页面布局中显而易见。更多面向内容的元素使页面代码更易于理解和调试。这是一个简单的样板示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

注意有一个更简单的文档类型标签、链接标签和脚本标签。如果您想了解其他一些方法,请查看HTML5 Boilerplate,这是一个更广泛的开源默认 HTML5 页面。

视频元素和播放器

<video>这是一个 CodePen 演示,展示了使用该元素将视频播放器添加到您的网站是多么容易,不需要插件,也不需要更新。添加视频播放器所需要做的就是以下几行 HTML:

<video controls width="600" src="/mixkit-going-down-a-curved-highway.mp4" type="video/mp4">
</video>

形式

HTML5 对表单和输入元素进行了广泛的增强,使 Web 编程更容易,用户体验更好。例如,输入元素现在支持各种内置验证。这是对姓名、号码、电子邮件地址和网站 URL 的验证:

See the Pen  HTML Based Form Validation - Pattern Attribute by Envato Tuts+ (@tutsplus)  on CodePen.

上面的演示来自 老吴教程站上的教程之一,它教你如何使用 HTML5 进行表单验证

可缩放矢量图形 (svg)

在 HTML5 中,您可以更轻松地使用 JavaScript 为元素设置动画。下面的 CodePen 演示在 SVG 动画的帮助下展示了植物从花盆中的生长过程。

See the Pen  Grow (GSAP SVG animation) V1.1 by Fabio (@FabioG)  on CodePen.

下一步是什么?

我希望您喜欢这份关于 HTML5 优势的概述。如果您想进一步探索 HTML5,我想再推荐两个资源:

  • HTML5 Introduction:对于希望快速了解所有新元素的开发人员来说,这是对 HTML5 进步的极好介绍。

  • HTML5 演示和示例:非常适合向您展示各种 HTML5 演示的有组织的菜单,向您展示什么是可能的。

这是 HTML5 Demos 中可浏览的演示示例:

什么是 HTML5?  第5张

如果您像许多老吴教程网读者一样是 wordpress 网站管理员,您可能希望评估未来主题是否符合 HTML5。具有一致浏览器支持的标准驱动开发使我们许多人的 Web 开发变得更加容易,并且将减少我们的客户遇到的错误数量,同时越来越多地提供更好的用户体验。

总的来说,我对 HTML5 印象深刻。看来它将继续发展。


文章目录
  • 以下是 HTML5 的一些关键改进:
  • HTML5 对谁重要?
    • 您只是网络用户还是 YouTube 粉丝?
    • 您是 Web 开发人员吗?
    • 您想构建 Web 浏览器吗?
  • HTML5的背景
    • HTML5 从何而来?
      • HTML的历史
    • HTML5 的目标
  • HTML5 提供了哪些新功能?
  • HTML5 的新元素
  • 一些 HTML5 实际应用示例
    • 样板 HTML5 页面
    • 视频元素和播放器
    • 形式
    • 可缩放矢量图形 (svg)
  • 下一步是什么?
  • 发表评论