搜尋

首頁 >web前端 >html教學 >HTML 導覽標籤

HTML 導覽標籤

WBOY
WBOY原創
2024-09-04 16:24:011088瀏覽

HTML有許多突顯前端技術的功能，其中導航標籤就是HTML5版本的功能之一。在先前的版本中，Html 有不同的功能，但在 Html 5 中，導覽支援全域屬性和事件屬性。 html中的標籤是文件中的一組導覽連結；並非

文法：

每個 Html 標籤都有單獨的語法，如下列程式碼：導航標籤的基本語法。我們使用了

HTML

<nav>
< a href="/"   />
-------------------
</nav>

CSS

nav{
--some codes—
}

導覽標籤在 HTML 中如何運作？

使用者在點擊網頁上的選項卡或選單後發送請求。它會移動到另一個頁面，以便伺服器的回應將結果網頁顯示給使用者。就像在 HTML 中一樣，它將藉助一些 html 元素（例如

一個 HTML 頁面文件可能包含多個基於網頁選單/選項卡的連結。在HTML中，導航一般包含兩種類型，即水平導航和垂直導航。預設情況下，水平導航是根據使用者需求加載的，它將轉換為垂直或其他一些使用者需求類型。

HTML 導覽標籤

上圖是透過導航連結對使用者螢幕的基本了解。使用者透過瀏覽器點擊首頁連結的網頁連結無非是Html標籤，即）它將瀏覽特定的網頁，它將是客戶端頁面或伺服器端頁面，具體取決於它將在使用者瀏覽器畫面中顯示主頁的項目。

HTML 導航標籤範例

以下是 HTML 導覽標籤的範例：

範例#1

<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 導覽標籤

範例#2

<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 導覽標籤

範例#3

<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()">&times;</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 導覽標籤

HTML 導覽標籤

與先前的範例相比，我們使用了一些動畫進行導航來吸引用戶。

不同類型的導覽選單

通常，我們在 HTML 標籤中需要考慮幾種不同類型的選單和習慣用法，例如 和 （錨）元素，並且所有元素都應該關閉。大多數導航選單都可以用清單建立；有時，會根據使用者依賴關係使用介面限制。

基於清單的導航選單如下：

  • 頁內導覽選單
  • 網站導航選單
  • 上下文上下文導覽選單
  • Stemmaps 導航選單
  • 分頁

1.頁內導覽選單

指向網頁上其他不同部分的單頁連結的表格或內容。

範例

<nav>
<a href="/home/">Home</a> |
</nav>

2.網站導航選單

這是網頁中最有可能且最常見的選單類型。它是網站或子集的自訂或使用者定義選單類型，顯示從網站層次結構中進行選擇的選項。

範例

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

3.上下文導覽選單

它是一個建立文件內容的鏈接，它提供了一些與 html 文件當前頁面相關的更多資訊。此選單的範例包括一些新聞文章、銀行網站；我們在網頁應用程式中看到的任何內容都包含一個導航面板，我們已將滑鼠遊標放置在選項卡或選單中。它將顯示類似選單的工具提示內容。

4.網站地圖導航選單

這是一個看起來像彈出視窗的選單，無論使用者點擊選單或選項卡配置的頁面，或者他們需要一些額外的插件來配置新視窗或頁面，所有內容都將映射到同一網站。網站地圖和網站搜尋在 Html 中都有不同的功能集和提供內容。

5.分頁

在分頁中，有時我們會看到網頁會配置後端，以便在使用者點擊選單或標籤後在前端畫面中載入大量檔案。使用此選項可以拆分為單獨的頁面。與導航相比，它是不同的，因為它通常連結到同一文件的後端，這會導致在同一網頁上顯示更多選項或更多資訊。

結論

最後，我們有一個總結部分，通常每個版本的 html 都有一組不同的功能。

以上是HTML 導覽標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css html for using Interface finally Event map default this href display table
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：HTML 中的頁尾標記下一篇：HTML 中的頁尾標記

相關文章

看更多