在我们以往看到的页面效果中，很多效果是需要JS搭配使用的，而今天在本文中，我将介绍如何使用纯HTML打造属于自己的实用效果。

 

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

 

　　效果：

 

　　HTML

 

　　CSS

 

　　浏览器支持：

 

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

 

　　效果：

 

　　HTML:

 

　　CSS:

 

　　浏览器支持：

 

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

 

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

 

　　效果：

 

　　HTML:

 

　　CSS:

 

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

 

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

 

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

 

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

 

　　浏览器支持：

 

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

 

　　示例：

 

　　HTML：

 

　　CSS：

 

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

 

　　HTML：

 

　　CSS：

 

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

 

　　HTML：

 

　　CSS：

 

　　如果大家对编程，web前端感兴趣，想要了解学习，打算深入了解这个行业的朋友，我们的前端学习扣qun :767273102，不论你是学生还是想转行的朋友，我都欢迎，不定期分享干货，网页制作，网站开发，web全栈开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系路线图】都有整理，分享给小伙伴：学习前端我们是认真的