不写JavaScript，教你只用纯HTML做出几个实用网页效果

在我们以往看到的页面效果中，很多是需要JS搭配使用的，那如果不写JS你知道如何实现吗？

在本文中，将介绍如何使用纯HTML打造属于自己的实用网页效果。

1. 折叠手风琴

使用Details和Summary标签可以创建没有JavaScript代码的可折叠手风琴。

效果：

HTML

CSS

浏览器支持：

2. 进度条

该Meter和Progress 的元素标签的基础上，你可以调整属性呈现在屏幕上的进度条。进步有两个属性：max和value校准进度条，而Meter标签提供了更多的定制属性。

效果：

HTML:

CSS:

浏览器支持：

3. 更多输入类型

在定义输入元素时，您要知道现代浏览器已经允许您指定足够多的输入类型了。除了你应该已经知道text，email，password，number这些类型外，还有下面的这些。

• date 将显示本机日期选择器
• datetime-local 更丰富的日期和时间选择器
• month 友好的月份选择器
• tel会让你输入一个电话号码。在移动浏览器上打开它，弹出的键盘将发生变化，同样的email也是如此。
• search 将输入文本框设置为友好的搜索样式。

效果：

HTML:

CSS:

各种新输入类型的MDN文档非常广泛且信息量很大。此外，检查移动输入类型以了解用户在移动浏览器上时这些输入元素的键盘行为。

4. 视频和音频

video和audio元素虽然现在已经成为HTML规范的一部分，但是你一样会惊讶于你可以使用video标签在屏幕上渲染出一个体面的视频播放器。

视频标记中值得注意的一些属性包括：

• poster 下载视频时要显示封面的URL
• preload 是否在页面加载时预加载整个视频
• autoplay 视频是否应该在页面加载后自动播放

浏览器支持：

5. 校对文本

当你想显示历史编辑及校对的情况时，blockquote，del和ins元素标签可以派上用场了。

示例：

HTML：

CSS：

6.更统一的引号

由于中英文引号的不同，使用<q>标记可以让您很好的解决这个问题，它可使你的内容在大多数浏览器上更一致地呈现引号。

HTML：

CSS：

7. 键盘标签

<kbd>标签应该是一个少为人知的冷门标签，但这个能使用更好的方式来说明组合键的样式。

HTML：

CSS：

8.使用HTML共享代码

使用figcaption pre code标签，您可以使用纯HTML和CSS呈现出不错的代码片段。

HTML：

CSS：

这篇文章也只是抛砖引玉，如果您有更多私藏的使用技巧，不妨也贴出来分享给大家。同时欢迎访问葡萄城的原博客与我交流。

另外，如果您不仅仅限于以上的效率，希望有更完整的动态功能。如：您希望在您的页面中加入Excel功能，不妨尝试纯前端表格控件SpreadJS，相信它能为您的应用增色不少。

原文出处：https://blog.bitsrc.io/pure-html-widgets-for-your-web-application-c9015563af7a