整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
言
曾幾何時，前端的頁面布局一直采用div，但是div本身并沒有實際的意義，它只是定義了一個區(qū)域，而且這個區(qū)域是做什么的瀏覽器并不知道，不利于頁面的SEO優(yōu)化。
因此HTML5中新增的語義化標簽就很好的解決了這個問題，當然它還有其他一些好處，接下來我們就一起來看看吧。
HTML5
語義化標簽的優(yōu)點
即使在沒有CSS的支持下，瀏覽器依然能呈現(xiàn)出良好的內(nèi)容結(jié)構(gòu)。
有利于SEO，語義化的標簽更有利于爬蟲去解析更多有效信息。
跨設(shè)備體驗，不同設(shè)備都支持語義化標簽，那么即使在不同設(shè)備下依然可以有無縫體驗。
便于代碼開發(fā)和維護，語義化可以增加代碼的可讀性，讓團隊成員可以更好理解彼此的代碼意圖。
HTML5新增的語義化標簽
那么在HTML5中新增了哪些利于頁面布局的HTML5標簽?zāi)兀?/p>
我們先通過以下這張圖來看看。
HTML5新增語義化標簽
header標簽
header標簽表示頁面或一個區(qū)域(section)的頁眉部分，通常在里面包含h1-h6標簽來使用。
我們直接通過代碼來看看在瀏覽器上的效果。
header標簽效果
footer標簽
footer標簽和header標簽類似，表示頁面或一個區(qū)域(section)的頁腳部分，通常會將網(wǎng)站的證書，許可，版權(quán)協(xié)議等內(nèi)容放在這塊。
footer標簽
hgroup標簽
hgroup標簽一般用于h1-h6標簽的組合，比如主標題，副標題，三級標題的組合情況。
我們通過以下代碼段來看看其代碼組織形式。
hgroup標簽
需要注意的一點是，如果需要使用hgroup標簽則保證在hgroup標簽里至少有兩個h標簽，如果只有一個h標簽，則應(yīng)該去掉hgroup標簽。
nav標簽
nav標簽主要用于定義頁面的導(dǎo)航部分，例如頁面或者section中的側(cè)邊目錄欄。
其使用方式如下代碼段所示。
nav標簽
aside標簽
aside標簽一般會指定網(wǎng)頁的相關(guān)內(nèi)容，友情鏈接等附注性的東西，類似于廣告也可以使用aside標簽。
main標簽
main標簽定義一個頁面的主要內(nèi)容，在一個頁面中只能使用一次。
article標簽
article標簽表示的是一個獨立完整的內(nèi)容區(qū)域，比如一張報紙的某個獨立版塊。
在article標簽內(nèi)部可以包含其他語義化標簽，其基本使用如下所示。
article標簽
section標簽
section標簽表示的是文檔中內(nèi)容的分節(jié)或分段，上述的article，nav或者aside其實都可以看做特殊的section標簽，如果能用article，nav，aside標簽，最好不要用section標簽。
section標簽與與article標簽可以互相嵌套，需要視具體情況而定。
結(jié)束語
如果你的布局還是只有div，那么看完了今天這篇文章后完全可以嘗試下新的HTML5標簽噢。
感興趣的同學(xué)可以加下我自己創(chuàng)建的Q群，大家相互學(xué)習(xí)交流，我也會盡力維護好群環(huán)境，群號如下所示。
號碼
言
曾幾何時，前端的頁面布局一直采用div，但是div本身并沒有實際的意義，它只是定義了一個區(qū)域，而且這個區(qū)域是做什么的瀏覽器并不知道，不利于頁面的SEO優(yōu)化。
因此HTML5中新增的語義化標簽就很好的解決了這個問題，當然它還有其他一些好處，接下來我們就一起來看看吧。
HTML5
語義化標簽的優(yōu)點
即使在沒有CSS的支持下，瀏覽器依然能呈現(xiàn)出良好的內(nèi)容結(jié)構(gòu)。
有利于SEO，語義化的標簽更有利于爬蟲去解析更多有效信息。
跨設(shè)備體驗，不同設(shè)備都支持語義化標簽，那么即使在不同設(shè)備下依然可以有無縫體驗。
便于代碼開發(fā)和維護，語義化可以增加代碼的可讀性，讓團隊成員可以更好理解彼此的代碼意圖。
HTML5新增的語義化標簽
那么在HTML5中新增了哪些利于頁面布局的HTML5標簽?zāi)兀?/p>
我們先通過以下這張圖來看看。
HTML5新增語義化標簽
header標簽
header標簽表示頁面或一個區(qū)域(section)的頁眉部分，通常在里面包含h1-h6標簽來使用。
我們直接通過代碼來看看在瀏覽器上的效果。
header標簽效果
footer標簽
footer標簽和header標簽類似，表示頁面或一個區(qū)域(section)的頁腳部分，通常會將網(wǎng)站的證書，許可，版權(quán)協(xié)議等內(nèi)容放在這塊。
footer標簽
hgroup標簽
hgroup標簽一般用于h1-h6標簽的組合，比如主標題，副標題，三級標題的組合情況。
我們通過以下代碼段來看看其代碼組織形式。
hgroup標簽
需要注意的一點是，如果需要使用hgroup標簽則保證在hgroup標簽里至少有兩個h標簽，如果只有一個h標簽，則應(yīng)該去掉hgroup標簽。
nav標簽
nav標簽主要用于定義頁面的導(dǎo)航部分，例如頁面或者section中的側(cè)邊目錄欄。
其使用方式如下代碼段所示。
nav標簽
aside標簽
aside標簽一般會指定網(wǎng)頁的相關(guān)內(nèi)容，友情鏈接等附注性的東西，類似于廣告也可以使用aside標簽。
main標簽
main標簽定義一個頁面的主要內(nèi)容，在一個頁面中只能使用一次。
article標簽
article標簽表示的是一個獨立完整的內(nèi)容區(qū)域，比如一張報紙的某個獨立版塊。
在article標簽內(nèi)部可以包含其他語義化標簽，其基本使用如下所示。
article標簽
section標簽
section標簽表示的是文檔中內(nèi)容的分節(jié)或分段，上述的article，nav或者aside其實都可以看做特殊的section標簽，如果能用article，nav，aside標簽，最好不要用section標簽。
section標簽與與article標簽可以互相嵌套，需要視具體情況而定。
結(jié)束語
如果你的布局還是只有div，那么看完了今天這篇文章后完全可以嘗試下新的HTML5標簽噢。
感興趣的同學(xué)可以加下我自己創(chuàng)建的Q群，大家相互學(xué)習(xí)交流，我也會盡力維護好群環(huán)境，群號如下所示。
號碼
們上一篇文章已經(jīng)對HTML5有了一定了解。（了解HTML5語義化標簽——小白們看過來）
今天我們總結(jié)一些常用的語義化標簽，剛學(xué)完HTML標簽的童靴們趕緊趁熱打鐵吧！
頁眉通常包括網(wǎng)站標志、主導(dǎo)航、全站鏈接以及搜索框。
也適合對頁面內(nèi)部一組介紹性或?qū)Ш叫詢?nèi)容進行標記。
如下例子中，頁眉中包含了一個導(dǎo)航：
html5規(guī)范不推薦對輔助性頁腳鏈接使用nav，除非頁腳再次顯示頂級全局導(dǎo)航、或者包含招聘信息等重要鏈接。
例子參考上面。
頁腳通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。如果
元素包含了整個節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標簽，類別等一些其他類似信息。
<footer> ? 2018 toutiao.com All Rights Reserved </footer>
具有相似主題的一組內(nèi)容，比如網(wǎng)站的主頁可以分成介紹、新聞條目、聯(lián)系信息等條塊。類似于div。
如下例子中，關(guān)于section的介紹放在了一個<section>里面：
可以作為文章的標簽。 article可以嵌套article，只要里面的article與外面的是部分與整體的關(guān)系。
愛學(xué)習(xí)的孩子運氣不會差哦~
關(guān)注小白前端，持續(xù)收到文章推送！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
