我为什么要用'li'而不是'div'？

Question

我不确定为什么我需要使用ul-li vs在列出项目时简单地使用div.我可以使两者看起来完全一样,那么创建无序列表与排队div的功能优势在哪里？

Answer 1

对于语义正确性.HTML能够表达事物列表,它有助于Google机器人,屏幕阅读器以及不关心网站演示的各种用户更好地理解您的内容.

Answer 2

我不知道为什么我需要使用ul-li vs在列出项目时简单地使用div.我可以让两者看起来完全一样

你的问题中有关键词:"看".您是否也可以使用盲文阅读器为盲人打字？对于使用文字转语音合成器的盲人,你能让它们听起来一样吗？您是否仍然可以使用自定义客户端CSS用户样式表让视障人士看起来一样？

这个词,"看起来",是一个非常危险的词 - 当你使用它与HTML相关时,所有的报警都应该在你脑海中消失.HTML是用于描述超媒体文档的语义结构的语言.语义结构不会有一个"看",它是一个抽象的概念.

即使你不关心所有这些语义hocuspocus并且你不关心盲人,考虑一下:Google,Yahoo,MSN和Co.没有眼睛,他们不"看"你的渲染CSS .

Answer 3

通过使用语义正确的标记,您可以在文本中嵌入额外的信息.通过使用ul/li,您正在与消费应用程序通信,信息是一个列表,而不仅仅是"某事"(谁知道什么)是任意元素中的某些文本.

Answer 4

直接回答你的问题:功能优势是div本身意味着很少,而ul lis明确表示"这是一个un/ordered的项目列表."

术语"语义"指的是使用现有结构的固有含义来创建显式含义的方式.HTML由标签组成,这些标签本身就是某些事物.并且已经建立了规则/指南/方法来使用它们,以便您发布的HTML文档传达您想要它的含义.

如果您在文档中列出了某些内容,则添加有序列表(UL)或无序列表(OL).另一方面,页面分割(DIV)元素用于创建特定的和单独的内容.

该DIV元素"分".当您查看页面时,会有特定的部分,如内容正文,页脚,标题,导航,菜单,表单等.您可以使用div标签来创建这些分区.通常,页面部分与可视布局相对应,因此使用显式页面划分(DIV)来切割CSS中的布局是很自然的选择.这样div标签就变成了结构.

如果您滥用或过度使用div标签,它可能会产生意外的意义和代码膨胀.

混淆问题:谷歌使用h3和div来"划分"他们列出的搜索结果.ul> li> h3 + div

因此,当您关闭所有样式(在Firefox/WebDeveloper工具栏中的Shift + Cmd/Crtl + S)时,div应该消失,并自然堆叠.您的裸HTML仍然应该呈现一个具有清晰层次结构的漂亮页面:从上到下,最重要的内容,以及列出项目的项目符号和数字列表.并且最好在顶部附近添加一个链接(对于非可视用户),允许您跳到:主要内容,重要表单或主要标题(如目录).

最后,请记住您正在构建文档.没有所有的视觉效果,它应该仍然是一个有说服力的文件.

Answer 5

关于使用<li>或使用的讨论很多，<div>但没有一个评论提供了这些标签内部内容的可靠示例。我的感觉是，它并不是那么重要，因为我上次无法告诉您上次我实际上是在网上，印刷版的网站，报纸或杂志上阅读事物的“列表”时，<ul>并<li>没有那么重要。

<div>更通用。如果您列出蛋糕的配料，是的。如果您列出要徒步旅行的东西，是的。

但是，举例来说，一个用户表单列出了一些随机的东西，这些东西实际上不是列表，也不是一系列段落，也不是所有“标题”。有些东西是日期，有些是复选框，有些是文本。如果你问我，那就把它分散起来。如果一个盲人被标记了，就会被误导<ul>，<li>并且他们听到“这里是……的清单”，而这只是杂乱无章的东西，而不是真正的清单。