> 웹 프론트엔드 > HTML 튜토리얼 > HTML5에서 대화형 요소를 사용하는 방법

HTML5에서 대화형 요소를 사용하는 방법

php中世界最好的语言
풀어 주다: 2017-11-23 16:00:58
원래의
2022명이 탐색했습니다.

H5에서는 인터랙티브 요소가 사용자와 상호작용하는 요소인데, 이전 JS 컨트롤 효과와 달리 H5에서는 각주 숨기기, 표시 등 인터랙티브 요소가 많이 추가되었습니다.

<!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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿