頁面設計中table和div的合理應用簡要說明
2024-08-30 08:35:01
供稿：網友
在這篇文章開篇，我先糾正一下我之前寫的一篇入門文章的錯誤，還是先引用一下比較官方的說法吧，避免再次誤導各位新手
<!DOCTYPE> 聲明必須位于 HTML5 文檔中的第一行，也就是位于 <html> 標簽之前。該標簽告知瀏覽器文檔所使用的 HTML 規范。
doctype 聲明不屬于 HTML 標簽；tag; 它是一條指令，告訴瀏覽器編寫頁面所用的標記的版本。
在所有 HTML 文檔中規定 doctype 是非常重要的，這樣瀏覽器就能了解預期的文檔類型。
HTML 4.01 中的 doctype 需要對 DTD 進行引用，因為 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要對 DTD 進行引用，但是需要 doctype 來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行。）。
在 HTML 4.01 中有 3 個不同的文檔類型，在 HTML 5 中只有一個：
<!DOCTYPE HTML>
因為HTML5 這個聲明文檔類型的標簽是向下兼容的，所以即使你的html基本不使用HTML5的標簽 ，你也可以使用這個聲明方式，但是頁面中會有某些不兼容的地方，這個就需要你根據實際情況來修正了。<!doctype html>可以讓瀏覽器在嚴格模式（標準模式）下渲染頁面，而不需要指定某個類型dtd。
再進入今天的主體：table和div 的合理應用
Table在早期的頁面設計中應用廣泛，但是隨著互聯網的發展table漸漸被拋棄，現在互聯網上只有一小部分老站（有名氣，不必要改的那種有很多），還是沿用著table來布局頁面，現在的新站基本上都是使用了div+css來布局頁面，但是很多web前端初入門的朋友就會產生一種錯覺，認為table會是頁面對搜索引擎不友好的元兇，所以在設計列表的時候總是會去使用dt ，ul 之類的標簽。這樣有的使用會讓你多花很多設計頁面樣式的時間，而真正對搜索引擎優化的效果很微弱。
大量使用table的一個非常大的弊端除了對搜索引擎不友好，還有就是對程序員也非常的不友好，table的大量嵌套，會讓人看的很暈。但是如果配合著div使用的話就會提供效果，達到的效果或許比dt，ul來的更加好。
還有一個問題就是大量的table tr td 會讓你頁面的語義非常的差，這里先不討論標簽語義化，大家自己去百度搜一下，語義良好的頁面，搜索引擎是非常的喜好的，這里我先介紹一個語義化很好的網站 http://www.survivalescaperooms.com/w3school/ 大家也可以自己動手操作，用谷歌瀏覽器去掉它的css鏈接，然后再看它的頁面布局，你會發現，它的所有的標題，列表，都井然有序，就像是寫論文的時候非常正規的排版一樣，即使不要樣式表，相信大家也不會產生非常大的厭惡感，但是有些網站就不一樣了，去掉css樣式文件之后，頁面直接就癱了，這里再發個站www.webgamei.com 去掉它的css樣式文件 （2個） 再看頁面，因為它的樣式很多都是直接寫進table中的style中，所以你看起來沒有很大的變化，但是你看導航部分，會發現，頁面毫無語義感，若是頁面的樣式分離開了，那去掉css文件，估計沒法看了。
所以這里建議，在你的頁面設計出來之后，你可以先不去加css樣式，直接先把默認樣式的版面寫出來，在根據頁面去加css自定義樣式，這樣會不會更高效點呢 ，呵呵 ，我沒試過，只是這么想而以。
關于語義的內容很多，這里我也不說太多了，介紹大家一本書 《編寫高質量代碼--Web前端開發修煉之道》很不錯的一本書，里面對語義化介紹的很清楚。頁面布局是一個經驗積累的過程，看到好的網站，它的頁面布局，你都可以借鑒一下，看到不好的，你也可以想一下該怎么去優化它，這樣才能在web前端之路上成長更快。
寫的不詳盡之處還請web前輩指正，謝謝
