转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，为开发者赋能。以往我们看到的页面效果中，很多效果都需要配合JS使用，而今天这篇文章，我将介绍如何使用纯HTML制作自己的实用效果。1.可折叠手风琴使用Details和Summary标签创建无需JavaScript代码的可折叠手风琴。Effect:HTMLLanguagesUsed
这个页面是用HTML和CSS写的。CSS是从SASS编译而来的。无论如何，这都可以用纯HTML和CSS完成
它是如何工作的
使用兄弟选择器和选中的选择器，我们可以确定兄弟的样式基于复选框输入元素的选中状态的元素。
文件进度：70%CSS:body{margin:50px;}label{padding-right:10px;字体大小：1rem；font-family:-apple-system,BlinkMacSystemFont,"SegoeUI",Roboto,Helvetica,Arial,sans-serif;}浏览器支持：3.更多输入类型定义输入元素时，你需要知道现代浏览器已经允许你指定足够的输入类型。除了您应该已经知道的文本、电子邮件、密码和数字类型之外，还有以下内容。date将显示本机日期选择器datetime-local更丰富的日期和时间选择器month友好的月份选择器tel将让您输入电话号码。在移动浏览器上打开它，弹出的键盘会发生变化，电子邮件也会发生变化。search将输入文本框设置为搜索友好的样式。效果：HTML:输入日期：输入日期和时间：输入月份：搜索：输入电话：CSS：输入，标签{显示：块;margin:5px;}input{margin-bottom:18px;}各种新输入类型的MDN文档内容广泛且内容丰富。此外，检查移动输入类型以了解用户在移动浏览器上时这些输入元素的键盘行为。4.视频和音频虽然视频和音频元素现在是HTML规范的一部分，但您会惊讶于您可以使用视频标签在屏幕上呈现像样的视频播放器。抱歉，您的浏览器不支持嵌入videos.video标签中一些值得注意的属性包括：下载视频时显示封面的海报URLpreload是否在页面加载时预加载整个视频autoplay视频是否在页面加载后自动播放浏览器支持：5.校对文本blockquote,del和ins元素标签在你想显示历史编辑和校对时派上用场。例子：HTML:nothingnocode无论好坏，但是thinkingrunningitmakes
CSS:del{text-decoration:line-through;背景色：#fbb；颜色：#555；}ins{文字装饰：无；背景色：#d4fcbc；}blockquote{padding-left：15px；行高：30px；border-left:3pxsolid#d7d7db;字体大小：1rem；背景：#eee；使用标签可以很好地解决这个问题，使您的内容在大多数浏览器中更一致地呈现引用。HTML：DonCorleone说我要给他一个他无法拒绝的条件。好的？我要你把一切都交给我。继续，回到派对上。
唐·柯里昂说
“我要给他一个他无法拒绝的提议。好吗？我要你离开它一切交给我。继续，回到派对上。”CSS:body{margin:50px;}q{font-style:italic;颜色：#000000bf;}7.键盘标签Labels应该是一个鲜为人知且冷门的标签，但这一个可以用更好的方式来说明组合键的风格。HTML:
我知道CTRL+C和CTRL+Va是最常用的键组合
CSS:body{margin:50px;}kbd{display:inline-block;边距：0.1em；填充：.1em.6em；字体大小：11px；行高：1.4；颜色：#242729；文本阴影：01px0#FFF；背景色：#e1e3e5；边框：1px实心#adb3b9；边界半径：3px；框阴影：01px0rgba（12,13,14,0.2），0002px#FFF插图；white-space:nowrap;}8.使用HTML共享代码使用figcaptionprecode标签，您可以使用纯HTML和CSS呈现漂亮的代码片段。HTML:
为名为“golden”的类定义一个csscolor属性.golden{color:golden;}
CSS:pre{background-color:#ffbdbd;}这篇文章就扔了，或许你有更多的私用技巧，不妨贴出来分享一下与大家。另外，如果不局限于上述效率，还希望有更完备的动态功能。例如：如果你想在你的页面中添加Excel功能，你可以试试纯前端表格控件SpreadJS，或者如果你想为用户提供更完整、更高效的前端UI控件，不妨试试WijmoJS。我相信他们可以为您的应用程序添加很多内容。
