html5에서 탐색 모음을 작성하는 데 사용되는 요소는 무엇입니까?
- 青灯夜游원래의
- 2022-12-12 18:38:573550검색
Html5는 탐색 요소를 사용하여 탐색 모음을 작성합니다. nav 요소는 탐색 링크를 정의하는 데 사용되는 탐색 요소입니다. 탐색 속성이 있는 링크는 페이지 요소의 의미를 더 명확하게 만들기 위해 영역에 요약될 수 있습니다. nav 요소는 다음에서 사용할 수 있습니다. 1. 웹사이트의 다른 기본 페이지로 이동하는 기능을 가진 기존 탐색 모음 2. 현재 기사나 현재 제품 페이지를 다른 기사나 다른 제품으로 이동하는 것이 목적인 사이드바 탐색 3. 이 페이지의 주요 구성 요소 사이를 이동하는 데 사용되는 페이지 내 탐색.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
HTML5 nav 요소(navigation 요소)
nav 요소는 탐색 링크를 정의하는 데 사용됩니다. HTML5의 새로운 요소입니다. 이 요소는 페이지 요소의 의미를 하나의 영역에 있는 탐색 속성으로 요약할 수 있습니다. 더 명확합니다. 탐색 요소는 사이트의 다른 페이지나 현재 페이지의 다른 부분에 연결할 수 있습니다. 예를 들어, 다음 샘플 코드는 다음과 같습니다.
<nav>
<ul>
<li><a href="#">首页</li>
<li><a href="#">公司概况</li>
<li><a href="#">产品展示</li>
<li><a href="#">联系我们</li>
</ul>
</nav>위 코드에서 탐색 구조는 nav 요소 내에 순서가 지정되지 않은 목록 ul을 중첩하여 구축되었습니다. 일반적으로 HTML 페이지에는 전체 페이지 또는 여러 부분에 대한 탐색으로 여러 탐색 요소가 포함될 수 있습니다. (학습 영상 공유: 웹 프론트엔드)
구체적으로 nav 요소는 다음과 같은 상황에서 사용될 수 있습니다.
기존 탐색 모음: 현재 주류 웹사이트에는 다양한 수준의 탐색 모음이 있으며, 그 기능은 웹사이트의 다른 기본 페이지로 이동하는 것입니다.
사이드바 탐색: 현재 주류 블로그 웹사이트와 전자상거래 웹사이트에는 현재 기사나 현재 제품 페이지를 다른 기사나 다른 제품 페이지로 이동할 목적으로 사이드바 탐색 기능이 있습니다.
페이지 내 탐색: 이 기능은 이 페이지의 주요 구성 요소 사이를 이동하는 것입니다.
페이지 넘기기 작업: 페이지 넘기기 작업은 웹 페이지의 콘텐츠 부분을 전환합니다. "이전 페이지" 또는 "다음 페이지"를 클릭하여 전환하거나 실제 페이지 번호를 클릭하여 특정 페이지로 이동할 수 있습니다. .
위 사항 외에도 nav 요소는 다른 중요하고 기본적인 탐색 링크 그룹에서도 사용할 수 있습니다.
모든 링크 그룹을 탐색 요소에 넣을 필요는 없으며 기본 링크와 기본 링크만 탐색 요소에 넣을 필요가 있다는 점에 유의해야 합니다.
예를 들어 바닥글 하단에 저작권 표시가 있는 경우 nav 요소를 사용하지 않는 것이 가장 적합합니다. 페이지에서 여러 nav 요소를 전체 또는 다른 부분으로 탐색으로 사용할 수 있습니다. nav 요소 사용법
<body> <h1>nav的使用方法</h1> <nav> <ul> <li> <a href=”nav元素.html”>首页</a> </li> <li> <a href=”aside元素.html”>aside</a> </li> <li> <a href=”section元素.html”>section</a> </li> </ul> </nav> </body>Nav 요소 효과 데모 그림은 다음과 같습니다.
다단계 중첩을 원하는 경우 , 다음으로 새로운 독립 블록을 생성하고 기사를 사용할 수 있습니다. 
<article> <header> <h2>NAV-1</h2> <nav> <li> <a href=”section元素.html”>section</a> </li> <li> <a href=”新增的主体结构元素.html”>s新增的主体结构元素</a> </li> </header> </article>//这就实现了一层的嵌套 <article> <header> <h2>NAV-1</h2> <nav> <li> <a href=”section元素.html”>section</a> </li> <li> <a href=”新增的主体结构元素.html”>s新增的主体结构元素</a> </li> </header> </article>Nav 다층 중첩 효과 시연 사진:
하단에 저작권 정보가 있으면 바닥글에 추가하는 것이 좋습니다.
<footer> <p> <a href=”/”>版权信息</a> <a href=”/”>站点帮助</a> <a href=”/”>联系我们</a> </p> </foooter>바닥글 렌더링은 다음과 같습니다.
nav 요소 요약 방법
1. 기존 탐색 모음
Tencent를 예로 들어 보겠습니다.2.
3. 내부 페이지 탐색
(학습 영상 공유:
웹 프론트엔드)
위 내용은 html5에서 탐색 모음을 작성하는 데 사용되는 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!