整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
段時間我們分享了HTML&CSS—DIV+CSS布局實例項目前五節(jié)課內(nèi)容，今天繼續(xù)為大家分享第六節(jié)課內(nèi)容。后續(xù)會不斷更新，更多關(guān)于HTML5基礎(chǔ)視頻課程，可關(guān)注千鋒好程序員官網(wǎng)的視頻課程在線觀看，有網(wǎng)盤地址也可下載學(xué)習(xí)，關(guān)注百度貼吧#好程序員吧#參與話題討論，有你的參與讓我們變更好！
例
文檔中的一個區(qū)域?qū)@示為藍(lán)色：
<divstyle="color:#0000FF"><h3>這是一個在 div 元素中的標(biāo)題。</h3><p>這是一個在 div 元素中的文本。</p></div>
瀏覽器支持
所有主流瀏覽器都支持 <div> 標(biāo)簽。
標(biāo)簽定義及使用說明
<div> 標(biāo)簽定義 HTML 文檔中的一個分隔區(qū)塊或者一個區(qū)域部分。
<div>標(biāo)簽常用于組合塊級元素，以便通過 CSS 來對這些元素進(jìn)行格式化。
提示和注釋
提示：<div> 元素經(jīng)常與 CSS 一起使用，用來布局網(wǎng)頁。
注釋：默認(rèn)情況下，瀏覽器通常會在 <div> 元素前后放置一個換行符。然而，您可以通過使用 CSS 改變這種情況。
HTML 4.01 與 HTML5之間的差異
HTML5 中不支持 align 屬性。
在 HTML 4.01 中，align 屬性 已廢棄。
屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | leftrightcenterjustify | HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定 <div> 元素中的內(nèi)容的對齊方式。 |
全局屬性
<div> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<div> 標(biāo)簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
言
曾幾何時，前端的頁面布局一直采用div，但是div本身并沒有實際的意義，它只是定義了一個區(qū)域，而且這個區(qū)域是做什么的瀏覽器并不知道，不利于頁面的SEO優(yōu)化。
因此HTML5中新增的語義化標(biāo)簽就很好的解決了這個問題，當(dāng)然它還有其他一些好處，接下來我們就一起來看看吧。
HTML5
語義化標(biāo)簽的優(yōu)點
即使在沒有CSS的支持下，瀏覽器依然能呈現(xiàn)出良好的內(nèi)容結(jié)構(gòu)。
有利于SEO，語義化的標(biāo)簽更有利于爬蟲去解析更多有效信息。
跨設(shè)備體驗，不同設(shè)備都支持語義化標(biāo)簽，那么即使在不同設(shè)備下依然可以有無縫體驗。
便于代碼開發(fā)和維護(hù)，語義化可以增加代碼的可讀性，讓團(tuán)隊成員可以更好理解彼此的代碼意圖。
HTML5新增的語義化標(biāo)簽
那么在HTML5中新增了哪些利于頁面布局的HTML5標(biāo)簽?zāi)兀?/p>
我們先通過以下這張圖來看看。
HTML5新增語義化標(biāo)簽
header標(biāo)簽
header標(biāo)簽表示頁面或一個區(qū)域(section)的頁眉部分，通常在里面包含h1-h6標(biāo)簽來使用。
我們直接通過代碼來看看在瀏覽器上的效果。
header標(biāo)簽效果
footer標(biāo)簽
footer標(biāo)簽和header標(biāo)簽類似，表示頁面或一個區(qū)域(section)的頁腳部分，通常會將網(wǎng)站的證書，許可，版權(quán)協(xié)議等內(nèi)容放在這塊。
footer標(biāo)簽
hgroup標(biāo)簽
hgroup標(biāo)簽一般用于h1-h6標(biāo)簽的組合，比如主標(biāo)題，副標(biāo)題，三級標(biāo)題的組合情況。
我們通過以下代碼段來看看其代碼組織形式。
hgroup標(biāo)簽
需要注意的一點是，如果需要使用hgroup標(biāo)簽則保證在hgroup標(biāo)簽里至少有兩個h標(biāo)簽，如果只有一個h標(biāo)簽，則應(yīng)該去掉hgroup標(biāo)簽。
nav標(biāo)簽
nav標(biāo)簽主要用于定義頁面的導(dǎo)航部分，例如頁面或者section中的側(cè)邊目錄欄。
其使用方式如下代碼段所示。
nav標(biāo)簽
aside標(biāo)簽
aside標(biāo)簽一般會指定網(wǎng)頁的相關(guān)內(nèi)容，友情鏈接等附注性的東西，類似于廣告也可以使用aside標(biāo)簽。
main標(biāo)簽
main標(biāo)簽定義一個頁面的主要內(nèi)容，在一個頁面中只能使用一次。
article標(biāo)簽
article標(biāo)簽表示的是一個獨立完整的內(nèi)容區(qū)域，比如一張報紙的某個獨立版塊。
在article標(biāo)簽內(nèi)部可以包含其他語義化標(biāo)簽，其基本使用如下所示。
article標(biāo)簽
section標(biāo)簽
section標(biāo)簽表示的是文檔中內(nèi)容的分節(jié)或分段，上述的article，nav或者aside其實都可以看做特殊的section標(biāo)簽，如果能用article，nav，aside標(biāo)簽，最好不要用section標(biāo)簽。
section標(biāo)簽與與article標(biāo)簽可以互相嵌套，需要視具體情況而定。
結(jié)束語
如果你的布局還是只有div，那么看完了今天這篇文章后完全可以嘗試下新的HTML5標(biāo)簽噢。
感興趣的同學(xué)可以加下我自己創(chuàng)建的Q群，大家相互學(xué)習(xí)交流，我也會盡力維護(hù)好群環(huán)境，群號如下所示。
號碼
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
