HTML5 neues Tag – Einführung in das Navigations-Tag-H5-Tutorial-php.cn

HTML5 neues Tag – Einführung in das Navigations-Tag

青灯夜游

Freigeben： 2018-09-11 15:39:31

Original

4480 Leute haben es durchsucht

Das Navigationselement-Tag ist ein neues Tag, das zu HTML5 hinzugefügt wurde. Dieses Kapitel gibt Ihnen eine Einführung in das Navigations-Tag, ein neues Tag in HTML5. Es hat einen gewissen Referenzwert. Ich hoffe, es wird Ihnen hilfreich sein.

Zuallererst ist nav auch ein neues Element-Tag in HTML5. Gleichzeitig wird nav wie andere neue Tags als gebräuchlicher Name für die Navigationsleiste im traditionellen HTML-Layout früherer Versionen von HTML5 verwendet.

Zum Beispiel:

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

Nach dem Login kopieren

oder

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

Nach dem Login kopieren

In HTML5 wird der bisher häufig verwendete benannte nav speziell als neues Tag-Element verwendet. Dieses Tag wird häufig im Navigationslayout verwendet.

1. HTML-Navigations-Tag-Syntax und -Struktur

1. Grundlegende Syntax

<nav>内容</nav>

Nach dem Login kopieren

2 >

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

Nach dem Login kopieren

3. Klasse zur Navigation hinzufügen

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

Nach dem Login kopieren

4. Das Navigations-Tag schnell verstehen und beherrschen

Nav hängt mit der Navigation zusammen und wird daher im Allgemeinen für das Website-Navigationslayout verwendet. Gleichzeitig kann das

-Tag genau wie die Verwendung von div-Tags und span-Tags zum Hinzufügen von IDs oder Klassen verwendet werden. Der Unterschied zum div-Tag besteht darin, dass dieses Tag im Allgemeinen nur an navigationsbezogenen Stellen verwendet wird eine HTML-Webseite. Sie kann im Layout der Navigationsleiste oder im Layout im Zusammenhang mit der Navigationsleiste verwendet werden.

Mit welchem Tag sollte nav verwendet werden?

DIVCSS5 hat im vorherigen Artikel-Tutorial eingeführt, dass die allgemeine Navigationsleiste das ul-li-Tag-Layout verwendet und das nav-Tag in Verbindung mit verwendet wird das ul li-Tag im allgemeinen Layout.

Ein kleiner Fall ist wie folgt: 1), traditionelles HTML-Layout

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

Nach dem Login kopieren

2), nach dem Navigations-Tag

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

Nach dem Login kopieren

aus dem Die obige Konvertierung von HTML-Layout in HTML5 ist eigentlich sehr einfach, die Verwendung von HTML-Navigations-Tags und die Techniken der Layout-Navigationsleiste mit ul li zu verstehen.

2. Kompatibilitätstipps Weil das

-Tag ein neues Tag in HTML 5 ist IE8 und niedrigere IE-Browser (IE8, IE7, IE6) unterstützen dies nicht. Wählen Sie daher das HTML-Layout entsprechend Ihren Anforderungen.

3. HTML-Navigations-CSS-Layout-Fall

Vergleichen und lernen Sie daraus das traditionelle Div-Layout und das Navigationslayout, um die Navigation aus HTML-CSS zu beherrschen Layout-Grammatik und Verwendung.

Das folgende DIVCSS5 ermöglicht es jedem, das Navigationslayout durch drei Layoutpraktiken zu beherrschen:

1), traditioneller div+ul+li-Layout-Navigationsstil

2), nav + ul + li-Layout-Navigationsstil;

3) Legen Sie dann den Klassen-CSS-Stil für nav basierend auf dem nav + ul + li-Layout fest

Lassen Sie durch den obigen Fall alle wissen, dass nav Kooperiert im Allgemeinen mit ul li. Oder wird direkt für das Layout im Zusammenhang mit der Navigation verwendet. Gleichzeitig kann nav wie div verwendet werden, um CSS direkt festzulegen oder eine Klasse oder ID hinzuzufügen.

Die spezifischen Fälle sind wie folgt:

1. Traditionelles Div-CSS-Layout und NAV-CSS-Layout vollständiger HTML-Quellcode

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

Nach dem Login kopieren

Das Obige verwendet traditionelles div+ul+li+css-Layout Navigationsklassenlayout, dann verwenden Sie das nav+ul+li+css-Layout und setzen Sie gleichzeitig die Klasse basierend auf nav auf nav, um den Kontrasteffekt des Layouts zu ändern.

Besonderer Hinweis: Für diejenigen, die das Div-CSS-Layout nicht kennen, kann es schwierig sein, den obigen Code zu sehen. Die grundlegende Lösung besteht darin, div+css zu lernen Wenn Sie einen Blick auf den obigen Code werfen, werden Sie es natürlich verstehen, nachdem Sie sich die oben genannten Fälle angesehen haben.

2. Screenshot des DIVCSS5-Instanzlayouts

Das obige ist der detaillierte Inhalt vonHTML5 neues Tag – Einführung in das Navigations-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!