跳到主要内容

18个很棒的HTML API - 以及如何使用它们

HTML比以往任何时候都更有能力。在这篇文章中,我们现在正在浏览最好的HTML API。这些是您应该充分利用的元素网站布局。请继续阅读,深入了解一下

HTML API,以及Web组件指南。

或者,跳转到第二页以获取可用于准确定义页面结构和每个元素角色的分段元素的集合,以及要使用的内联元素的选择而不是

+$Want to explore some more APIs? We also have guides to the best+$JavaScript APIs+$HTML APIsGoogle API

01。

  • 用它来:显示弹出窗口或模态窗口,没有开销
  • 阅读网络文档

Web上的常见设计模式是具有额外的窗口显示,以提供用于复杂交互的更多信息或选项。添加确认作为额外步骤也是让用户意识到他们的行为会产生影响的好方法。

这些窗口已经通过Bootstrap或jQuery UI等库提供了多年。虽然它们易于实现,但它们通常需要大量脚本和额外的样式来匹配它们实现的站点的外观和感觉。

HTML5.2中添加的少数元素之一是

。这个新的语义元素旨在表示一个补充的交互式组件,它显示在文档的主要流程之外。

对话内容

元素本身的设计尽可能简单。标记中的任何内容都将成为窗口的一部分,默认情况下不会显示在页面上。当元素具有打开属性已应用,然后根据它在DOM中的显示位置显示居中。

虽然对话框可以请求响应,但用户仍然可以在不必与其交互的情况下导航页面。模态窗口类似于对话框,但其目的是在继续之前要求用户执行操作。这使得它对潜在的破坏性操作很有用,例如删除帐户。

const dialog = document。的getElementById( “模态”); dialog.showModal();

模态窗口只能使用JavaScript触发。一旦打开,窗口
显示在用户屏幕中完全居中,并使页面的其余部分变暗。关闭它的唯一方法是按下退出键或调用关于元素的方法。

非本机模态实现经常忘记模态背后的内容。对于键盘用户,他们的浏览器可以开始聚焦并与模式下面无法看到的元素进行交互。原生模态使其余内容变为惰性,确保焦点在被解除之前保持在窗口内。

浏览器支持目前仅限于Chrome,Opera和Samsung Internet浏览器。由于不受支持的浏览器会将未知元素视为a,它可以在需要时添加此行为。 Chrome团队已经整合了一个对话框的填充工具解决问题。

02。

  • 用它们来:在不使用JS的情况下在可折叠标题下显示/隐藏内容
  • 阅读
    网络文档

手风琴是一种常见的用户界面模式。它可以作为一种在狭小空间内容纳可能冗长的内容的方法,只提供一些需要立即可见的内容。这些最适用于目录,一组常见问题或任何其他附带信息,例如指向某个位置的路线。

虽然有许多库可以帮助解决这个问题,但它也可以在没有任何JavaScript的情况下实现。内容可以隐藏在内部

元素因此在单击时切换为可见。

标题

一些非常长的内容......

Element表示单个可折叠区域。默认情况下,该块内的任何内容都将被隐藏,直到单击“详细信息”标题。

添加一个打开属性将扩展块。这也可以通过JavaScript触发,作为向用户显示某些信息的方式,例如对特定问题的回答。添加一个

在块的顶部将默认标题替换为该元素的内容。然后该标题变为交互式,这使得键盘内的内容可访问。

虽然它几乎可以有任何价值,但添加其他交互式或可点击的元素,例如要么