ホームページ > 記事 > ウェブフロントエンド > HTML5でインタラクティブ要素を使用する方法

HTML5でインタラクティブ要素を使用する方法

php中世界最好的语言オリジナル: 2017-11-23 16:00:581964ブラウズ

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 中国語 Web サイトの他の関連記事にご注目ください。