12 个简单的 HTML 代码片段，避免使用复杂的库

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

本文提醒您，如果您希望它看起来漂亮，那么只需使用原始HTML和一点CSS就可以做很多事情。

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

我还创建了 12 个独立的Codepens，以便您可以亲身体验并试用这些示例。

🎨 颜色选择器

在开发人员工作流程中，您可能经常希望访问色谱并能够从中挑选出任何色调。

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

📚 区块引用

撰写文章时，您可能想要突出显示一些您最喜欢的引语。

你可以使用<blockquote>标签来实现这一点。添加一些自定义样式，就能得到一个美观的元素，让它从其他文本中脱颖而出。

🎵 音频播放器

从零开始编写自己的音频播放器可能颇具挑战性。您可以使用内置<audio>标签，它提供了播放音频文件的基本功能。

此外，您还可以在这里听到我的更多音乐。

📺 视频播放器

您可以在项目中使用的另一种多媒体是视频。同样，您不能只是在 HTML 中添加视频链接，然后指望它能够播放。

为了正确播放视频，您可以使用内置<video>标签。

🔷 手风琴

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

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

📅 日期选择器

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

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

⚪ 滑块

滑块是一个常见的组件，用于收集特定数字范围内的用户输入。

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

✍ 内容编辑器

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

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

📷 图片标签

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

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

⌛ 进度条

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

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

🔻 下拉菜单

通常，您可能需要收集包含多种可能选项的用户输入。与其将所有选项都列在屏幕上，不如将它们包含在下拉列表中。

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

💭 工具提示

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

HTML 内置title属性默认提供该功能。

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

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

写作一直是我的热情所在，能够帮助和激励他人让我感到快乐。如有任何疑问，欢迎随时联系我们！

在Twitter、LinkedIn和GitHub上联系我！

查看我的所有项目组合。