HTML 탐색 요소

탐색 요소

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

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

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

참고:

• HTML 문서에 언급된 모든 링크는
  요소; 주요 탐색 블록만 포함됩니다. 웹사이트 바닥글의 링크를 정의하는 데에도 사용할 수 있지만

  태그는 이런 경우에 주로 사용됩니다.
• HTML 요소는

  요소.
• HTML5의 Nav 태그에는 시작 태그와 끝 태그가 모두 필요합니다. 예:
  ……..

구문:

HTML/XHTML

<nav> ... </nav>

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 요소에서는 단일 의미 요소의 링크 그룹을 사용하여 체계적인 웹사이트를 만드는 데 도움이 됩니다.

<title>HTML Nav tag</title>


<header>
<h1 id="About-Us">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>

Output:

Example #2

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

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


<h1 id="Example-of-the-HTML-nav-tag">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>

Output:

Example #3

Tables of contents and menus are good examples of

HTML element.

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


<h1 id="Dropdown-menu-with-the-HTML-nav-tag">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="#%22">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="#%22">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
</ul>
</nav>

Output:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!