12 个避免复杂库的简单 HTML 片段⚡✨

发表:2年前 更新:2年前

不了解基本技术有时会增加规模、影响性能并为项目增加额外的复杂性。

这篇文章是一个提醒,如果你想让它看起来漂亮,你可以用普通的 HTML 和一点 CSS 做很多事情。

我收集了一些最有用的 HTML 标签和属性,因此您可以研究它们并在您的下一个项目中使用。

我还创建了 12 个独立的 Codepens,这样您就可以体验并尝试使用这些示例。

? 颜色选择器

通常在开发人员工作流程中,您可能希望访问色谱并从中获取任何阴影。

您可以使用 <input type="color">,否则从头开始编写将是一项耗时的任务。

? 块引用

在撰写文章时,您可能希望突出显示您最喜欢的一些名言。

您可以为此使用 <blockquote> 标签。添加一些自定义样式,你就有了一个很好的元素,它将从文本的其余部分中脱颖而出。

? 音频播放器

从头开始编写自己的音频播放器可能是一项挑战。您可以使用内置 <audio> 标签,它提供播放音频文件的基本功能。

此外,您可以在这里收听更多我的音乐。

? 视频播放器

您可以在项目中使用的另一种多媒体是视频。同样,您不能只在 HTML 中包含视频链接并希望它能够播放。

要正确播放视频,您可以使用内置 <video> 标签。

? 手风琴

有时您可能想要隐藏一些内容并允许用户手动显示它(例如,为了节省视口的空间)。

<details> 借助标签,您可以使用纯 HTML 实现所描述的功能。

? 日期选择器

使用日期是开发人员搜索外部库的最常见原因之一。

HTML 提供了一个 <input type="date"> 标签,它提供了一个漂亮的 UI,可以通过单击日期来选择日期。

⚪ 滑块

Slider 是一个常用的组件,用于收集特定数值范围内的用户输入。

您可以使用 <input type="range"> 获得一个功能齐全的滑块,您可以在其中设置最小值、最大值和当前值。

✍ 内容编辑器

为了编辑内容,您不必使用输入或文本区域字段并为它们设置默认值。

相反,您可以使用 contenteditable 允许编辑 div 内容的属性,例如。

? 图片标签

您可能希望在不同的屏幕尺寸上显示不同的图像以提高性能和 UI/UX。

<img> 您可以使用内置标签,而不是使用默认标签,检测视口并创建在图像之间切换的方法 <picture>

⌛ 进度条

<progress> 标签代表任务的完成进度。

您可以使用它来显示各种操作,例如下载、文件传输或安装。

? 下拉

通常,您可能需要收集具有多种可能选择的用户输入。您可以将它们包含在下拉列表中,而不是在屏幕上列出所有选项。

使用 <datalist> 标签将允许用户从下拉列表中选择选项,同时还允许输入他们自己的值。

? 工具提示

如果您需要对某事进行详细描述,最好包含一个弹出窗口。

HTML 内置 title 属性默认提供。

在本文中,我们回顾了您可以在处理文本、音频、图像、视频等时使用的功能性 HTML 元素。

下次您需要某些功能时,请务必仔细检查 HTML 本身是否尚未提供该功能。

signature
保持理智
评论

无权限

请登录后评论

RunPod公众号

赞助商

联系我们

QQ群:798695907

邮箱:laravel@88.com