HTML5 버전의 기능 중 하나인 내비게이션 태그라는 점에서 HTML에는 프런트엔드 기술을 부각시키는 많은 기능이 있습니다. 이전 버전에서는 Html의 기능이 다르지만 Html 5에서는 Navigation이 전역 속성과 이벤트 속성을 지원합니다.
구문:
각 HTML 태그에는 탐색 태그의 기본 구문인 다음 코드와 같은 별도의 구문이 있습니다. 우리는
HTML
<nav> < a href="/" /> ------------------- </nav>
CSS
nav{
--some codes—
}사용자는 웹페이지의 탭이나 메뉴를 클릭한 후 요청을 보냅니다. 서버의 응답에 따라 결과 웹 페이지가 사용자에게 표시되도록 다른 페이지로 이동합니다. HTML과 마찬가지로
하나의 HTML 페이지 문서에는 웹페이지 메뉴/탭을 기반으로 하는 여러 개의 링크가 포함될 수 있습니다. HTML에서 탐색에는 일반적으로 가로 탐색과 세로 탐색이라는 두 가지 유형이 포함됩니다. 기본적으로 수평 탐색은 사용자 요구 사항에 따라 로드되어 수직 또는 기타 사용자 요구 사항 유형으로 변환됩니다.
위 그림은 내비게이션 링크를 통한 사용자 화면의 기본 이해입니다. 사용자가 브라우저 웹페이지 링크를 통해 홈 링크를 클릭하는 것은 Html 태그일 뿐입니다. 예) 특정 웹페이지를 거치게 되며 프로젝트에 따라 클라이언트측 페이지 또는 서버측 페이지가 되며 사용자 브라우저 화면에 홈 페이지가 표시됩니다.
다음은 HTML 탐색 태그의 예입니다.
<html> <body> <nav> <a href="/home/">Home</a> | <a href="/contactus/">Contact Us</a> | <a href="/about us/">About US</a> </nav> </body> </html>
출력:
<html>
<head>
<style>
nav {
border:2px;
background-color:#090;
color:green;
padding:5px;
}
n {
color:white;
font-size:10px;
}
.n1{
font-size:20px;
color:#090;
font-weight:bold;
text-align:center;
}
.n2 {
text-align:center;
color:#090;
margin:20px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="n1">First</div>
<div class="n2">Second</div>
<nav>
<a href="/home/">Home</a> |
<a href="/contactus/">Contact Us</a> |
<a href="/about us/">About US</a>
</nav>
</body>
</html>출력:
<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 50%;
width: 3;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.6s;
}
.sidenav n {
padding: 5px 8px 7px 22px;
font-size: 23px;
color: #818181;
transition: 0.6s;
}
.sidenav n:hover {
color: #f1f1f1;
}
.sidenav .close{
position: absolute;
top: 0;
right: 20px;
font-size: 18px;
margin-left: 40px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav n {font-size: 18px;}
}
</style>
</head>
<body>
<div id="first" class="sidenav">
<a href="javascript:void(0)" class="close" onclick="cN()">×</a>
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">About US</a>
</div>
<h2>Sample</h2>
<span style="font-size:20px;cursor:pointer" onclick="oN()">☰ click</span>
<script>
function oN() {
document.getElementById("first").style.width = "300px";
}
function cN() {
document.getElementById("first").style.width = "1";
}
</script>
</body>
</html>출력:
이전 사례와 비교했을 때 사용자의 관심을 끌기 위해 내비게이션에 일부 애니메이션을 사용했습니다.
일반적으로 와 같은 HTML 태그에서 고려해야 할 여러 가지 유형의 메뉴와 관용구가 있습니다. 및 (앵커) 요소가 있으며 모두 닫혀 있어야 합니다. 대부분의 탐색 메뉴는 목록을 사용하여 만들 수 있습니다. 때로는 사용자 종속성을 기반으로 인터페이스 제한이 사용됩니다.
목록 기반 탐색 메뉴는 다음과 같습니다.
웹페이지의 다른 섹션을 가리키는 단일 페이지 링크에 대한 표 또는 내용입니다.
예
<nav> <a href="/home/">Home</a> | </nav>
웹 페이지에서 가장 흔히 볼 수 있는 메뉴 유형입니다. 사이트의 계층 구조에서 선택할 수 있는 옵션을 표시하는 사이트 또는 하위 집합의 사용자 지정 또는 사용자 정의 메뉴 유형입니다.
예
<nav> <ul> <li><a href="/home/">Home</a> </li> <li><a href="/about us/">About Us</a> </li> <li><a href="/contact us/">Contact Us</a> </li> </nav>
문서의 내용을 구성하는 링크로, html 문서의 현재 페이지와 관련된 추가 정보를 제공합니다. 이 메뉴의 예로는 일부 뉴스 기사, 은행 사이트 등이 있습니다. 웹 페이지 애플리케이션에서 볼 수 있는 모든 것에는 탭이나 메뉴에 마우스 커서를 놓은 탐색 패널이 포함되어 있습니다. 메뉴의 툴팁 내용처럼 표시됩니다.
페이지 매김에서 때때로 사용자가 메뉴나 탭을 클릭한 후 프런트 엔드 화면에 로드할 대량의 파일 세트에 대해 웹 페이지가 백엔드로 구성되는 것을 보았습니다. 이 옵션을 사용하여 별도의 페이지로 분할합니다. 내비게이션과 비교할 때 일반적으로 동일한 문서의 백엔드와 연결되어 동일한 웹 페이지에 더 많은 옵션이나 추가 정보가 표시된다는 점에서 다릅니다.
마지막으로 일반적으로 HTML의 모든 버전에 서로 다른 기능 세트가 있다는 결론이 나왔습니다. HTML 4는
위 내용은 HTML 탐색 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
