為什麼要使用UL和LI？

class="area"> 如題，我現在做DIV+CSS的網頁，我感覺只要有DIV基本上什麼都能實現了，UL和LI我感覺用起來很麻煩，因為默認有圓點，還有前導空格。

比如我現在做一個文字列表，我可以最外面一個DIV，然後裡面每行文字一個DIV。

可是我看了很多人家的網頁，都是DIV，UL和LI混合使用的。請問這樣用有什麼好處？UL及LI標記到底比DIV有些什麼優勢呢？

---

li本來用於做列表的，正如P用於段落，當然你用DIV通過定義CSS也完全可以模擬出li、p等標簽。
正如你所說“用DIV基本上什麼都能實現了”，試下如果去了CSS樣式你的網頁是什麼樣子的。列表用LI，即使沒有CSS支持，還是列表的形式。

---

絕不考慮使用table，橫向布局用帶有float的div或li取代td。慎用ul li，當有重復單元時可使用ul li，沒有重復的單元就別用ul，那樣代碼看上去很不整齊。

最大限度利用ul li的優點。用ul li可以減少class=””的聲明數量，當你把一套重復單元放進li之後，在ul裡定義一個class=””就足夠了。當然會付出代價，ul的兼容問題比div成倍的多。

---

當你在問這個問題的時候，你應該先找點資料了解一下UL的語義。

---

頂

---

引用 1 樓 junp2007 的回復:
li本來用於做列表的，正如P用於段落，當然你用DIV通過定義CSS也完全可以模擬出li、p等標簽。
正如你所說“用DIV基本上什麼都能實現了”，試下如果去了CSS樣式你的網頁是什麼樣子的。列表用LI，即使沒有CSS支持，還是列表的形式。


用了UL如果去了CSS網頁也沒法看啊。我覺得這應該不是主要原因

---

引用 2 樓 myvicy 的回復:
最大限度利用ul li的優點。用ul li可以減少class=””的聲明數量，當你把一套重復單元放進li之後，在ul裡定義一個class=””就足夠了。當然會付出代價，ul的兼容問題比div成倍的多。


只在UL裡定義class往往都不夠啊，比如橫向排列，li裡也要定義風格才行。這和用DIV來做似乎差不多嘛。

---

無視我的回復了- -!

每個標記都應該用在適當的地方，該用div就用div, 該用table就用table, 該用ul就用ul, 每個標記都是具有語義的!

---

這個我當然知道。UL就是列表的意思嘛。可是照你這麼說，現在網頁都該用TABLE來做了？DIV本身的語意是“層”啊。為什麼現在會轉為DIV+CSS呢。因為DIV有其優勢嘛。同樣的道理，既然用UL做列表那麼麻煩，而且兼容性不好。DIV那麼方便，那為什麼不只用DIV呢。而那麼多網站都還在用UL。

本人做web開發也3年了，我的水平應該不算菜了。但這個問題一直沒搞懂。

---

該用的時候就用

---

樓主混了三年了,哈哈
我剛混了快一年了
樓主加油.

---

引用 8 樓 myr_2002 的回復:
這個我當然知道。UL就是列表的意思嘛。可是照你這麼說，現在網頁都該用TABLE來做了？DIV本身的語意是“層”啊。為什麼現在會轉為DIV+CSS呢。因為DIV有其優勢嘛。同樣的道理，既然用UL做列表那麼麻煩，而且兼容性不好。DIV那麼方便，那為什麼不只用DIV呢。而那麼多網站都還在用UL。

本人做web開發也3年了，我的水平應該不算菜了。但這個問題一直沒搞懂。


你真正了解table的語義麼？知道table的本職工作是什麼麼？

另：ul的兼容性不好，那得看你自己的了解程度，我並不覺得它會比table更難控制！

---

要因時，因需而定。
不過，就本人的經驗來看，ul並沒有樓主所說的“UL做列表麻煩，兼容性不好”。

---

引用 9 樓 tantaiyizu 的回復:
該用的時候就用


那請問什麼時候該用？

---

引用 11 樓 storm0 的回復:
你真正了解table的語義麼？知道table的本職工作是什麼麼？

另：ul的兼容性不好，那得看你自己的了解程度，我並不覺得它會比table更難控制！

我只想知道用UL比用DIV來做列表的優勢。。。

---

引用 12 樓 hsj454174023 的回復:
要因時，因需而定。
不過，就本人的經驗來看，ul並沒有樓主所說的“UL做列表麻煩，兼容性不好”。


可能你UL用習慣了吧，如果同樣做一個列表，至少UL的CSS要多定義一個margin-left:0px，才能使列表左邊多出一段空白，當然了，如果剛好需要實現前面留點空白的情況那另當別論。

而且，這篇文章相信你看過。
li標簽的間距問題
http://www.syscy.com/articleview/2008-2-26/article_view_92.htm
可以說單單做一個列表的話用DIV不會有這麼多問題的。

---

樓主還是找些HTML的基礎教程來掃下盲吧，了解下各標簽的語義

---

li/UL本來用於做列表的，尤其是在沒有CSS的時代。

---

引用 16 樓 junp2007 的回復:
樓主還是找些HTML的基礎教程來掃下盲吧，了解下各標簽的語義


請不要老跟我強調語義，以本人的水平還不至於連HTML基礎都沒過的程度。
我想問的只是UL做列表比起DIV做列表的優勢，你們不要總是答非所問。
誰不知道table是用來做表格的？可是如果一個表格裡有很多很多內容，你說你用table來做還是用DIV來做？
所以請不要再說什麼UL本來就是用來做列表的。我只想知道UL與DIV的比較。

---

看看這裡:
[img]http://www.hbcms.com/image/gg/468_60_001.gif[/img]

---

我覺得這也是一種書寫習慣.DIV,TABLE就是用來布局的,UL,TR就是輸出行,LI,TD就是輸出列.
樓主當然可以全部都用DIV來實現所有效果,但我想請問你會在整個頁面上全放TABLE而不用TR,TD麼?如果按您所說的,那不需要TR和TD而全放TABLE也是可以實現效果的.
既然人家提供了一種列表項的標簽來顯示列表的效果,為啥不用呢...
就優勢來說,我感覺UL,LI(或TR,TD)的方式比多個DIV(或TABLE)嵌套的方式要容易理解的多,而且可讀性也比較好.這樣寫會比有層次感.
試想下一個頁面打開全是DIV有多恐怖...

---

可以全部使用div而不使用ul li，只要你願意，頁面上所有的布局完全可以只用div實現，當然，也可以完全只用ul li實現，沒有人強制規定應該怎麼用，甚至你也可以繼續用table布局。不過既然兩種方法都能實現需要的顯示效果，那就根據標簽的語義來選擇使用，這樣便於自己和他人也包括搜索引擎的理解。

---

引用 14 樓 myr_2002 的回復:
引用 11 樓 storm0 的回復:
你真正了解table的語義麼？知道table的本職工作是什麼麼？

另：ul的兼容性不好，那得看你自己的了解程度，我並不覺得它會比table更難控制！

我只想知道用UL比用DIV來做列表的優勢。。。


優勢就在於ul,ol...就是列表，而table是表格。那麼你說列表是用列表來做還是用表格來做呢？

如果你覺得還有問題...

---

引用 22 樓 storm0 的回復:

優勢就在於ul,ol...就是列表，而table是表格。那麼你說列表是用列表來做還是用表格來做呢？

如果你覺得還有問題...


你早說這句話不就完了嘛,搞得我看到這裡才看到答案.

---

引用 22 樓 storm0 的回復:
優勢就在於ul,ol...就是列表，而table是表格。那麼你說列表是用列表來做還是用表格來做呢？

如果你覺得還有問題...



不好意思，你這句話我還是覺得有點問題。你不能把UL和TABLE來對比呀。這兩個完全是不同的作用，沒有可比性。
如果說用TABLE來和DIV比較那還差不多。TABLE我最初的感覺是一格一格的，DIV是一塊一塊的。按理說TABLE和DIV都可以用來頁面布局，用TABLE把頁面切割成許多單元格，整個頁面是一個TABLE。而DIV則是把頁面分割成獨立的塊。整個頁面是一個大塊。

但在過去，div+css技術還未被提出來時，人們為什麼會選擇用table而不用div呢。因為那時大家覺得table用來布局很方便，所以就選了table，但後來人們逐漸發現其缺點，那就是如果table內容較多，會導致整個table的內容都顯示很慢，而DIV則不會這樣。所以才提出要用DIV+CSS來布局。這是人們選擇DIV來布局而拋棄TABLE布局的原因。

當然，如果從語義上來講。table和div都沒有布局的意思。table本來是用來做表格的，甚至是在現在的DIV+CSS裡也可能還要用到TABLE來做表格。而DIV則是層，可以應用在任何地方。之所以用來布局是因為它目前是最適合的布局標記。

現在來說UL和DIV。如果從語義上來說，的確UL是專門做列表的，用UL比用DIV更便於代碼閱讀者理解。但除此之外，我看不到UL比DIV來做列表更多的優勢。反而我看到的是用DIV做列表比用UL更容易，UL的兼容性問題很多。雖然DIV的兼容性問題比TABLE多，但至少DIV有TABLE無法彌補的優勢，因此大家才寧願拋棄簡單的TABLE，而用更復雜的DIV。而UL卻沒有這樣的優勢，所以我才提出這個問題。

歡迎大家繼續討論，我到時再加分。

---

再給你轉一篇網上 的文章

有意義標簽的好處，讓我們更加容易理解代碼的內容，更加容易處理他們。例如我們需要修改頁面中所有的外鏈，我們如果為這些元素加上了合適的標記，我們很容易的就找到它們並進行修改。如果一切都混雜在一起，我們就無從下手了。

除了讓我們的開發變的容易之外，其它設備與程序對文檔也可以有更好的理解，最典型的要屬搜索引擎的識別了，搜索引擎可以非常方便的找到文章中的標題，副標題，文章內容。如果浏覽者使用的是手持閱讀設備，可以依靠標題，內容等給予很好的導航與顯示比重。

最重要的是有意義的HTML標簽，將提供了將元素調整為你所想要的樣式的簡單的方法，這些有意義的標簽在文檔中創建了一個最基本的結構框架模型，我們不必添加其它的id或class其它標識，直接就可以進行表現的控制。 [中國站長站]

這些有意義的標簽主要有：

h1、h2...h6；
ul、ol、dl；
strong、em；
blockquote、cite；
a