table建站、DIV建站以及XHTML建站的區别

21天Excel零基礎速成訓練營,導師帶學+答疑輔導+實戰作業,讓你真正掌握Excel技能,了解一下>>

table建站、DIV建站以及XHTML建站的區别

最近有客戶問到“table建站、DIV建站以及XHTML建站的區别”,其實這也是國内網站建設逐步走向成熟的标志。網站建設,簡單的來說,就是“這個人長的怎麼樣”和“這個人内心怎麼樣”。一部分是外觀所展示出來的“視覺效果”、另一部分是藏在裡面的“代碼元素”。

我們先來舉一個簡單的例子,用這3種不同的代碼風格,實現同一個頁面效果:

1.首先是用table來寫,需要8行代碼:

  1. <table>
  2. <tr>
  3. <th>網站标題</th>
  4. </tr>
  5. <tr>
  6. <td>網站内容</td>
  7. </tr>
  8. </table>

2.然後進步到用DIV,2行就可以了,但是因為存在兩個DIV,為了區别,需要給不同的ID:

  1. <div id=“title“>網站标題</div>
  2. <div id=“content“>網站内容</div>

3.用XHTML來寫:

  1. <h1>網站标題</h1>
  2. <div>網站内容</div>

優缺點:

用更為簡潔的XHTML代碼風格,不僅僅是為了提升頁面開啟速度。畢竟現在網絡帶寬越來越大,打開10K的網頁代碼和打開5K的網頁代碼區别并不明顯。而采取XHTML建站的缺點也很明顯,如果是一個同樣規模的網站,用TABLE做,1小時就可以了,用DIV要2小時,用符合語義的XHTML則需要3小時,當然這隻是一個預估,根據頁面的不同和技術人員的熟練度,時間上面會有一定的出入。

那我們何必多花時間來做網站?

跟選老婆一樣,我們不應該隻看重這個人外觀是否美貌,而更重要的是關心她“内部配置”如何,不然娶回家,三天兩頭跑醫院,沒事就跟你吵一架,心情肯定不會太愉悅。
一樣的,做網站,不能隻看設計風格如何如何。更最要的是核心代碼如何、質量如何。我們做出來的網站不是擺在家裡自己欣賞的,更重要的是去推廣這個網站,給自己的企業帶來網絡影響力。讓用戶搜索某個關鍵詞能找到你的網站,而不是找到别人的網站。

那怎樣讓搜索引擎找到自己的網站?

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

三者的關系

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

轉載請注明:出自 崔凱的博客

原文:http://uicss.cn/table-div-and-xhtml/

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言讨論~!
圈子
關注微信公衆号
大家都在問