HTML 탐색 요소-HTML 튜토리얼-php.cn

<nav> 사용 태그

예

예시 #1

Example #3

Conclusion- Html Nav Element

집

웹 프론트엔드

HTML 튜토리얼

HTML 탐색 요소

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:24 PM

html html5 HTML Tutorial HTML Properties HTML tags

탐색 요소

HTML 문서 내의 태그는 동일한 문서나 다른 문서 내에 포함된 탐색 링크 블록을 지정하는 데 사용됩니다. 탐색 블록을 보여주는 예로는 색인, 목차, 메뉴 등이 있습니다. HTML 문서에는 필요한 만큼

사이트 탐색, 페이지 내 탐색 등과 같은 태그입니다.

태그는 HTML 문서 내의 탐색 섹션을 선언하는 데에도 사용됩니다. 대부분의 웹사이트는 일반적으로 사용자가 사이트를 탐색할 수 있는 탐색 링크 전용 섹션을 선호합니다. 이러한 링크는 탐색 태그 내에 배치될 수 있습니다. 이번 주제에서는 Html Nav Element에 대해 알아보겠습니다.

참고:

HTML 문서에 언급된 모든 링크는
요소; 주요 탐색 블록만 포함됩니다. 웹사이트 바닥글의 링크를 정의하는 데에도 사용할 수 있지만
태그는 이런 경우에 주로 사용됩니다.
HTML 요소는
요소.
HTML5의 Nav 태그에는 시작 태그와 끝 태그가 모두 필요합니다. 예:
……..

구문:

HTML/XHTML

<body>
<nav> ... </nav>
<body>

로그인 후 복사

CSS

nav{
--your css code—
}

로그인 후 복사

사용 태그

태그는 페이지나 섹션 상단의 기본 메뉴와 같은 기본 탐색 영역에 사용됩니다. 문서에는 여러 개의

요소(예: 사이트 탐색용 하나, 페이지 내 탐색용 하나 등)

태그는 ul 목록 내의 코드이거나 ul 요소 없이 별도의 링크로 간단히 코딩될 수 있습니다. 이 태그를 사용하면 탐색 메뉴, 텍스트 링크의 깔끔한 가로 메뉴, 도움말 화면 읽기 소프트웨어 등을 훨씬 쉽게 만들어 문서의 기본 탐색 영역을 올바르게 식별할 수 있습니다.

태그별 속성

와 함께 사용할 특정 속성이 없습니다. 태그.

전역 속성

다른 모든 HTML 태그와 마찬가지로

태그는 HTML5의 전역 속성도 지원합니다.

다음은 전역 속성입니다.

중단
자동완성 시
자동완성오류 발생시
흐릿하게
취소
온캔플레이
재생 가능
변경,
클릭,
마무리
컨텍스트 메뉴
온큐체인지
온디블클릭
온드래그
온드래젠드
온드라젠터
온드래지시트,
온드라글리브
온드래그오버,
드래그스타트
온드롭
기간변경,
비웠어요
종료되었습니다
오류 발생
온포커스
입력입력,
잘못되었습니다
온키다운
키를 누르면
온키업
로드,
로드된 데이터,
로드된 메타데이터,
온로드스타트
마우스다운시
마우스엔터
마우스를 떠나세요
마우스무브
마우스아웃
마우스를 올리면
온마우스업
마우스휠
일시중지
온플레이
플레이 중
진행 중
요율 변경,
재설정 중
크기 조정,
스크롤
찾아왔습니다
찾아가세요
선택 중
온쇼
정렬
설치했습니다
제출,
중단,
정시 업데이트
전환,
볼륨변경
대기 중

이벤트 속성

와 함께 사용할 이벤트 속성이 없습니다. 태그.

의 CSS 텍스트 서식 속성 태그:

텍스트 색상
텍스트 정렬
텍스트 장식
텍스트 변환
줄 높이
텍스트 방향
텍스트 그림자
단어 간격

의 CSS 글꼴 속성 태그

글꼴 스타일 – 일반|이탤릭체|사선|초기|상속
글꼴 변형 – 일반|작은 대문자|초기|상속
글꼴 두께 – 보통|굵게|굵게|가벼워|숫자|초기|상속
글꼴 크기 – 중간|xx-소형|x-소형|소형|대형|x-대형|xx-대형|소형|대형|길이|초기|상속
글꼴-가족 – 가족 이름|일반-가족|초기|상속

에 대한 CSS 테스트 섀도우 속성 태그

<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style>

로그인 후 복사

예

아래에 언급된 예시는 다음과 같습니다

예시 #1

의 도움으로 HTML 요소에서는 단일 의미 요소의 링크 그룹을 사용하여 체계적인 웹사이트를 만드는 데 도움이 됩니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML Nav tag</title>
</head>
<body>
<header>
<h1>About Us</h1>
</header>
<nav>
<a href="https://www.educba.com/about-us/">Who is EDUCBA?</a> |
<a href="https://www.educba.com/careers/">Careers</a> |
<a href="https://www.educba.com/instructors/">Become an instructor</a> |
<a href="https://www.educba.com/how-it-works/">How does it work?</a> |
</nav>
</body>
</html>

로그인 후 복사

Output:

HTML 탐색 요소

Example #2

HTML Tag helps the users navigate to the main sections of the website.

<!DOCTYPE html>
<html>
<head>
<style>
nav{
display:flex;
flex-wrap:wrap;
}
nav a {
text-decoration: none;
display:block;
padding: 15px 25px;
text-align: center;
background-color: rgb(213, 216, 220);
color:#566573;
font-family:sans-serif;
}
nav a:hover {
background-color: #566573;
color:#ffffff;
}
</style>
</head>
<body>
<h1>Example of the HTML nav tag:</h1>
<nav>
<a href="https://www.educba.com/about-us/">About</a>
<a href="https://www.educba.com/tutorials/">Tutorials</a>
<a href="https://www.educba.com/courses/">Certification Courses</a>
</nav>
</body>
</html>

로그인 후 복사

Output:

HTML 탐색 요소

Example #3

Tables of contents and menus are good examples of

HTML element.

<!DOCTYPE html>
<html>
<head>
<style>
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul:after {
clear: both;
display: block;
}
nav ul li {
float: left;
position:relative;
list-style-type:none;
}
nav ul li:hover {
background: rgb(52, 73, 94);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 20px 30px;
color: #ffffff;
text-decoration: none;
background-color:rgb(40, 55, 71 );
font-family: sans-serif;
}
nav ul ul {
background: #5f6975;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 10px;
color: #ffffff;
text-transform: uppercase;
}
nav ul ul li a:hover {
background: rgb(27, 38, 49);
}
</style>
</head>
<body>
<h1>Dropdown menu with the HTML nav tag:</h1>
<nav>
<ul>
<li>
<a href="https://www.educba.com/about-us/">About</a>
<ul>
<li>
<a href="#">Reviews</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">About Us</a>
</li>
</ul>
</li>
<li>
<a href="https://www.educba.com/tutorials/">Tutorials</a>
<ul>
<li>
<a href="#">Finance</a>
</li>
<li>
<a href="#">Data Science</a>
</li>
<li>
<a href="#">Sofware Development</a>
</li>
<li>
<a href=#">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
<li>
<a href="https://www.educba.com/courses/">Certification Courses</a>
<ul>
<li>
<a href="#">Finance</a>
</li>
<li>
<a href="#">Data Science</a>
</li>
<li>
<a href="#">Sofware Development</a>
</li>
<li>
<a href=#">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>

로그인 후 복사

Output:

HTML 탐색 요소

Browser Support: The section tag is being new in HTML5, and it is being supported in the browser, which is listed below:

Google Chrome 6.0
Internet Explorer 9.0
Firefox 4.0
Opera 11.1
Safari 5.0

Conclusion- Html Nav Element

Below are mentioned some of the main key points which you should remember from this topic:

The
element in HTML5 represents a section of the page whose entire purpose is to provide navigational links, either in the same document or any other document. The links in the
element can point to other webpages or to different sections of the same webpage. Common examples of the nav elements are tables, menus, indexes, and contents.
The
HTML element can use for the primary navigation of the structure.
Some developers might use the
HTML element for breadcrumbs and paginations.
Essentially, it is your own perception of how to use the
element within your HTML document.
The
HTML element is a block-level element.

위 내용은 HTML 탐색 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1666

Cakephp 튜토리얼

1425

라라벨 튜토리얼

1324

PHP 튜토리얼

1272

C# 튜토리얼

1251

Related knowledge

HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까? Feb 07, 2025 am 11:57 AM

이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다