html style 我為什麼要用'li'代替'div'?



html ul style (12)

我不知道為什麼我需要使用ul-li vs在列出項目時只使用div。 我可以讓兩者看起來完全一樣,所以創建無序列表的功能優勢與排列div的功能優勢在哪裡?


Answer #1

我個人喜歡li的語義。 在查看源代碼時,您立即發現您有一個列表,如果它們是由一個li包裝的。 div集合不提供語義,並且通常列表的唯一語義由css類引入,如“listItem”。 這顯然表明,應該首先使用李。

如果你的表現邏輯有一個循環,我總是喜歡利用一個div。


Answer #2

您應該為要放入的內容使用適當的標籤。 這不僅意味著ul / li更適合列表。 這也意味著你必須考慮你的列表的內容,看看它是一個無序/有序或定義列表。

另一個說法是,當你禁用CSS。 瀏覽器將呈現它的默認樣式,這使得更好地查看是否使用了替代瀏覽設備。 它也增強了可訪問性。


Answer #3

這取決於項目。 我最近做了一個項目,它有一個使用列表設計的菜單。 他們想要添加一些效果,如滑動/褪色,並且還希望使其可以在多個層次上進行折疊。

在這種情況下,DIV更適合。 我能夠為child div創建容器並應用jQuery來實現所需的效果。

即使你的項目還沒有這些要求,可能會慎重考慮你將來如何改變它。


Answer #4

直接回答你的問題:功能優勢在於divs本身意義不大,而ul lis明確表示“這是一個無序/有序的項目列表”。

術語“語義學”指的是你使用現有結構的內在意義來創造明確的意義的方式。 HTML由標籤組成,這些標籤本身意味著某些東西。 並且有確定的規則/準則/方法來使用它們,以便您發布的HTML文檔能夠傳達您想要的內容。

如果您在文檔中列出某些內容,請添加有序列表(UL)或無序列表(OL)。 另一方面,分頁(DIV)元素用於創建特定的和單獨的內容。

div元素“分開”。 當你看一個頁面時,有一些特定的部分,如內容主體,頁腳,頁眉,導航,菜單,表格等等。你可以使用div標籤創建這些分區。 通常,頁面部分與可視化佈局相對應,因此使用顯式頁面劃分(DIV)在CSS中剪切佈局是非常合適的。 這樣div標籤就變成了結構。

如果您濫用或過度使用div標記,則可能會產生意想不到的含義和代碼膨脹。

混淆事項:Google使用h3div來“劃分”他們列出的搜索結果。 ul> li> h3 + div

所以,當你關閉所有樣式(在Firefox / WebDeveloper工具欄中的Shift + Cmd / Crtl + S)時, div應該消失,並且自然地堆疊。 你的裸體HTML仍然應該呈現一個清晰的層次結構:從上到下,最重要的內容,並列出項目符號和數字。 在頂部附近添加一個鏈接(對於非可視用戶)是一個好主意,它允許您跳轉到:主要內容,重要表單或主標題(如目錄)。

最後,請記住,您正在構建一個文檔。 沒有所有的視覺效果,它應該仍然是一個有說服力的文件。


Answer #5

如果你關心的是讓列表以最小的努力尋找某種特定的方式,那麼這已經是一件不費吹灰之力了: <li>類型比<div>少一個字符其結束標記在HTML中是可選的。

除了其他人對語義學的看法。


Answer #6

關於使用<li>或使用<div>有很多討論,但沒有一個評論給出了這些標籤內部的內容的一個實例。 我的感覺是, <ul><li>並不重要,因為我不能最後一次告訴你,我實際上在網站,報紙或雜誌上在網上或印刷品上閱讀了“清單”。

<div>功能更多。 如果你列出了一個蛋糕的成分,是的,這是一個列表。 如果你列出的東西包裝遠足旅行,是的,這是一個列表。

但是,例如,用戶形式列出了一些不是真正的列表,也不是一系列段落,也不是所有“標題”的隨機事物。 有些東西是日期,有些是複選框,有些是文本。 把它分開,如果你問我。 如果一個盲人被標記為<ul><li>並且他們聽到“這是一個......的列表”,那麼這個盲人只是一堆東西,而不是一個列表。


Answer #7

<li>表示列表中的項目,並且可以讓解析器(瀏覽器,搜索引擎,蜘蛛)知道您正在列出項目。 您可以使用DIV而不是LI,但這些解析器永遠不會知道這些項目正在列出,DIV除了它是一個塊之外沒有真正描述任何內容。


Answer #8

如果您使用div,lynx將無法以可讀的方式呈現頁面。


Answer #9

使用<li> (在適當的情況下)可以減少您在網頁中經常看到的<div>標籤湯,這可以幫助開發人員解決很多問題。

並不是說<div>是壞的,但是每當標籤被濫用(通常是<div> ),它就會將標籤的語義含義稀釋到完全無用的地步。 我最近從一個我們聘請的承包商那裡了解到了這個問題,這個承包商是為了幫助我們的Web應用程序的CSS / UI,它對HTML代碼的可讀性/可維護性的差異對我來說非常明顯。


Answer #10

關於UL LI的另一件事是; 你可以使用ul作為一個容器,它可以幫助你設置Style類

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

當我使用ul時,我喜歡這種模式

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

當然,這取決於我們如何使用它以及我們喜歡它。 這是我喜歡的方式

希望有助於謝謝


Answer #11

你的問題已經回答了,我想在這裡添加我的兩分錢。 我正在研究一個項目,我正在做後端邏輯,我的數據被匯總到我的設計師製作的頁面模板中。 他使用ul和li標籤來表示頁面上的各種列表,其中一些列表是小部件。 數據來自cms,用戶可以通過html標籤輸入富文本。 當用戶開始在他們的內容中創建列表時,這些列表不再看起來像是帶有項目符號的列表,而是將整個頁面搞砸了。

經驗教訓:如果您的內容本身可以包含h​​tml,請不要使用帶有通用CSS選擇器的列表標籤。


Answer #12

林不知道為什麼我需要使用ul-li vs只列出項目時使用div。 我可以讓兩個看起來完全一樣

在你的問題中有關鍵詞:“看”。 你還可以讓他們使用盲文閱讀器為盲人輸入相同的內容嗎? 你可以讓他們對使用文本到語音合成器的盲人聽起來是一樣的嗎? 你可以使用自定義的客戶端CSS用戶樣式表讓他們看起來一樣嗎?

這個詞,“看”,是一個非常危險的詞 - 當你使用HTML的時候,所有的警報都應該在你的腦海中消失。 HTML是用於描述超媒體文檔的語義結構的語言。 語義結構沒有“外觀”,這是一個抽象的概念。

即使你不關心所有這些語義焦點,也不關心盲人,那麼考慮一下:Google,Yahoo,MSN和Co.沒有眼睛,他們不會“看”你的CSS 。





html-lists