html5 세부정보 태그의 역할은 무엇인가요? <details> 태그 사용 소개(사용 예 포함)-H5 튜토리얼-php.cn

html5 세부정보 태그의 역할은 무엇인가요?

태그 사용 소개(사용 예 포함)

寻∝梦

풀어 주다： 2018-08-22 13:58:57

원래의

9211명이 탐색했습니다.

html5 세부정보 태그의 기능은 무엇이며

태그를 사용하는 방법은 무엇인가요? 자세한 내용은 본 글에서 소개한 html 세부정보 태그의 정의와 사용법, 그리고 html5 세부정보 태그

html5

태그의 구체적인 사용방법을 살펴보겠습니다. :

HTML5의 새로운 태그를 사용하면 확장 가능하고 접을 수 있는 요소를 만들어 텍스트나 제목에 숨겨진 정보를 포함할 수 있습니다.

태그는 문서의 세부정보나 문서의 특정 부분을 설명하는 데 사용됩니다.

태그는 사용자의 표시되거나 숨겨진 요구사항에 대한 추가 세부정보를 지정합니다.

태그는 사용자가 대화형 컨트롤을 열고 닫는 데 사용됩니다. 모든 형태의 콘텐츠를

태그 안에 넣을 수 있습니다.

요소의 내용은 open 속성이 설정되지 않은 이상 사용자에게 표시되지 않습니다.

html5

태그 사용 방법:

일반적으로 세부정보는 페이지에 표시되는 콘텐츠를 추가로 설명하는 데 사용됩니다. 표시되는 효과는 jQuery 아코디언 플러그인의 효과와 유사합니다.

대략적인 글은 다음과 같습니다.

<details>
<summary>Google Nexus 6</summary>
<p>商品详情：</p>
<dl>
<dt>屏幕</dt>
<dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
<dt>电池</dt>
<dd>3220 mAh</dd>
<dt>相机</dt>
<dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
<dt>处理器</dt>
<dd>Qualcomm? Snapdragon? 805 processor</dd>
</dl>
</details>

로그인 후 복사

첫 번째는

태그이고, 그 다음에는

라는 제목이 붙습니다. 여기에 있는 내용은 일반적으로 짧고 요약되어 페이지에 표시됩니다. 그런 다음 모든 유형의 HTML 요소를 세부 콘텐츠로 따를 수 있으며, 이는

를 클릭할 때만 표시됩니다.

details는 h5의 새로운 대화형 요소입니다. 세부정보는 요약 태그와 함께 사용하여 세부정보 제목을 정의할 수 있습니다. 기본적으로 세부정보 태그의 콘텐츠는 표시되지 않습니다. 사용자가 제목을 클릭하면 세부정보가 표시됩니다.

details 태그의 출현으로 더 나은 사용자 경험이 제공되었습니다. 이러한 축소 및 확장 효과를 달성하기 위해 JS를 작성할 필요가 없습니다.

details에는 요약이라는 하위 태그가 새로 추가되었습니다. 요약 태그의 콘텐츠 텍스트를 마우스로 클릭하면 세부정보 태그의 다른 모든 요소가 확장되거나 축소됩니다.

html5 detalis tag예 1:

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一练之details标签的应用</title> 
    </head>     
    <body> 
        <details> 
                <summary>HTML5|CSS3|PHP | PHP中文网(php.cn)!</summary> 
                <p>PHP中文网,WEB前端开发论坛,教程资源完全免费PHP网站，打造最好的编程网站</p> 
        </detalis> 
    </body> 
</html>

로그인 후 복사

세부정보에 요약 태그가 없으면 어떻게 되나요? 실제로 세부정보 요소에 요약 태그가 없으면 브라우저는 구문 분석 시 기본 텍스트를 제공합니다. "세부정보 보기"와 같은 현지화된 텍스트의 경우 브라우저는 위쪽 및 아래쪽 화살표와 같은 아이콘도 제공합니다. 예를 들어 다음 사례 2는 summary 하위 태그가 존재하지 않는 예입니다.

예제 2:

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一练之details展开收缩标签的应用</title> 
    </head> 
    <body> 
        <details> 
                <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛</p> 
        </details> 
    </body> 
</html>

로그인 후 복사

때때로 detalis의 콘텐츠를 기본적으로 확장해야 하는 경우 어떻게 해야 할까요?

사실 HTML5는 이미 우리를 위해 생각되어 왔습니다. 필요한 경우 사례 3과 같은 속성만 추가하면 됩니다.

html5 세부정보 태그의 역할과 Open 속성의 사용법:

케이스 1의 코드를 다음과 같이 수정하세요.

예제 3:

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一练之details展开收缩标签的应用</title> 
    </head> 
    <body> 
        <details open> 
                <summary>HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!</summary> 
                <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛</p> 
        </details> 
    </body> 
</html>

로그인 후 복사

HTML5가 실제로 우리에게 많은 것을 가져다주었다는 것을 알 수 있습니다. 편리함.

html5 세부사항 태그의 역할 및 세부사항 태그의 공통 속성 사용:

open: 값은 공개이며 세부사항 표시 여부를 정의하는 기능입니다.

subject: 값은 sub_id이며 해당 요소에 해당하는 프로젝트의 ID 번호를 설정하는 기능입니다.

draggable: 값은 true 또는 false입니다. 이 기능은 요소를 드래그할 수 있는지 여부를 설정하는 것입니다. 기본값은 false입니다.

간단한 세부정보 예:

html5 세부정보 태그의 역할은 무엇인가요? <details> 태그 사용 소개(사용 예 포함)

현재 Chrome 및 Safari 6에서만

태그를 지원합니다.

개인적으로 세부정보 태그는 앞으로 더 많은 브라우저에서 지원되어야 한다고 생각합니다. 왜냐하면 그 모양새가 초보자에게 훨씬 더 편리하기 때문입니다. 지금 자세히 알아보고 나면 자유롭게 사용할 수 있기 때문입니다. 이것이 바로 이 기사의 내용입니다. 질문이 있으시면 아래에서 질문하실 수 있습니다.

【개인 관련 추천】

html em 태그의 기능은 무엇인가요? 태그와 태그의 차이점

html5 테이블 태그 스타일 소개(첨부된 내용은 html5 테이블 CSS 센터링 예시입니다)

위 내용은 html5 세부정보 태그의 역할은 무엇인가요?

태그 사용 소개(사용 예 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!