1. Web设计
  2. HTML/CSS格式
  3. HTML格式

什么是HTML5?

HTML5有益于用户、web开发人员、浏览器和移动平台创建者。与我一起介绍最重要的网络标准:HTML5。
滚动到顶部

本教程提供了HTML5的介绍性概述。如果与以前的版本相比,你从来没有真正理解过它的相关性,那么你来到了正确的地方。

HTML5是浏览器显示网页和与网页交互的最新标准。2014年批准,这是14年来首次更新HTML。在今天这个时代,这是一辈子的更新!

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

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

  • 它为页面提供了一个更简单、更直接的元素结构,使它们更容易构建、调整和调试,并构建自动化服务,帮助您在web上找到重要资源。
  • 它为以前需要烦人的音频、视频等插件的普通媒体对象提供了标准元素。这些插件需要定期更新,即重复下载以管理安全。
  • 有与界面的本地集成,以利用现代网络和移动需求。我最喜欢的例子之一是地理定位,它可以让你通过浏览器确定网页访问者的GPS坐标。此功能以前仅限于配备GPS的手机应用程序。

HTML5对谁重要?

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

HTML5提高了速度、易用性和网络一致性。是的,你的YouTube体验逐渐变得更加精彩。浏览器和插件更新更少,安全威胁更少,网站更优雅、可读性更强、速度更快。

你是网络开发人员吗?

HTML5让您的生活变得更轻松,并大大扩展了作为开发人员的可能性。这也意味着您可以构建内容,并更多地依赖浏览器构建器来确保一致性。这意味着更少的条件布局代码。

例如最近推出的popover API这使我们能够创建语义正确且标准化的弹出窗口、模态等,所有这些都使用本机HTML5元素。

您想构建Web浏览器吗?

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

HTML5的背景

HTML5从哪里来?

HTML5是自1991年推出网络以来30多年来最新的浏览器编程标准。

HTML的历史

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

  • HTML 2.0:1995年
  • HTML 4.0:1997
  • HTML 4.01:2000
  • HTML 5:2014

HTML5的目标

根据维基百科,HTML5旨在整合早期版本和不同的文档类型,如XHTML 1和DOM Level 2 HTML:

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

以下是如何进行的总结利用解释了HTML5的目标:

  • 消除诸如Flash之类的插件,以实现每个人都需要的通用功能。构建对音频和视频等内容的本地支持。
  • 使用新的本机元素减少对JavaScript和额外代码的需要。
  • 跨浏览器和设备提供一致性。
  • 尽可能透明地执行所有这些操作。
图像学分:主题简单

HTML5引入了哪些新功能?

结果是很多!HTML5带来了一个令人印象深刻的新功能列表,这些新功能现在被大多数浏览器支持。

HTML5的新元素

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

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

  • <标题><页脚>
  • <导航>适用于各种菜单
  • <旁白>侧边栏或附近的相关内容
  • <文章>内容的去向,如博客文章
  • <章节>类似<div>但更注重满足
  • <音频><视频>标签,让本地浏览器管理每个标签的播放。没有更多的插件和安全更新
  • <画布>专门用于使用单独的脚本语言绘制图形
  • <嵌入>在页面中放置外部内容或应用程序

这里有一个很好的视觉轮廓粉碎杂志:

html5语义元素html5语义元素html5语义元素

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

  • 音频和视频播放:提供跨浏览器的媒体播放,无需插件。
  • 地理位置:确定访客的位置。
  • 拖放:用于通过简单手势从浏览器上传文件。
  • 网络工作者:在后台运行JavaScript(非阻塞)。
  • 服务器发送事件:允许服务器在加载网页后在浏览器中更新网页,比AJAX和JavaScript更简单、更高效。
  • 离线数据存储:提供了一种独立于cookie在浏览器中本地存储数据的方法。

需要查看哪些浏览器支持哪些功能?HTML5测试对功能和浏览器支持进行了有用的交互式评估:

HTML5功能支持测试HTML5功能支持测试HTML5功能支持测试

有如此多的新特性,不可能在这里列出所有这些特性。请查看本教程底部的资源链接,以获取我推荐的更深入的资源。

HTML5的几个实际例子

让我们看看HTML5的几个很酷的实际例子。

锅炉板HTML5页面

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

1
<!DOCTYPE html>
2
<html 朗=“en”(英语)>
  <头部>
4
    <元 字符集=“UTF-8”>
5
    <元 姓名=“视口” 内容=宽度=设备宽度,初始刻度=1.0>
6
    <元 http-equiv公司=“X-UA-兼容” 内容=“ie=边缘”>
7
    <标题>HTML 5样板</title>
8
    <链接 相对=“样式表” href公司=“style.css”>
9
  </头>
10
  <body>
11
    <脚本型钢混凝土=“index.js”></script>
12
  </body>
13
</html>

注意,这里有一个更简单的doctype标记、链接标记和脚本标记。如果您想了解其他方法,请查看HTML5锅炉板,一个更广泛的开源默认HTML5页面。

视频元素和播放器

这里有一个CodePen演示,演示如何使用<视频>元素:

不需要插件,也不需要更新。添加视频播放器所需要做的就是插入以下HTML行:

1
<视频 控制 宽度="600" 型钢混凝土=“/mixkit-going-down-a-curved-highway.mp4” 类型=“视频/mp4”>
2
</视频>

形式

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

上面的演示来自Envato Tuts+上的一个教程,它教您如何做使用HTML5进行表单验证.

以下是关于Tuts+的其他一些与HTML5表单及其验证相关的教程。

可缩放矢量图形(SVG)

在HTML5中,可以更轻松地使用JavaScript设置元素的动画。看看这个CodePen演示,它显示了植物在SVG动画的帮助下从花盆中生长。

接下来是什么?

我希望你喜欢HTML5的好处。如果您想进一步了解HTML5,我想建议您使用另外两种资源:

  • HTML5简介:MDN为希望快速浏览所有新元素的开发人员提供了HTML5改进的出色介绍。
  • HTML5演示和示例:非常适合向您展示各种HTML5演示的有序菜单,向您展示可能的功能。

如果你是WordPress网站管理员,就像许多Envato Tuts+读者一样,你可能想评估未来的主题是否符合HTML5。标准驱动的开发和一致的浏览器支持使我们中的许多人更容易进行web开发,并减少了客户遇到的错误数量,同时越来越多地提供更好的用户体验。

此外,如果你正在寻找其他实用程序来帮助你提高HTML5技能,别忘了看看我们在环境市场有售.

因为HTML5有很多有用的资源,所以我额外提供了一些我觉得最有用的资源:

此帖子已更新为来自尼提什·库马尔Nitish是一名web开发人员,拥有在各种平台上创建电子商务网站的经验。他把空闲时间花在个人项目上,使他的日常生活变得更轻松,或者和朋友一起在晚上散步。

广告
寻找有助于启动下一个项目的东西?
环境市场有一系列可供出售的商品,帮助您开始。