为什么要使用“ li”而不是“ div”？

我不确定为什么列出项目时为什么需要使用ul-li而不是简单地使用div。我可以使两者看起来完全一样，因此与创建div相比，创建无序列表的功能优势在哪里？

为了语义正确。HTML具有表达事物列表的功能，它可以帮助Google机器人，屏幕阅读器以及所有不仅仅关心网站外观的用户更好地了解您的内容。

我不确定为什么在列出项目时为什么我需要使用ul-li而不是简单地使用div。我可以使两者看起来完全一样

您的问题中有一个关键词：“看”。您还可以使用盲文阅读器使盲人输入相同的文字吗？您可以使用文字转语音合成器让盲人听到相同的声音吗？对于使用自定义客户端CSS用户样式表的视力障碍者，您仍然可以使它们看起来一样吗？

“ look”这个词是一个非常危险的词–当您将其与HTML结合使用时，所有警报都应该响起。HTML是一种用于描述超媒体文档的语义结构的语言。语义结构不会有一个“看”，它是一个抽象的概念。

即使您不关心所有这些语义场所，也不关心盲人，请考虑一下：Google，Yahoo，MSN和Co.没有眼睛，他们不会“看着”您渲染的CSS 。

通过使用语义上正确的标记，您可以在文本中嵌入额外的信息。通过使用ul / li，您正在向使用方应用程序传达信息是列表，而不仅仅是在任意元素内包含某些文本的“某物”（谁知道）。

您问题的直接答案：功能上的好处是div本身没有什么意义，而ul lis明确意味着“这是无序的项目列表”。

术语“语义学”是指您使用现有结构的固有含义来创建显式含义的方式。HTML由标记组成，这些标记本身就意味着某些事情。并且已经建立了使用它们的规则/准则/方式，以便您发布的HTML文档能够传达您想要的含义。

如果您在文档中列出了某些内容，则添加有序列表（UL）或无序列表（OL）。另一方面，页面分割（DIV）元素用于创建特定且独立的内容。

该DIV元素“鸿沟”。当您查看页面时，会有特定的部分，例如内容主体，页脚，页眉，导航，菜单，表单等。您可以使用div标签创建这些分区。通常，页面部分与视觉布局相对应，因此使用显式页面划分（DIV）在CSS中剪切布局是很自然的选择。这样，div标签就变得结构化。

如果您滥用或过度使用div标签，它可能会造成意想不到的含义和代码膨胀。

令人困惑：Google使用h3和div来“划分”其列出的搜索结果。ul> li> h3 + div

因此，当您关闭所有样式（带有WebDeveloper工具栏的Firefox中的Shift + Cmd / Crtl + S）时，div应该消失，并自然堆叠。裸露的HTML仍应呈现一个清晰的层次结构清晰的页面：从上到下，最重要的内容在前，并列出项目符号和编号的列表。最好在顶部附近添加一个链接（对于非视觉用户），该链接使您可以跳至：主要内容，重要表格或主要标题（如目录）。

最后，请记住您正在构建文档。没有所有的视觉效果，它仍然应该是有力的文件。

关于使用<li>或使用的讨论很多，<div>但没有一个评论提供了这些标签内部内容的可靠示例。我的感觉是，<ul>和<li>是不是真的那么重要，因为我不能告诉你最后一次，我实际上是在一个网站，报纸或杂志阅读的事情“清单” -在网上或打印。

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

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

您应该对要放入的内容使用适当的标签。这不仅意味着ul / li更适合列表。这也意味着您必须考虑列表的内容，并查看其列表是无序/有序还是定义列表。

另一个参数是禁用css时。浏览器将呈现其默认样式，这使得使用其他浏览设备时更加美观。它还增强了可访问性。

如果您改用div，则lynx将无法以可读的方式呈现页面。

我个人喜欢li的语义。在查看源代码时，您会立即看到如果列表中的内容由li包裹，那么您会看到列表。div集合不提供语义含义，通常列表的唯一语义是由css类（如“ listItem”）引入的。显然，这表明应该首先使用li。

如果您的表示逻辑中有一个循环，那么我总是偏爱li而不是div。

<li>表示列表中的一个项目，可让解析器（浏览器，搜索引擎，蜘蛛）知道您正在列出项目。您可以使用DIV而不是LI，但是那些解析器永远不会知道那些项已被列出，并且DIV只是描述了一个块而没有真正描述任何东西。

这取决于项目。我最近做了一个项目，该项目具有使用列表设计的菜单。他们想添加一堆效果，例如滑动/淡入淡出，还希望使其可折叠成多个级别。

在这种情况下，DIV更合适。我能够为子div创建容器并应用jQuery以达到所需的效果。

即使您的项目还没有这些要求，请仔细考虑一下将来如何更改它……

使用<li>（在适当情况下）可减少<div>您经常在网页上看到的标签汤，这对开发人员有很大帮助。

并不是<div>很糟糕，但是只要标签被过度使用（<div>经常如此），它就会将标签的语义稀释到完全无用的地步。我最近从一个承包商那里学到了这一点，我们聘请了一个承包商来帮助我们的Web应用程序的CSS / UI，它对HTML代码的可读性/可维护性产生了很大的影响。

如果您关心的只是让列表以最小的努力看起来是某种方式，那么这已经不费吹灰之力了：<li>键入的字符数比少一个，<div> 并且其结束标记在HTML中是可选的。

除此之外，其他所有人都对语义有所描述。

用于在原始浏览器或移动设备上正确渲染

我想在这里加两分钱，已经回答了您的问题。我当时在做一个后端逻辑的项目，我的数据被汇总到我的设计师制作的页面模板中。他使用ul和li标签表示页面上的每种列表，其中一些是小部件。数据来自cms，用户可以在其中通过html标签输入富文本。当用户开始在其内容中创建列表时，列表不再看起来像项目符号列表，而是整个页面的混乱。

经验教训：如果内容本身可以包含h​​tml，请不要将列表标签与通用css选择器一起使用。

关于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

当然，这取决于我们要如何使用它以及我们如何喜欢它。这就是我喜欢的方式

希望可以帮助谢谢