不写JavaScript，教你只用纯HTML做出几个实用网页效果-优快云博客

本文链接：https://blog.youkuaiyun.com/codepony/article/details/117373355

本文介绍了如何仅使用HTML实现折叠手风琴、进度条、多种输入类型、视频音频播放、文本校对、统一引号、键盘标签以及代码分享等网页效果，无需JavaScript。详细展示了每个效果的HTML和CSS实现，并提到了浏览器支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

1. 折叠手风琴

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

效果：

HTML

<details>
<summary>Languages Used</summary>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p>
</details>

<details>
<summary>How it Works</summary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p>
</details>

CSS


* {
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

浏览器支持：