CSS教程：使用恰當(dāng)?shù)腦HTML元素及避免過多的使用div與span_CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

版權(quán)聲明：MB5U.com原創(chuàng)，未經(jīng)同意，謝絕轉(zhuǎn)載！

　　我們在MB5U.com以前的教程中，曾經(jīng)多次強(qiáng)調(diào)使文檔具有語義。我們應(yīng)該根據(jù)文檔內(nèi)容的結(jié)構(gòu)去選擇最為恰當(dāng)?shù)腍TML或XHTML元素標(biāo)記，而不是根據(jù)它們的外觀樣式去選擇他們。我們使用P元素定義一個段落，而不是用它來取得換行效果。我們使用h1-h6元素標(biāo)記標(biāo)題，而不是用它們?nèi)〉梦淖执笮∨c加粗的效果。

示例代碼 [hl5o.cn]

　　例如一個標(biāo)題，我們可以用h1來定義它：
　　<h1>這里是文章的標(biāo)題文字</h1>
　　而不應(yīng)該使用其它的什么方式來定義它：
　　<p style="font-size:14px; font-weight:bold;">這里是文章的標(biāo)題文字</p>

　　在前面MB5U.com的文章里，我們列出了所有XHTML1.0答應(yīng)使用的元素，我們也可以發(fā)現(xiàn)，其中可以讓我們選擇的元素標(biāo)記其實是很少的。但我們也清楚的熟悉到，這些精煉的元素標(biāo)記也更加有明確的意義。假如你實在找不到恰當(dāng)?shù)脑剡M(jìn)行標(biāo)記，那么可以使用通用的div與span元素。

　　頁面中div與span元素的使用是一個新問題，我們也輕易過多的使用它們。必要及合理的使用div可以明顯的增強(qiáng)文檔的結(jié)構(gòu)性。假如你審閱你的HTML文檔，發(fā)現(xiàn)有著很多的div與span，那你就得換一個眼光來看問題了，是不是存在濫用的情況？是不是還有更好的標(biāo)記來替代它們？若h1可以更好的表示所標(biāo)記的內(nèi)容，那你就得放棄p或span來定義。

　　或許這是一對矛盾，我們本身也較難把握該如何正確的使用它們，也或許我們根本就得不到一個明確的答案。但有一點需要闡明，我們應(yīng)該使文檔在邏輯上具有清楚的結(jié)構(gòu)，而且更加輕易應(yīng)用樣式。我們可以將div僅看著是一個容器，或者叫做文檔的組成“部分”。我們使用太多的容器，并不是一個明智的模式。而恰到好處居于合理位置的容器，可以讓整個文檔顯的很有條理。

　　如下的代碼，就比較合理有效：

示例代碼 [hl5o.cn]

<div id="header">
<h1>這里是MB5U.com。歡迎您的到來</h1>
<h2>MB5U.com致力于Web標(biāo)準(zhǔn)在中國的應(yīng)用及發(fā)展</h2>
<p>我們提供了許多文章及實例，您可以在這里學(xué)習(xí)到很多關(guān)于Web標(biāo)準(zhǔn)及CSS網(wǎng)頁布局的知識，希望這里的內(nèi)容對您的工作及學(xué)習(xí)有所幫助。我們期待著您與我們交流，歡迎多提寶貴意見。</p>
</div>

版權(quán)聲明：MB5U.com原創(chuàng)，未經(jīng)同意，謝絕轉(zhuǎn)載！