整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
HTML 中，Header 標(biāo)簽起著至關(guān)重要的作用，它定義了網(wǎng)頁的頭部結(jié)構(gòu)，為整個網(wǎng)頁的內(nèi)容分級和組織奠定了基礎(chǔ)。Header 標(biāo)簽的使用直接影響著網(wǎng)頁的布局、搜索引擎優(yōu)化（SEO）和訪問者體驗。現(xiàn)在，讓我們深入探討 HTML Header 標(biāo)簽的奧秘，幫助你打造出結(jié)構(gòu)清晰、易于閱讀和搜索引擎優(yōu)化的網(wǎng)頁！
在 HTML 中，它通常位于網(wǎng)頁的頂部，包含著網(wǎng)頁標(biāo)題、logo、導(dǎo)航菜單等重要元素。Header 標(biāo)簽可以出現(xiàn)不止一次，這意味著一個網(wǎng)頁可以有多個 header 部分，但通常主 header 部分只會出現(xiàn)一次，用于包含與整個網(wǎng)頁相關(guān)的全球性信息。
正確使用 Header 標(biāo)簽對于構(gòu)建一個良好網(wǎng)頁結(jié)構(gòu)至關(guān)重要。以下是你需要注意的關(guān)鍵點：
要充分發(fā)揮 Header 標(biāo)簽的潛力，以下是一些最佳實踐建議：
HTML Header 標(biāo)簽是構(gòu)建網(wǎng)頁結(jié)構(gòu)的基石，它影響著網(wǎng)頁的視覺呈現(xiàn)、用戶體驗和搜索引擎優(yōu)化。通過正確使用 Header 標(biāo)簽，你可以打造出層級分明、易于導(dǎo)航和搜索引擎友好的網(wǎng)頁。記住本文的最佳實踐建議，你將能夠創(chuàng)建出高質(zhì)量、高性能且吸引人的網(wǎng)頁！
文已經(jīng)過原作者 Shadeed 授權(quán)翻譯。
在 CSS3 沒有普及的時候，創(chuàng)建一個網(wǎng)站 header 是一項既可怕又困難的任務(wù) ?。那時，F(xiàn)lexbox 還是個新東西，我們不得不使用老方法，比如 float和clearfix技術(shù)。今天，情況完全不同了，F(xiàn)lexbox 得到了廣泛的支持，大大的減少了我們的開發(fā)工作，同時也為我們提供了更多的可能性。
有人可能會說，現(xiàn)在 CSS3 這么普及，制作一個網(wǎng)站 header 不是很容易么 ?？并非如此，因為有一些有趣的挑戰(zhàn)需要解決,在本文中我們會介紹其中的幾種。
首先，這里所說的網(wǎng)站 Header 是用戶訪問網(wǎng)站時首先看到的內(nèi)容之一。通常，它包含logo或網(wǎng)站名稱以及導(dǎo)航鏈接，如下所示:
不管 Header 的視覺設(shè)計如何，關(guān)鍵元素都是logo 和導(dǎo)航。
當(dāng) flexbox 應(yīng)用于 Header 元素時，它將使所有子項目在同一行中。然后，你所需要做的就是應(yīng)用justify-content來分配它們之間的間距。
html
<header class="site-header">
<a href="#" class="brand">Brand</a>
<nav class="nav"></nav>
</header>
css
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
很簡單，對吧?對于這樣的用例，是的，可能會比這更復(fù)雜。
在上面的 lago 和 nav 外沒有包含一層 wrapper，這在大屏幕可能會出現(xiàn)問題。
從上可以看到第一個Header太寬了，因為它沒有內(nèi)部 wrapper 相比第一個，第二個看起來好多了。所以，我們可以對 HTML 進(jìn)行如下調(diào)整。
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
</div>
</header>
flexbox應(yīng)該移動到.site-header__wrapper元素中。
.site-header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
當(dāng)屏幕很小的時候，可以水平滾動。見下圖
如果沒有設(shè)置flex-wrap: wrap，當(dāng)屏幕過小的時候就會出現(xiàn)水平滾動，如果不想這樣，可以加上 flex-wrap: wrap` ?。
我喜歡使用flexbox的原因是它可以很容易地處理 header 設(shè)計的多種變化。基于前面的 header 設(shè)計，我擴(kuò)展了 header 元素的一些選項，如添加按鈕、搜索輸入和更改子項目的順序。
假設(shè)我想要在導(dǎo)航鏈接旁邊添加了一個按鈕。這應(yīng)該如何處理?我們應(yīng)該把它作為鏈接添加到導(dǎo)航欄中嗎?還是應(yīng)該和導(dǎo)航分開?我更喜歡這樣做。
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
這種情況下，我們不能在用 justify-content: space-between來處理間隙，相反，我會在 nav 元素上使用 margin-left: auto，
這樣，它就會自動向右靠齊。
將導(dǎo)航和 track 按鈕分開對于移動設(shè)備非常有用，因為我們需要保留該按鈕并在其旁邊顯示一個移動切換按鈕。
與第一個變化類似，這個變化增加了一個搜索輸入，占用了剩余的可用空間。對于flexbox，這可以通過使用flex屬性來實現(xiàn)。
html
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<div class="search"></div>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
css
.search {
flex: 1;
}
現(xiàn)在，搜索輸入將填充 brand 和nav 之間的可用空間。但是，這有一些限制。在較小的視口上，header 將如下所示:
搜索輸入寬度不應(yīng)小于此寬度，因為這樣很難輸入和查看全文。下面有兩種解決方案：
我更喜歡第二種解決方案，因為它不會過早隱藏導(dǎo)航。一般來說，如果元素不影響布局，我會盡量避免隱藏它。
對于這個示例，HTML標(biāo)記是相同的，但是 header 里的元素順序是不同的。我們?nèi)绾尾拍茏龅竭@一點? 你可能想到用 order 屬性來解決這個問題 ?
html
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
css
.site-header {
display: flex;
justify-content: space-between;
}
.nav {
order: -1;
}
這樣有個問題，間隔空間不會使 logo 居中，它只是分散項目之間的空間。
解決方案是給每個子項一個flex: 1，這將在它們之間分配可用空間。
.brand,
.nav,
.button {
flex: 1;
}
這樣，由于flex: 1，按鈕元素變寬了， 解決此問題的唯一方法是將其包裹到另一個元素中。
HTML
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<div class="button-wrapper">
<a href="/track-shipment" class="button">Track</a>
</div>
</div>
</header>
這樣，我們就可以將下面的logo和按鈕居中。
.logo {
text-align: center;
}
/* 不要介意這里的命名，這只是出于演示*/
.button-wrapper {
text-align: end; /* end 等同于LTR語言中的right */
}
但是，如果添加了更多導(dǎo)航鏈接，這種方法很容易失敗。我們需要確保導(dǎo)航鏈接的數(shù)量不會超過特定的限制。下面一個logo偏離中心的例子 ?:
正如在上圖中看到的，logo沒有居中。所以要記住這一點，以避免這種意想不到的問題 ?。
如果某個元素需要在移動設(shè)備上占據(jù)整個寬度（不能隱藏的重要導(dǎo)航），我會使用flex-basis: 100% ?。
從上面的模型看，做起來可能很簡單。實際上不是。通常，header 可能有一個內(nèi)部間距（padding），當(dāng)我們強(qiáng)制某項占據(jù)全部寬度時，除非清除padding ，否則它不會生效。但是，刪除padding不切實際，因為它將影響設(shè)計中的其他元素 ?。
下面解決此問題的一種解決方法 ?：
.nav {
flex: 1 0 100%; /* [1] */
order: 2; /* [2] */
margin: 1rem -1rem -1rem -1rem; /* [3] */
padding: 1rem; /* [4] */
display: flex; /* [5] */
justify-content: center; /* [5] */
}
著 Chrome 和 Firefox 支持flex gap屬性，現(xiàn)在在flex項目之間添加間距比以往任何時候都容易。考慮以下標(biāo)題
要做到上圖的高亮間距，只需將gap: 1rem添加到flex父節(jié)點。沒有了gap，我們還是需要用舊的方式來間隔 ?。
/* 老的方式 */
.brand {
margin-right: 1rem;
}
.sign-in {
margin-right: 1rem;
}
/* 新的方式 */
.site-header {
/* Other flexbox styles */
gap: 1rem;
}
作者：Shadeed 譯者：前端小智 來源：ishadeed
原文：https://ishadeed.com/article/website-headers-flexbox/
認(rèn)效果：
展開效果：
廢話不多說，直接上代碼：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
