熱門服務(wù)分類
施工總承包資質(zhì)
建筑工程施工總承包
公路工程施工總承包
鐵路工程施工總承包
港口與航道工程施工總承包
水利水電工程施工總承包
電力工程施工總承包
礦山工程施工總承包
冶金工程施工總承包
石油化工工程施工總承包
市政公用工程施工總承包
通信工程施工總承包
機(jī)電工程施工總承包
摘要:不管你以前在web頁面布局中如何稱呼它們 - “區(qū)域”還是“塊”,我們一直都在布局中將頁面分成可視的不同區(qū)域。...
不管你以前在web頁面布局中如何稱呼它們 - “區(qū)域”還是“塊”,我們一直都在布局中將頁面分成可視的不同區(qū)域。但真正的問題在于我們并沒有使用任何正確的工具來實(shí)現(xiàn)。一般情況下我們使用典型的網(wǎng)格來劃分頁頭,頁面主題,頁尾等等區(qū)域來實(shí)現(xiàn)所謂的頁面布局。
在過去的很多年以來,我們都使用DIV來幫助我們劃分頁面區(qū)域,而為此我們定義了很多class來幫助我們有效定義頁面上的每一個(gè)層次,最新的HTML5最終幫助我們解決了這個(gè)問題 - 使用section 元素, 很多人都非常喜歡這個(gè)新的HTML成員,因?yàn)閕終于在HTML標(biāo)準(zhǔn)中給予了我們準(zhǔn)確的開發(fā)建議,Section增強(qiáng)了整個(gè)DOM的可讀性,在這篇文章中我 們將介紹這些新的元素,幫助我們了解能夠解決什么問題,提供了什么重要的功能并且對(duì)于“語義化Web”做出了什么樣的貢獻(xiàn)!
相關(guān)閱讀:HTML5/CSS3系列教程:HTML5基本標(biāo)簽使用header,nav和footer
開發(fā)網(wǎng)站
可能大家還記得使用dreamweaver來開發(fā)網(wǎng)站的日子,我們通過拖拽來生成一個(gè)典型的頁面,如下:
使用dreamweaver只是為了快速的生成圖形界面而非真正意義上的信息語義清晰,當(dāng)然很多人都使用dreamweaver,包括我自己。典型的傻瓜式開發(fā)的產(chǎn)物。
web標(biāo)準(zhǔn)
當(dāng) 我們開始熟悉了web標(biāo)準(zhǔn)以及正確開發(fā)的相關(guān)最佳實(shí)踐之后,我們需要做的事情仍舊是視覺設(shè)計(jì),典型的“CSS布局”,盡量不使用語義錯(cuò)誤的table來設(shè) 計(jì)頁面布局。使用基于div的布局作為web設(shè)計(jì)其實(shí)已經(jīng)很多年了,不過使用div布局導(dǎo)致document結(jié)構(gòu)的混亂和層次的難于維護(hù)是顯而易見的。而 且最惡心的hack問題也一直困擾我們!
Div標(biāo)簽的問題
每天都會(huì)有成千上萬的開發(fā)人員使用div來分隔,格式化頁面內(nèi)容。我們使用div來分隔不同的內(nèi)容區(qū)域,以保證內(nèi)容的互相獨(dú)立。但是事實(shí)上div并非用來實(shí)現(xiàn)這樣的功能的??纯慈缦逻@個(gè)例子:
在 這個(gè)簡單的局部中,包含了一個(gè)文字主題和一個(gè)邊欄內(nèi)容。為了讓它對(duì)于讀者絕對(duì)清晰,我們將sidebar分離于主體。這里我們使用一個(gè)粗邊框來封裝這個(gè)邊 欄內(nèi)容。也許你會(huì)說,邊欄的標(biāo)題應(yīng)該是《h3》,這個(gè)我們稍后做解釋。所有的定義使用了一個(gè)典型的CSS,如果你把CSS去除,你將看到如下 展示:
如果我去除了CSS,你看到頁面布局變成了響應(yīng)式風(fēng)格,這其實(shí)就是HTML4 document如何在瀏覽器中實(shí)際被生成的樣式。這里我們看到邊欄區(qū)域其實(shí)是document中的另外一段信息。
為什么會(huì)這樣呢?
主 要的原因在于《div》是一個(gè)流動(dòng)內(nèi)容的元素。不管邊框或者背景是什么樣式,它和主題document并不分離,相反,作為其中的一個(gè)部分生 成。當(dāng)我們移除CSS可以看到,邊欄的“Resource”標(biāo)題并非是一個(gè)獨(dú)立的組件,而是document的一個(gè)部分。作為頁面的閱讀者來說,這一點(diǎn)大 家應(yīng)該看到。
為了更好的說明,我們看看如下代碼片段:
<div class=“parent”>
<h2>Heading</h2>
<p>Some content...</p>
<div class=“child”>
<h2>Another heading</h2>
<p>Some other content...</p>
</div>
</div>
這里我們我們稍微的修改了一下內(nèi)容,添加了兩個(gè)div到來展示父子關(guān)系。 div.child標(biāo)簽屬于div.parent。我們可以使用CSS來使得兩個(gè)元素的關(guān)系看起來是這個(gè)樣子。但是,要知道div在標(biāo)準(zhǔn)中的描述是“沒什 么特殊含義”。非但不意味著任何語義上的含義,對(duì)于web頁面的計(jì)算架構(gòu)來說也沒有任何意義。而且div對(duì)于我們來說也不可見。因此我們應(yīng)該把他們都刪 除,而使用如下4個(gè)元素來展示頁面父子關(guān)系,如下:
<h2>Heading</h2>
<p>Some content...</p>
<h2>Another heading</h2>
<p>Some other content...</p>
作為正確的結(jié)構(gòu)來說,這里是實(shí)際構(gòu)成內(nèi)容的元素。
標(biāo)題層次實(shí)際并非非常有用
可能很多人認(rèn)為將《h2》替換成《h3》可能能夠幫助我們解決問題。如果這樣的話,我們可能得到如下:
A header(h2)
Another header(h3)
這個(gè)方式貌似更加的合理。但是實(shí)際上呢?h3的內(nèi)容是否真的屬于h2?這里很難說清楚。下面我們?cè)倏匆粋€(gè)例子:
在這個(gè)HTML4頁面中,我們使用h1來生成一個(gè)頁面內(nèi)容介紹標(biāo)題,使用h2作為主內(nèi)容的標(biāo)題,使用h3來標(biāo)示邊欄,并且使用div#footer來生成頁尾內(nèi)容。但是問題是footer究竟屬于那個(gè)一個(gè)內(nèi)容呢?
Footer屬于哪一個(gè)標(biāo)題
下面這個(gè)圖非常清晰的展示了document結(jié)構(gòu)問題,我們看到這里footer究竟屬于《h2》的頁尾,還是《h3》的頁尾。
可能有些專家認(rèn)為,可以將代碼改成如下樣式:
h1(page)
h2(main)
h3(sidebar)
h2(footer)
這個(gè)屬于一個(gè)hack,但是并非很正確。
劃分區(qū)域
了解如何正確的劃分區(qū)域,HTML5提供了《section》,《article》,《aside》和《nav》等元素??纯聪聢D有幾個(gè)區(qū)域:
多選題:
A. 1 B. 2 C. 3 D. 4
你的答案是什么? 正確的應(yīng)該是 (B)。
也許你會(huì)不太理解,因?yàn)樵贖TML5的標(biāo)準(zhǔn)中擁有有如下具體的定義:
4.4 Sections
4.4.1 body
4.4.2 nav
4.4.3 article
4.4.4 aside
4.4.5 h1, h2, h3, h4, h5 and h6
4.4.6 hgroup
4.4.7 header
4.4.8 footer
4.4.9 address
但是如果你看看 4.4.8 footer的時(shí)候,你會(huì)看到如下內(nèi)容:
“the footer element is not sectioning content; it doesn’t introduce a new section.”
這里HTML5的定義上有一些前后矛盾之處,不過大家也不用過于糾纏。
Section是一個(gè)新類型的div嗎?
這可能是一個(gè)典型的錯(cuò)誤理解。
Div其實(shí)在功能上并沒有任何含義,如果你使用div來創(chuàng)建頁面框架結(jié)構(gòu)將會(huì)是一個(gè)非常糟糕的選擇。
而Section用來定義一個(gè)結(jié)構(gòu)化的區(qū)域,看看下面這個(gè)例子:
<section class=“outer”>
<section class=“inner”>
<h1>Section title</h1>
</section>
</section>
這里我們使用section來生成一個(gè)盒模式。如果我們運(yùn)行 our outliner,我們得到如下警告:
[Untitled Section]
Section title
這里如果使用div的話,可以有效幫助我們劃分區(qū)域:
<section>
<div>
<h1>Section title</h1>
</div>
</section>
生成結(jié)果如下:
Section title
可以看到?jīng)]有任何警告或者提示!
總結(jié)
官方微信公眾號(hào)
民族大道49號(hào)民族宮B座2306號(hào)(新夢之島樓上)