網(wǎng)頁頭部css代碼優(yōu)化實例
發(fā)布時間：2009-07-11 19:51:30 作者：佚名 
我要評論
我要評論在div+css布局中，一般都這樣來整體構(gòu)架的：
[code]
<div id="header"></div>
<div id="center"></div>
<div id="footer"></div>
[/code]
而對于header部分，肯定要顯示網(wǎng)站標(biāo)題，除了顯示網(wǎng)站標(biāo)題
在div+css布局中，一般都這樣來整體構(gòu)架的：
<div id="header"></div>
<div id="center"></div>
<div id="footer"></div>
而對于header部分，肯定要顯示網(wǎng)站標(biāo)題，除了顯示網(wǎng)站標(biāo)題外，還可能要顯示其他比較重要的對象，比如網(wǎng)站的導(dǎo)航欄：
<div id="header">
<div id="title">這里是網(wǎng)站的標(biāo)題</div>
<div id="nav">這里是網(wǎng)站導(dǎo)航欄</div>
</div>
很多人一般都這樣寫的，當(dāng)然這樣寫并沒有什么語法錯誤。但對于div來說有個原則，那就是盡少的使用div的嵌套（和table一樣的缺點：1、對于用戶：瀏覽器要消耗資源對嵌套的關(guān)系進(jìn)行解析，影響速度；2、對于搜索：搜索引擎對嵌套的層數(shù)可能有所限制）。而且這樣寫帶給我們的可讀性也不算太高。
那如何才是最優(yōu)化，最科學(xué)的寫法呢？
我們選用其他的Xhtml代碼來取代上面的div，那又如何選擇呢？？
首先標(biāo)題的選擇——我們知道在xhtml中h1-h6是表示標(biāo)題的，而header里的標(biāo)題在全頁來看是最重要的，我們選擇h1來表示標(biāo)題是順其自然的。
其次導(dǎo)航欄的選擇——導(dǎo)航欄是由多個小塊內(nèi)容組成，我們選擇無序列表
<ul><li></li></ul>
來表示菜單最合適不過了！
最后以上的內(nèi)容可以優(yōu)化成：
<div id="header">
<h1>這里是網(wǎng)站的標(biāo)題</h1>
<ul>
<li>這里是網(wǎng)站導(dǎo)航欄</li>
</ul>
</div>
復(fù)制代碼
代碼如下:<div id="header"></div>
<div id="center"></div>
<div id="footer"></div>
而對于header部分，肯定要顯示網(wǎng)站標(biāo)題，除了顯示網(wǎng)站標(biāo)題外，還可能要顯示其他比較重要的對象，比如網(wǎng)站的導(dǎo)航欄：
復(fù)制代碼
代碼如下:<div id="header">
<div id="title">這里是網(wǎng)站的標(biāo)題</div>
<div id="nav">這里是網(wǎng)站導(dǎo)航欄</div>
</div>
很多人一般都這樣寫的，當(dāng)然這樣寫并沒有什么語法錯誤。但對于div來說有個原則，那就是盡少的使用div的嵌套（和table一樣的缺點：1、對于用戶：瀏覽器要消耗資源對嵌套的關(guān)系進(jìn)行解析，影響速度；2、對于搜索：搜索引擎對嵌套的層數(shù)可能有所限制）。而且這樣寫帶給我們的可讀性也不算太高。
那如何才是最優(yōu)化，最科學(xué)的寫法呢？
我們選用其他的Xhtml代碼來取代上面的div，那又如何選擇呢？？
首先標(biāo)題的選擇——我們知道在xhtml中h1-h6是表示標(biāo)題的，而header里的標(biāo)題在全頁來看是最重要的，我們選擇h1來表示標(biāo)題是順其自然的。
其次導(dǎo)航欄的選擇——導(dǎo)航欄是由多個小塊內(nèi)容組成，我們選擇無序列表
復(fù)制代碼
代碼如下:<ul><li></li></ul>
來表示菜單最合適不過了！
最后以上的內(nèi)容可以優(yōu)化成：
復(fù)制代碼
代碼如下:<div id="header">
<h1>這里是網(wǎng)站的標(biāo)題</h1>
<ul>
<li>這里是網(wǎng)站導(dǎo)航欄</li>
</ul>
</div>
相關(guān)文章
CSS失效怎么辦？請檢查網(wǎng)頁最頭部是否包含Doctype標(biāo)簽
CSS是正確的，鏈接也沒有出錯，這時你就需要檢查你的網(wǎng)頁最頭部是否包含Doctype標(biāo)簽了，合適的Doctype可以解決CSS失效的問題，這句話究竟是什么意思有什么作用2014-09-03- HTML中我們一般把部分稱為網(wǎng)頁的頭部。頭部部分的內(nèi)容雖然不會在頁面中顯示，但它能影響到搜索引擎對網(wǎng)頁的收錄和排序，以及網(wǎng)頁的各種全局設(shè)置，可以說是至2013-12-02
- 網(wǎng)頁頭部屬性全接觸。新手可以看下，了解下頭部標(biāo)簽說明。2009-08-19
- 下面小編就為大家?guī)硪黄W(wǎng)頁頭部優(yōu)化建議。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-06