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

1、不用js，教你只用纯html做出几个实用网页效果不用js，教你只用纯html做出几个有用网页效果在我们以往看到的页面效果中，无数效果是需要js搭配用法的，而今日在本文中，我将介绍如何用法纯html打造属于自己的有用效果。1. 折叠手风琴用法details和summary标签可以创建没有javascript代码的可折叠手风琴。效果： htmllanguages usedthis page was written in html and css. the css was compiled from sass. regardless, this could all be done in plain

2、html and csshow it worksusing the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element.css* font-size: 1rem; font-family: -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, san

3、s-serif; details border: 1px solid aaa; border-radius: 4px; padding: .5em .5em 0; summary font-weight: bold; margin: -.5em -.5em 0; padding: .5em; detailsopen padding: .5em; detailsopen summary border-bottom: 1px solid aaa; margin-bottom: .5em; 扫瞄器支持： 2. 进度条该meter和progress 的元素标签的基础上，你可以调节属性展现在屏幕上的进度

4、条。长进有两个属性：max和value校准进度条，而meter标签提供了更多的定制属性。效果： html:upload progress: at 50/100 file progress: 70% css:body margin: 50px; label padding-right: 10px; font-size: 1rem; font-family: -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, sans-serif; 扫瞄器支持： 3. 更多输入类型在定

5、义输入元素时，您要知道现代扫瞄器已经允许您指定足够多的输入类型了。除了你应当已经知道text，email，password，number这些类型外，还有下面的这些。date 将显示本机日期挑选器datetime-local 更丰盛的日期和时光挑选器month 友好的月份挑选器tel会让你输入一个电话号码。在移动扫瞄器上打开它，弹出的键盘将发生变幻，同样的email也是如此。search 将输入文本框设置为友好的搜寻样式。效果： html:enter date:enter date & time:enter month:search for:enter phone:css:inp

6、ut, label display:block; margin: 5px;input margin-bottom:18px;各种新输入类型的mdn文档十分广泛且信息量很大。此外，检查移动输入类型以了解用户在移动扫瞄器上时这些输入元素的键盘行为。4. 视频和音频video和audio元素虽然现在已经成为html规范的一部分，但是你一样会惊异于你可以用法video标签在屏幕上渲染出一个风光的视频播放器。 sorry, your browser doesn&39;t support embedded videos. there is nothing no code either good o

7、r bad, but thinking running it makes it so. css：del text-decoration: line-through; background-color: fbb; color: 555; ins text-decoration: none; background-color: d4fcbc; blockquote padding-left: 15px; line-height: 30px; border-left: 3px solid d7d7db; font-size: 1rem; background: eee; width: 200px;

8、6.更统一的引号因为中英文引号的不同，用法标志可以让您很好的解决这个问题，它可使你的内容在大多数扫瞄器上更全都地展现引号。 html： don corleone said i&39;m gonna make him an offer he can&39;t refuse. okay? i want you to leave it all to me. go on, go back to the party.don corleone said "i&39;m gonna make him an offer he can&39;t refuse.

9、okay? i want you to leave it all to me. go on, go back to the party."css：body margin: 50px; q font-style: italic; color: 000000bf; 7. 键盘标签标签应当是一个少为人知的冷门标签，但这个能用法更好的方式来解释组合键的样式。 html： i know that ctrl+c and ctrl+v a are like the most used key combinationscss：body margin: 50px; kbd display: i

10、nline-block; margin: 0 .1em; padding: .1em .6em; font-size: 11px; line-height: 1.4; color: 242729; text-shadow: 0 1px 0 fff; background-color: e1e3e5; border: 1px solid adb3b9; border-radius: 3px; box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px fff inset; white-space: nowrap; 8.用法html分享代码用法figcaption pre code标签，您可以用法纯html和css展