2018 年面向 Web 开发人员的 30 个 HTML5 教程和资源

网络是建筑师、设计师的作品。 基础掌握在设计者、开发者手中。 我们可以使用 HTML 为数字时代构建网站、软件、项目和应用程序。 为了让 Web 浏览器理解和解释网站，需要根据标准对其进行编码，大多数情况下该标准是 HTML，并添加了 CSS 和 JavaScript。

掌握 HTML5 有一些有益的好处。 有了足够的经验，您可以成为一名自由前端开发人员并通过为他人开发网站来赚钱，但至关重要的是 HTML5 赋予您在网络上创建任何您想要的东西的能力。 也许无论是一个广义的术语，但就网站开发和设计而言，HTML5 是您取得成功的最佳机会。 当今存在一些很棒的框架，它们可以与您的 HTML5 知识相辅相成，以构建独特而动态的数字体验。

许多资深和专家开发人员已经出版了关于如何成为前端开发人员的书籍——了解 CSS 和 HTML 的人——虽然这些书籍很棒，但它们很快就会落后于当前 Web 开发中正在发生的事情。 这两种语言——HTML 或 CSS——都不是静态的，但总是在变化，并且正在改进以提供更精细的工具和技术来构建现代网站。 因此，使用这种方法，学习 HTML5 的一个不错的选择是通过有关特定功能如何工作或如何实现特定设计的网络教程、指南和演练。 我们为您提供最好的、最新的和最现代的教程，以及有关如何在几周内成为 HTML5 专家的资源。

通过页面转换改善用户流

如果您打算总体上学习 HTML5 和前端 Web 开发，您将不​​可避免地需要了解用户体验，以及它所提供的几乎所有内容。 能够编写简洁的代码固然很好，但如果您编写的代码反映了您对网站和应用程序的可靠用户体验应该是什么样子的理解，那就更好了。 如今，无数专家花时间分析页面性能和最新见解，了解是什么让用户停留在页面上，以及是什么让他们离开页面。 一项最新的研究案例研究向我们表明，可以改进页面转换以提供更精致的用户体验。

传统上，我们依赖默认转换，即当我们点击网站的新页面时，我们必须等待浏览器重新加载该页面。 尽管一些主题和开发人员正在追赶这个概念的效率有多低，但我们不会很快看到这种查看页面过渡方式的全局变化，除非我们自己尝试并逐渐传播关于它的词。 在本教程中，您将找到所需的工具和有关如何放大页面转换的信息，这样浏览器就不必为访问者打开的每个新页面进行硬重新加载，这是对全球用户体验的惊人丰富您的桌面和移动应用程序提供的内容。

预览

智能响应式设计模式，或者当 Off-Canvas 不够好时

什么是真实的响应式设计？ 它是一组拼接在一起的块和元素，并附有一些最小的响应式设计属性吗？ 这些天有太多糟糕的设计，虽然它在外面看起来很时髦，但如果我们更深入地研究内部的代码库，我们今天看到的许多领先网站完全避免了任何结构设置的方式页面的设计被呈现出来，这对那些事后必须来修复该代码的人来说意味着麻烦。

这篇文章技术含量较低，但提供了更多示例，说明不同的网站如何弄乱响应式设计模式，并在技术上以这种方式提供更糟糕的体验。 作为一名 HTML5 开发人员，您将想知道要避免的设计模式，以及为了更好地构建项目的可维护性和灵活性而使用的方法。

预览

表单设计：如何自动格式化用户输入

设计好的表单会让你从其他开发人员那里获得一些声誉点，但不仅仅是他们。 随着浏览器功能的巨大增长，用户逐渐习惯于自动完成表单之类的东西。 想想在网上进行任何购买，如果您是 Google Chrome 的狂热用户，那么您就会知道 Chrome 可以保存您的信用卡详细信息以供日后使用，以便于访问。

这种表单设计确实会影响用户查看他们正在使用的浏览器的方式，还会影响网站所有者对此类自动完成工作的开放程度； 可以阻止它们，但大多数情况下它们是可用的。 Thoriq 的这个教程侧重于用户实时键入内容时的自动完成表单功能。 这可以是序列号、出生日期或您需要的字符串。 拥有自动完成和自动排序功能确实可以给初次访问的用户留下持久的印象。 有时它甚至对您自己的项目数据库很有帮助，因为您可以避免让用户输入愚蠢的数据，而是在他们输入时自动更正它。

预览

如何使用 Flexbox 构建新闻网站布局

Flexbox 现在是网页设计中的官方布局之王。 这个美妙的小属性可以帮助您设计一个具有无可挑剔的像素和尺寸清晰度的页面，无论从哪个设备访问特定网站。 探索 Flexbox 可能性的一个好方法是通过教程，它们通常很简洁，并提供了许多示例，说明如何调整不同的网格和设计行以在页面上完美显示。 Jeremy Thomas 投入工作制作了以下教程，该教程仅使用 Flexbox 布局属性为新闻网站或新闻杂志构建布局。 了解如何创建响应式列、如何调整其尺寸以实现设计清晰，以及如何在不牺牲外观的情况下移动内容。

预览

动画技术比较

为您找到合适的动画工具可能是一个棘手的过程，因为有太多精彩的选择可供选择！ 浏览器在支持动画方面变得越来越好，开发人员肯定会通过突破动画在网页设计中使用方式的限制来充分利用这一点。 这篇文章探讨了两种解决方案，React Animations 和 Browser Native Animations — 涵盖的工具是：CSS、Canvas、SMIL、Web Animations API、WebGL、GreenSock、Velocity.js、jQuery、Snap.svg、Three.js、Bodymovin、React Motion ，和 GSAP。 每个工具的优缺点都有简明的解释，因此请明确您的目标并做出选择。 该帖子底部有一些精彩而有见地的评论，因此您可以了解更多有关那里的每个工具的信息，同时还可以探索帖子本身未涵盖的不同建议。

预览

社交媒体的基本元标签

社交媒体是结构良好的设计不可避免的一部分，由于缺乏社交小部件而失去社交份额是愚蠢的，至少可以说是不合理的。 然而，这篇文章并不关注可爱的社交分享按钮，而是关注社交分享的一个新方面，即社交元标签。

这些元标记可用于帮助您创建与社会保持一致的内容，这些内容将在特定社交网络上以更精致的方式显示。 对于 Twitter，我们知道它是 Twitter Cards，它允许我们将我们的帖子分享到 Twitter 并在我们写的评论旁边显示图像/描述，对于 Facebook 来说，它是一样的东西，除了能够归属适当的作者信用，该信用可以链接回该人的官方 Facebook 帐户。 这是关于如何实现元标记精度的彻底深入指南，以便您的帖子在您的朋友和关注者社交媒体墙上获得更多曝光。

预览

粘性页脚，五种方式

您有没有想过当您上下滚动特定页面时，网站如何创建社交共享小部件，这些小部件会固定在页面底部？ 它被称为粘性页脚！ 就像粘性页眉导航栏一样，粘性页脚在那些想要更方便地公开重要信息的人中变得非常流行，有些是社交分享按钮的公开，有些使用粘性页脚功能来显示他们的电子邮件通讯形式，其他人会使用它来广播有关业务、产品或网站的重要新闻。 一个的用途很多，所以当你学习五种独特的技术来在你自己的网站上实现粘性页脚时，让你的创造力尽情发挥。 这些包括负边距（两个版本）、使用 calc() 功能、使用 Flexbox 实现或使用全局网格。

预览

多文件上传在 HTML5 中很容易

正确上传文件至关重要，如今大​​部分网站都管理某种形式的文件上传，用于个人资料使用或网站范围的功能列表。 即使您为自己制作了一个投资组合网站，您也可能希望实现某种形式的文件上传，以便更轻松地附加新的投资组合项目。 这不会花费太长时间，事实上，HTML5 使它非常快速、安全和方便。 在 Raymond 的本教程中，您将学习如何创建能够一次上传多个文件的 HTML5 文件上传表单，这是一段不错的代码，可以在不同的设置中快速重新调整和重用。

预览

如何使用 HTML5 和 Cordova 在 24 小时内构建 iOS 和 Android 应用程序

构建一个移动应用程序是当今许多人的梦想，去当地的数字技术专家咖啡馆坐一坐，你会发现几十个书呆子坐在他们的电脑前，窃取他们第一个移动应用程序的功能演示。 如今，移动应用程序是一项巨大的业务，工作机会无处不在，即使在统治市场的大型科技公司也是如此。 达到那个水平当然是一个挑战，但几乎没有任何好处来自没有提出挑战的情况。 本教程使用 Cordova 构建 Android/iOS 应用程序，重点介绍一种快节奏的方法，为您的朋友准备工作移动应用程序预览，以便您了解自己的想法。

预览

如何为 HTML5 视频配置您的网络服务器

视频内容行业的所有知名人士都开始转向 HTML5 视频以获得更好的浏览器性能，YouTube 是几年前从 Flash 转向 HTML5 的主导视频平台，直到今天他们仍在继续改进生态系统，以提供更好的视频观看体验。 Kristof 解释了有关如何配置 Web 服务器以使其支持 HTML5 文件类型的非常快速和简单的技巧，否则您可能会尝试加载 HTML5 视频内容，但它根本不会显示。

预览

HTML5 书签

HTML5 书签使您不必经常访问 Web 开发博客以了解可用于自由市场的最新工具、库和插件。 除了列出最新的酷工具的每日链接之外，HTML5 书签还有一个侧边栏小部件，其中列出了与 HTML5 相关的所有重要框架、引擎、资源和链接。 有时会有多个链接，通常至少有一个。 通过这个书签站点，您可以了解即将可用的工具类型，如果您已经在某个特定的事情上工作了很长时间，您甚至可以提交和登记自己的工具。

预览

深入 HTML5

教程是学习特定编程语言各个方面的直接资源，通过教程，您不仅可以探索特定概念的微小方面，还可以学习如何将这些方面应用于项目的其他部分。 Dive Into HTML5 是一本免费的在线书籍，向您介绍了 HTML5，并详细解释了如何从 HTML5 新手转变为自信的专业人士，在构建网站和 HTML5 应用程序方面可以处理自己的问题。 您将获得关于 HTML5 历史、重要概念、如何使用动画、视频以及您在阅读教程时通常会遇到的所有内容的大量报道。

预览

HTML5 游戏开发者

除了网站和应用程序之外，您还可以使用 HTML5 构建什么？ 手机游戏呢？ 手机游戏市场已经爆炸式增长，我们今天拥有的许多应用程序商店市场的成功仅靠一己之力。 学习创建自己的 HTML5 游戏首先要了解 HTML5 如何与浏览器交互，此时您可以开始探索不同的 HTML5 游戏引擎以开始构建您的第一个游戏地形。 如果您对这样的冒险感兴趣，那么请不要羞于访问 HTML5 游戏开发者论坛，在那里您可以与其他游戏开发者学习、联系和集思广益，他们都使用 HTML5 来完成他们的项目。 这是了解行业最新消息的好地方，也是了解人们使用软件构建游戏的方式的好地方。

预览

CSS3 和 HTML5 动画终极指南

几年前，您将不得不使用 Flash 来创建一个完全动画的网站，而如今这一切都可以通过 HTML5 和 CSS3 来完成——而且设计师每天都在推动这些语言的极限，以提供更简洁的体验，重塑我们理解网络动画的方式。 拥有一个静态网站很好，但是在您的网站上添加动画可以增加一些可信度方面的额外点，即使是简单的过渡效果也可以被视为动画，并且知道如何使用过渡是制作具有感觉的应用程序和网站的第一步流畅、清晰且易于导航。

您将要探索的这个庞大的资源充满了有关 Web 动画的有趣和足智多谋的信息，您需要什么样的库才能使它们工作，以及它们通常如何与浏览器交互。 您距离成为动画设计大师仅几步之遥。

预览

你在 HTML5 中犯的 5 个可怕的错误

熟能生巧，确实如此。 每当你养成一种新习惯或一种技能时——你一定会遇到一些经验，这些经验可以提高你对特定任务的理解，有时你会学到要避免的事情，有时你会意识到如何更快更好地完成事情。 这一切都是时间游戏，而编程当然也属于学习的范畴。

HTML5 与任何其他语言一样会带来挑战，它会使新开发人员对处理设计问题的最佳方法感到困惑，而且您通常不会在教程中解释这些问题，通常每个人都使用自己的方法来构建东西 - 众多方法之一人们过去如此讨厌（或者可能仍然讨厌）PHP 的原因，是因为它的多样性和由大量不同开发人员编写的编写代码的缺陷。 在这里，您对常见的 HTML5 编程和语法错误有一个很好的回顾，这些错误在您的 Web 开发人员职业生涯中至少会犯几次，因此请探索它们，了解它们并采取必要的步骤来防止它们在未来发生.

预览

如何克服 HTML5 在线学习的 5 大挑战

品牌在为其团队提供电子学习时遇到的常见挑战是什么？ Elucidat 涵盖了您在尝试向大量人群教授某些东西时通常会遇到的一系列重要要点，在这种特定情况下，主题是 HTML5。

预览

创建和共享丰富的 HTML5 内容和应用程序

H5P 为开发人员提供了在任何应用程序开发环境中创建丰富且可重用的 HTML5 内容的必要工具。 您可以使用 H5P 插件将此丰富的可重用内容功能添加到您的 Drupal 或 WordPress 网站。

H5P 提供了多层内容类型，可以使您的网站外观丰富十倍。 其中一些是用于创建可以展开或碰撞的项目列表的手风琴。 它有一个视频聊天小部件，因此您可以通过真正有意义的媒体与访问者互动。 它还具有用于创建不同范围的测验的算法小部件。 此外，它还具有图表生成器，因此您可以快速显示您获得的最新研究数据。 它还有一个很棒的小部件，用于从图像中构建拼贴画。 最后，它有一个令人惊叹的小部件，可将您的课程直接展示到您的网站上，还有更多精彩的小部件。

需要一些时间来了解所有这些。 但是，这些小部件可以完全改变您网站的感觉，并且肯定会吸引重视交互功能的受众。 H5P 是围绕称为 H5P 库的可重用构建块设计的。 例如，有 H5P 库可用于向您的内容添加视频、图像和声音以及用于创建 UI 元素。 所有现有的 H5P 内容类型也被设计为可重用。 如果您的内容类型需要问题类型，只需几分钟即可插入。您可以从 10 种现有问题类型中进行选择，它们都将遵循相同的问题类型合同。

预览

理想的设计工作流程

HTML5 正在编码，对吧？ 它不仅是编码，还是设计网站的工具。 CSS3 可以添加那些美妙的样式和颜色层，但是 HTML5 将所有这些小而整洁的属性结合在一起。 它有助于完成您对应用程序、网站或手机游戏的创意的执行。 理想的设计工作流程是一个很好的小指南，它向您展示如何在不花太多钱的情况下做得更多。

这是一个演示文稿，各种回顾，展示了在您设计新项目时可以使用的最佳工具是什么，这些工具最终将节省您的工作效率。 幽默似乎有点讽刺，但最终都很有趣。 快速浏览一下，看看哪些提示适用于您当前的工作流程，也许您可​​以对其进行调整，以确保在减少工作的同时完成更多工作。

预览

技术响应式网页设计速成课程

随着我们走向全球现象，响应式设计教程和指南只会变得更加简洁和深入。 这是大多数互联网用户将通过智能手机浏览的地方。 您必须了解响应式设计的来龙去脉。 您的网站访问者中有很大一部分将通过他们的移动设备访问。 人们根本没有耐心浏览桌面模式的网站。 这种情况尤其发生在网站的所有者无法对其做些什么的时候。 向业内最优秀的公司之一学习如何完善像素完美的设计。 您需要这样做，以便它们在任何设备中都变得流畅、响应迅速且灵活。

预览

如何使用语义 UI 设计丰富的基于卡片的布局

卡片设计首次亮相，无处不在。 从 Google 到 Pinterest，再到移动应用程序——每个人都开始接受精心设计的卡片设计之美。 关于如何充分利用这一美妙的新趋势的教程也从四面八方涌来。 Semantic-UI 提供了一组与 Bootstrap 类似的工具和组件，但当然是在更语义化的标记中。 在本教程中，您对如何使用 Semantic-UI 实现完美的卡片设计有一个很好的概述。 您需要设计以准备好在您当前工作的任何网站上实施。 最终的代码设置可在 JS Bin 上找到，您可以在其中自己尝试设计。 也许，您可以根据自己的需要进行自定义调整以适合您的项目。

预览

如何使用 Chrome 开发者工具测试布局

测试不仅适用于繁重的编程语言。 事实上，测试将始终是网页设计不可或缺的一部分。 如果不进行测试，您只是押注自己的能力来开发一个没有任何错误的完美网站。 通常情况下，情况永远不会是这样，因为单个设计中涉及的内容太多。 确保此设计稳定的唯一方法是通过测试。

现在有许多库来结束 HTML5 和 CSS3 测试。 但也许，您一直忽略的那个已直接插入您的 Chrome 浏览器。 它被称为 Chrome 开发者工具。 它是一套面向前端开发人员的工具，可用于实时测试和分析您的设计。 这直接在浏览器中进行。 您可以采用两种方法来帮助您改进使用这些工具的方式。 如果您要开始一个新项目，请先编写 HTML 代码，然后简单地玩弄规则。 HTML 的初稿将通过开发工具。 您将看到更改的即时应用将节省您优化项目的时间。

预览

使用 HTML lang 属性

HTML5 中的语言属性可帮助您指定网站使用的默认语言类型。 反过来，该规范可帮助机器人和远程工具了解如何抓取您的网站并为其编制索引。 您不想在只有英语的网站上使用西班牙语属性。 这同样适用于反之亦然的情况。

预览

HTML5 向上

当您根据书籍或教程从头开始构建新网站时，可能会出现问题。 这通常会发生，因为您遵循了几个月制定的规则指南。 在您购买这本书之前，这甚至需要数年时间。 在那些（并不罕见）的情况下，您将使用过时的技术和方法构建网站。 我们想向您展示一种不同的方法来加速您的学习。 您甚至可以保留您的书籍，因为无论如何技术信息都是无价的。

HTML5 UP！ 是一个响应式网站模板集合。 我们曾在某些场合介绍过他们的主题，我们对其设计和无可挑剔的整体结构感到非常满意。 我们的建议是让您使用这个美丽的主题作为学习工具。 您还应该下载他们的源代码并充分探索它。 在一侧拉起您的代码编辑器，在另一侧拉起您的浏览器。 您将看到每个元素是如何内置在设计中的。 您可以自己学习这些技术，并在将来将其应用到您自己的设计中。 听起来相当容易吧？ 嗯，实际上是这样，您可以为任何类型的免费主题网站执行此操作。 这是了解新设计概念以及如何在您自己的工作流程中使用它们的快捷方式。

预览

Ionic：高级 HTML5 混合移动应用程序框架

Ionic 是市场上最先进和最发达的 HTML5 框架之一。 Ionic 不能做的事情不多，但它实际上可以做的事情太多了。 领先的品牌和技术公司自豪地承认他们也是 Ionic 框架的用户。 他们将其用于移动和桌面应用程序。 Ionic 拥抱 Web 性能，并且被认为是最快的混合框架之一。 此外，它还包含 Angular 技术。 您始终使用最先进的 Web 开发功能进行构建和原型设计。 令人惊叹的设计和某种易于使用的感觉是使 Ionic 粉碎竞争白费的原因。

预览

免费的 HTML5 在线动画制作工具

我们确实向您推荐了一系列 HTML5 动画教程。 如果您不想跟随他们，我们完全理解。 有时，掌握动画可能有点棘手。 对于这些情况，我们不能推荐足够的著名动画软件。 它是一款可靠的在线工具，用于创建所有基于 HTML5 技术的视频和动画。 它非常适合想要制作新广告视频的品牌。 此外，它非常适合需要制作课程介绍视频的导师。 此外，它非常适合希望在其网站上使用一些 HTML5 动画魔法的开发人员。

预览

横幅流

广告世界每天都在变化。 Adblockers 正在阻止网站管理员赚取他们辛苦赚来的收入。 有了这个，不同的公司正试图发芽做点什么。 BannerFlow 确实为构建视觉上可接受的 HTML5 横幅提供了一个很好的环境。 开发人员当然使用精确的网络技术构建它，因此它们对所有现代浏览器都很友好。 创建自定义横幅，如果您愿意，您甚至可以监控他们的个人表现。

预览