html5里交互元素的使用方法-html教程-PHP中文网

html5里交互元素的使用方法

php中世界最好的语言

发布： 2017-11-23 16:00:58

原创

2291人浏览过

在h5里，交互元素就是和用户进行互动的元素，这一部分非常的重要，并且和之前的js控制的效果不同，h5相比于html增加了很多的交互元素，比如隐藏显示注脚就是其中的一个交互效果。

<!DOCTYPE html>
<html>
<head>
       <meta charset="UTF-8">
       <title>交互元素<details>的使用</title>
       <style type="text/css">
              body{
                     font-size: 12px;
              }
              span{
                     font-weight: bold;
              }
              details{
                     overflow: hidden;
                     height: 0;
                     padding-left: 200px;
                     position: relative;
                     display: block;
              }
              details[open]{
                     height: auto;
              }
       </style>
</head>
<body>
       <span>隐藏脚注</span>
       <details open="open">
              本页面生成于 2016-010-21
       </details>
       <!--<span>显示注脚</span>
       本页面生成于 2016-010-21
       <details open="open">
       </details>
-->
</body>
</html>

登录后复制

html5里交互元素的使用方法就这么多，相信我们介绍之后你已经了解了不少。更多精彩请关注php中文网其它相关文章！

相关阅读：

为什么要对DIV设置CSS样式？

HTML5 <nav>标签怎么用

移动端UI&微信UI YDUI Touch

YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。