집 >웹 프론트엔드 >H5 튜토리얼 >html5 새 태그--nav 태그 소개

html5 새 태그--nav 태그 소개

青灯夜游원래의: 2018-09-11 15:39:314538검색

nav 요소 태그는 HTML5에 추가된 새로운 태그입니다. 이 장에서는 HTML5의 새로운 태그인 nav 태그에 대해 소개합니다. 이는 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참조할 수 있기를 바랍니다.

우선 nav도 html5의 새로운 요소 태그입니다. 동시에 다른 새로운 태그와 마찬가지로 nav는 이전 버전 HTML5의 전통적인 HTML 레이아웃에서 탐색 표시줄과 관련된 공통 이름으로 사용됩니다.

예:

<div class=”nav”>网站导航内容</div>

또는

<div id=”nav”>网站导航内容</div>

HTML5에서는 이전에 일반적으로 사용되었던 nav라는 이름이 특별히 새 태그 요소로 사용됩니다. 이 태그는 탐색 레이아웃에 자주 사용됩니다.

1. HTML 탐색 태그 구문 및 구조

1. 기본 구문

<nav>内容</nav>

# 🎜🎜#2, nav plus id

<nav id=”abc”>内容</nav>

3, nav plus class

<nav class=”abc”>内容</nav>

4, nav tag 빠른 이해 및 숙달

Nav 관련 탐색 관련성이 있으므로 일반적으로 웹사이트 탐색 레이아웃에 사용됩니다. 동시에 c787b9a589a3ece771e842a6176cf8e9 태그는 div 태그 및 span 태그를 사용하여 id 또는 class를 추가하는 것과 동일하게 사용할 수 있습니다. div 태그와의 차이점은 이 태그는 일반적으로 탐색 관련 위치에서만 사용된다는 것입니다. html 웹페이지 내비게이션 바의 레이아웃이나 내비게이션 바와 관련된 레이아웃에 사용될 수 있습니다.

5. nav는 어떤 태그와 함께 사용해야 하나요?

DIVCSS5는 이전 기사 튜토리얼에서 일반 탐색 모음이 ul li 레이블 레이아웃을 사용하고, nav 레이블을 사용한다고 소개했습니다. 일반 레이아웃에서는 ul li 라벨과 함께 사용됩니다.

소형 사례는 다음과 같습니다: 1), 기존 HTML 레이아웃

<div id=”nav”>
			<ul>
				<li>首页</li>
				<li>栏目名称</li>
				<li>联系我们</li>
			</ul>
		</div>

2), 탐색 태그 뒤 #🎜🎜 #

<nav>
<ul>
<li>首页</li>
<li>栏目名称</li>
<li>联系我们</li>
</ul>
</nav>

위의 HTML 레이아웃을 HTML5로 변환하는 것은 실제로 html nav 태그의 사용과 ul li를 사용한 레이아웃 탐색 표시줄의 기술을 이해하기 매우 쉽습니다.

2. 호환성 팁 c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f 5개의 새로운 태그는 IE8 이하 IE 브라우저(IE8, IE7, IE6)에서는 지원되지 않으므로 필요에 따라 레이아웃 HTML을 선택하세요.

3. HTML 탐색 CSS 레이아웃 사례 기존 div 레이아웃과 탐색 레이아웃 비교 및 학습 , HTML CSS 레이아웃의 탐색 구문과 사용법을 익히기 위해.

다음 DIVCSS5를 사용하면 각각 세 가지 레이아웃 실습을 통해 탐색 레이아웃을 마스터할 수 있습니다.

1), 기존 div+ul+li 레이아웃 탐색 스타일

# 🎜 🎜#2), nav+ul+li 레이아웃 탐색 스타일

3) 그런 다음 nav+ul+li 레이아웃을 기반으로 nav에 대한 클래스 CSS 스타일을 설정합니다.

통과 위의 사례를 통해 nav는 일반적으로 ul li와 함께 사용되거나 탐색과 관련된 레이아웃에 직접 사용되는 동시에 div처럼 CSS를 직접 설정하거나 클래스 또는 ID를 추가할 수 있다는 것을 모두가 이해할 수 있습니다.

구체적인 사례는 다음과 같습니다.

1 기존 div CSS 레이아웃 및 NAV CSS 레이아웃 전체 HTML 소스 코드

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>nav布局 在线演示 DIVCSS5</title> 
<style> 
ul,li{ padding:0; margin:0;list-style:none} 
.nav{border:1px solid #000; width:510px; overflow:hidden} 
.nav li{ line-height:22px; float:left; padding:0 5px;} 
.nav li a:hover{ color:#F00} 
/* 对class=nav设置黑色边框，鼠标滑过超链接文字为红色 */ 
 
nav{ border:1px solid #F00; width:520px; overflow:hidden} 
nav li{line-height:22px; float:left; padding:0 6px;} 
nav li a{ color:#F00} 
/* 对nav设置红色边框，超链接位置为红色 */ 
 
nav.bg{ background:#CCC} 
nav.bg li a{ color:#090} 
/* 对nav设置class=bg，设置背景为灰色，超链接位置为绿色 */ 
</style> 
</head> 
<body> 
<p>传统 div ul li布局导航条效果</p> 
<div class="nav"> 
    <ul> 
        <li><a href="http://www.divcss5.com/">网站首页</a></li> 
        <li><a href="http://www.divcss5.com/html/">HTML教程</a></li> 
        <li><a href="http://www.divcss5.com/htmlrumen/">HTML入门</a></li> 
        <li><a href="http://www.divcss5.com/html5/">HTML5教程</a></li> 
        <li><a href="http://www.divcss5.com/rumen/">CSS教程</a></li> 
        <li><a href="http://www.divcss5.com/cssrumen/">CSS入门</a></li> 
</ul> 
</div> 
<p>html5 nav ul li布局导航条没有对nav加id和class 同时设置nav li a超链接文字字体颜色为红色字和红色框效果</p> 
<nav> 
    <ul> 
        <li><a href="http://www.divcss5.com/">网站首页</a></li> 
        <li><a href="http://www.divcss5.com/html/">HTML教程</a></li> 
        <li><a href="http://www.divcss5.com/htmlrumen/">HTML入门</a></li> 
        <li><a href="http://www.divcss5.com/html5/">HTML5教程</a></li>
        <li><a href="http://www.divcss5.com/rumen/">CSS教程</a></li> 
        <li><a href="http://www.divcss5.com/cssrumen/">CSS入门</a></li> 
    </ul> 
</nav> 
<p>html5 nav ul li布局另外加class=bg设置背景为灰黑色,超链接文字字体颜色为绿色</p> 
<nav class="bg"> 
    <ul> 
        <li><a href="http://www.divcss5.com/">网站首页</a></li> 
        <li><a href="http://www.divcss5.com/html/">HTML教程</a></li> 
        <li><a href="http://www.divcss5.com/htmlrumen/">HTML入门</a></li> 
        <li><a href="http://www.divcss5.com/html5/">HTML5教程</a></li> 
        <li><a href="http://www.divcss5.com/rumen/">CSS教程</a></li> 
        <li><a href="http://www.divcss5.com/cssrumen/">CSS入门</a></li> 
    </ul> 
</nav> 
</body> 
</html>

#🎜🎜 #위는 전통적인 div+ul+li+css 레이아웃 탐색 클래스 레이아웃을 사용한 다음 nav+ul+li+css 레이아웃을 사용하고 동시에 클래스를 nav 기반의 nav로 설정하여 레이아웃을 변경합니다. 대비 효과.

특별 참고 사항: div css 레이아웃을 모르는 사람들은 위 코드를 보기 어려울 수 있습니다. 근본적인 해결책은 div+css를 배우는 것입니다. 지식 포인트를 표현하려면 위의 사례를 보면 자연스럽게 익힐 수 있습니다.

2, DIVCSS5 인스턴스 레이아웃 스크린샷

위 내용은 html5 새 태그--nav 태그 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 css html class ul li

성명：

이전 기사：캔버스를 사용하여 html5에서 "시계" 패턴을 그리는 방법은 무엇입니까? (코드 예)다음 기사：캔버스를 사용하여 html5에서 "시계" 패턴을 그리는 방법은 무엇입니까? (코드 예)