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

这篇文章是一个提醒，如果你想让它看起来漂亮，你可以用普通的 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 本身是否尚未提供该功能。