精品 中文 免费 日本,动漫秘 无码一区二区三区,亚洲欧洲丝袜另类一二三区,亚欧免费无码aⅴ在线

九龍商務代辦主頁 > 網(wǎng)站建設 > 站長學院 > HTML5+CSS3 > HTML5/CSS3系列教程:HTML5 區(qū)域(Sectioning)的重要性

HTML5/CSS3系列教程:HTML5 區(qū)域(Sectioning)的重要性

摘要:不管你以前在web頁面布局中如何稱呼它們 - “區(qū)域”還是“塊”,我們一直都在布局中將頁面分成可視的不同區(qū)域。...

18978939080

立即咨詢

編輯:網(wǎng)絡 來源:網(wǎng)絡整理 發(fā)布日期:03-07 瀏覽量統(tǒng)計中... 反饋錯誤

  字體:

九龍商務代辦

不管你以前在web頁面布局中如何稱呼它們 - “區(qū)域”還是“塊”,我們一直都在布局中將頁面分成可視的不同區(qū)域。但真正的問題在于我們并沒有使用任何正確的工具來實現(xiàn)。一般情況下我們使用典型的網(wǎng)格來劃分頁頭,頁面主題,頁尾等等區(qū)域來實現(xiàn)所謂的頁面布局。

在過去的很多年以來,我們都使用DIV來幫助我們劃分頁面區(qū)域,而為此我們定義了很多class來幫助我們有效定義頁面上的每一個層次,最新的HTML5最終幫助我們解決了這個問題 - 使用section 元素, 很多人都非常喜歡這個新的HTML成員,因為i終于在HTML標準中給予了我們準確的開發(fā)建議,Section增強了整個DOM的可讀性,在這篇文章中我 們將介紹這些新的元素,幫助我們了解能夠解決什么問題,提供了什么重要的功能并且對于“語義化Web”做出了什么樣的貢獻!

相關閱讀:HTML5/CSS3系列教程:HTML5基本標簽使用header,nav和footer

開發(fā)網(wǎng)站

可能大家還記得使用dreamweaver來開發(fā)網(wǎng)站的日子,我們通過拖拽來生成一個典型的頁面,如下:

使用dreamweaver只是為了快速的生成圖形界面而非真正意義上的信息語義清晰,當然很多人都使用dreamweaver,包括我自己。典型的傻瓜式開發(fā)的產物。

web標準

當 我們開始熟悉了web標準以及正確開發(fā)的相關最佳實踐之后,我們需要做的事情仍舊是視覺設計,典型的“CSS布局”,盡量不使用語義錯誤的table來設 計頁面布局。使用基于div的布局作為web設計其實已經很多年了,不過使用div布局導致document結構的混亂和層次的難于維護是顯而易見的。而 且最惡心的hack問題也一直困擾我們!

Div標簽的問題

每天都會有成千上萬的開發(fā)人員使用div來分隔,格式化頁面內容。我們使用div來分隔不同的內容區(qū)域,以保證內容的互相獨立。但是事實上div并非用來實現(xiàn)這樣的功能的??纯慈缦逻@個例子:

在 這個簡單的局部中,包含了一個文字主題和一個邊欄內容。為了讓它對于讀者絕對清晰,我們將sidebar分離于主體。這里我們使用一個粗邊框來封裝這個邊 欄內容。也許你會說,邊欄的標題應該是《h3》,這個我們稍后做解釋。所有的定義使用了一個典型的CSS,如果你把CSS去除,你將看到如下 展示:

如果我去除了CSS,你看到頁面布局變成了響應式風格,這其實就是HTML4 document如何在瀏覽器中實際被生成的樣式。這里我們看到邊欄區(qū)域其實是document中的另外一段信息。

為什么會這樣呢?

主 要的原因在于《div》是一個流動內容的元素。不管邊框或者背景是什么樣式,它和主題document并不分離,相反,作為其中的一個部分生 成。當我們移除CSS可以看到,邊欄的“Resource”標題并非是一個獨立的組件,而是document的一個部分。作為頁面的閱讀者來說,這一點大 家應該看到。

為了更好的說明,我們看看如下代碼片段:

<div class=“parent”>

<h2>Heading</h2>

<p>Some content...</p>

<div class=“child”>

<h2>Another heading</h2>

<p>Some other content...</p>

</div>

</div>

這里我們我們稍微的修改了一下內容,添加了兩個div到來展示父子關系。 div.child標簽屬于div.parent。我們可以使用CSS來使得兩個元素的關系看起來是這個樣子。但是,要知道div在標準中的描述是“沒什 么特殊含義”。非但不意味著任何語義上的含義,對于web頁面的計算架構來說也沒有任何意義。而且div對于我們來說也不可見。因此我們應該把他們都刪 除,而使用如下4個元素來展示頁面父子關系,如下:

<h2>Heading</h2>

<p>Some content...</p>

<h2>Another heading</h2>

<p>Some other content...</p>

作為正確的結構來說,這里是實際構成內容的元素。

標題層次實際并非非常有用

可能很多人認為將《h2》替換成《h3》可能能夠幫助我們解決問題。如果這樣的話,我們可能得到如下:

A header(h2)

Another header(h3)

這個方式貌似更加的合理。但是實際上呢?h3的內容是否真的屬于h2?這里很難說清楚。下面我們再看一個例子:

在這個HTML4頁面中,我們使用h1來生成一個頁面內容介紹標題,使用h2作為主內容的標題,使用h3來標示邊欄,并且使用div#footer來生成頁尾內容。但是問題是footer究竟屬于那個一個內容呢?

Footer屬于哪一個標題

下面這個圖非常清晰的展示了document結構問題,我們看到這里footer究竟屬于《h2》的頁尾,還是《h3》的頁尾。

可能有些專家認為,可以將代碼改成如下樣式:

h1(page)

h2(main)

h3(sidebar)

h2(footer)

這個屬于一個hack,但是并非很正確。

劃分區(qū)域

了解如何正確的劃分區(qū)域,HTML5提供了《section》,《article》,《aside》和《nav》等元素??纯聪聢D有幾個區(qū)域:

多選題:

A. 1 B. 2 C. 3 D. 4

你的答案是什么? 正確的應該是 (B)。

也許你會不太理解,因為在HTML5的標準中擁有有如下具體的定義:

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的時候,你會看到如下內容:

“the footer element is not sectioning content; it doesn’t introduce a new section.”

這里HTML5的定義上有一些前后矛盾之處,不過大家也不用過于糾纏。

Section是一個新類型的div嗎?

這可能是一個典型的錯誤理解。

Div其實在功能上并沒有任何含義,如果你使用div來創(chuàng)建頁面框架結構將會是一個非常糟糕的選擇。

而Section用來定義一個結構化的區(qū)域,看看下面這個例子:

<section class=“outer”>

<section class=“inner”>

<h1>Section title</h1>

</section>

</section>

這里我們使用section來生成一個盒模式。如果我們運行 our outliner,我們得到如下警告:

[Untitled Section]

Section title

這里如果使用div的話,可以有效幫助我們劃分區(qū)域:

<section>

<div>

<h1>Section title</h1>

</div>

</section>

生成結果如下:

Section title

可以看到沒有任何警告或者提示!

總結

【九龍商務代辦】微信號

官方微信公眾號

24小時電話18978939080

民族大道49號民族宮B座2306號(新夢之島樓上)

工商注冊13807817411
其他業(yè)務13878807671
?
【九龍商務代辦】QQ
QQ在線咨詢
客服咨詢
【九龍商務代辦】QQ
【九龍商務代辦】QQ
【九龍商務代辦】QQ
【九龍商務代辦】QQ
咨詢熱線
18978939080
13807817411
13878807671
0771-5537667

反饋
【九龍商務代辦】微信號掃描二維碼關注我為好友
瀏覽: