Heim > Artikel > Web-Frontend > HTML5 neues Tag – Einführung in das Navigations-Tag
HTML5 neues Tag – Einführung in das Navigations-Tag
- 青灯夜游Original
- 2018-09-11 15:39:314453Durchsuche
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>
oder
<div id=”nav”>网站导航内容</div>
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>
2 >
<nav id=”abc”>内容</nav>3. Klasse zur Navigation hinzufügen
<nav class=”abc”>内容</nav>4. Das Navigations-Tag schnell verstehen und beherrschenNav hängt mit der Navigation zusammen und wird daher im Allgemeinen für das Website-Navigationslayout verwendet. Gleichzeitig kann das c787b9a589a3ece771e842a6176cf8e9-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>2), nach dem Navigations-Tag
<nav> <ul> <li>首页</li> <li>栏目名称</li> <li>联系我们</li> </ul> </nav>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 c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f-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-FallVergleichen 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>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!