首頁 >web前端 >html教學 >html5裡互動元素的使用方法

html5裡互動元素的使用方法

php中世界最好的语言
php中世界最好的语言原創
2017-11-23 16:00:581984瀏覽

在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 c787b9a589a3ece771e842a6176cf8e9標籤怎麼用

html 的1aa9e5d373740b65a0cc8f0a02150c53標籤需要怎麼使用

##############################################################################################

以上是html5裡互動元素的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn