table建站,XHTML建站和DIV建站的不同_Div+CSS教程

最近有客戶問到“table建站、DIV建站以及XHTML建站的區(qū)別”，其實(shí)這也是國內(nèi)網(wǎng)站建設(shè)逐步走向成熟的標(biāo)志。網(wǎng)站建設(shè)，簡單的來說，就是“這個人長的怎么樣”和“這個人內(nèi)心怎么樣”。一部分是外觀所展示出來的“視覺效果”、另一部分是藏在里面的“代碼元素”。

我們先來舉一個簡單的例子，用這3種不同的代碼風(fēng)格，實(shí)現(xiàn)同一個頁面效果：

1.首先是用table來寫，需要8行代碼：

<table>

<tr>

</tr>

<tr>

</tr>

</table>

2.然后進(jìn)步到用DIV，2行就可以了，但是因?yàn)榇嬖趦蓚€DIV，為了區(qū)別，需要給不同的ID：

3.用XHTML來寫：

優(yōu)缺點(diǎn)：

用更為簡潔的XHTML代碼風(fēng)格，不僅僅是為了提升頁面開啟速度。畢竟現(xiàn)在網(wǎng)絡(luò)帶寬越來越大，打開10K的網(wǎng)頁代碼和打開5K的網(wǎng)頁代碼區(qū)別并不明顯。而采取XHTML建站的缺點(diǎn)也很明顯，如果是一個同樣規(guī)模的網(wǎng)站，用TABLE做，1小時就可以了，用DIV要2小時，用符合語義的XHTML則需要3小時，當(dāng)然這只是一個預(yù)估，根據(jù)頁面的不同和技術(shù)人員的熟練度，時間上面會有一定的出入。

那我們何必多花時間來做網(wǎng)站？

跟選老婆一樣，我們不應(yīng)該只看重這個人外觀是否美貌，而更重要的是關(guān)心她“內(nèi)部配置”如何，不然娶回家，三天兩頭跑醫(yī)院，沒事就跟你吵一架，心情肯定不會太愉悅。
一樣的，做網(wǎng)站，不能只看設(shè)計風(fēng)格如何如何。更最要的是核心代碼如何、質(zhì)量如何。我們做出來的網(wǎng)站不是擺在家里自己欣賞的，更重要的是去推廣這個網(wǎng)站，給自己的企業(yè)帶來網(wǎng)絡(luò)影響力。讓用戶搜索某個關(guān)鍵詞能找到你的網(wǎng)站，而不是找到別人的網(wǎng)站。

那怎樣讓搜索引擎找到自己的網(wǎng)站？

最簡單的方法是寫搜索引擎可以看懂的代碼，也就是機(jī)器語言。
搜索引擎并不知道頁面展現(xiàn)出來的效果是什么樣子的，它畢竟是機(jī)器，至少現(xiàn)在不會和人一樣，坐在顯示器前邊，很清楚的看到外觀，很清楚的知道主次之分。它只能通過機(jī)器語言——也就是你寫下的代碼來了解你的網(wǎng)站、收錄你的網(wǎng)站。
當(dāng)你用符合語義的XHTML，告訴它哪個是更重要的標(biāo)題（H1/H2/H3/H4/H5/H6），哪個是列表（UL/OL/DL），哪個是段落（P）……它就會認(rèn)為你是一個好人，寫下了它能看懂的語言，它就會把你的排名往前邊提。
而整個網(wǎng)站都是table布局，談不上主次之分，搜索引擎理解也會很吃力。DIV布局就更可笑了，整個網(wǎng)站寫下的都是id=”title”，更有甚者寫的都是拼音id=”biaoti”，更更有甚者用id=”tit01″，千奇百怪的代碼風(fēng)格，難道開發(fā)人員在指望現(xiàn)在的電腦就能讀懂人類語言？甚至還中文英文自創(chuàng)文都懂？

三者的關(guān)系

其實(shí)開篇就應(yīng)該提一下三者的關(guān)系，怕概念性的玩意太多，嚇跑了一般讀者，最后簡要的介紹一下。其實(shí)table、div都是xhtml的一個元素，table有它自己的作用，它就是用來做表格的，當(dāng)網(wǎng)站內(nèi)需要表格元素的時候，它是不可或缺的組成部分。div更是常用的元素之一。我們應(yīng)該按照它們在機(jī)器語言中的語義，來給予他們不同的使命，而不是簡單的拿過來隨便放在一個地方就開始用，其實(shí)哪一個元素都可以做一個網(wǎng)站，甚至可以只用p標(biāo)簽來做網(wǎng)站、只用ul標(biāo)簽來做網(wǎng)站，但那樣做出來的東西，看起來效果一樣，實(shí)際上會造成機(jī)器人的閱讀障礙。解析速度慢是小事，萬一被搜索引擎認(rèn)為是不友好因素，給屏蔽了，就麻煩了。畢竟，網(wǎng)站一個人玩沒啥意思。