Question

我不确定为什么我需要使用ul-li而不是在列出项目时使用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

直接回答您的问题：功能优势是 divs 本身意义不大，而 ul lis 明确表示“这是一个未/有序的项目列表”。

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

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

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

如果您滥用或过度使用 div 标记，则可能会产生意想不到的含义＆amp;代码臃肿。

混淆问题：Google使用 h3 和 div 来“划分”其列出的搜索结果。 ul＆gt; li> h3 + div

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

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

Answer 5

有很多关于使用<li>或使用<div>的讨论，但没有一条评论给出了这些标记内容的可靠示例。我的感觉是<ul>和<li>并不是那么重要，因为我不能告诉你我最后一次在网站，报纸或杂志上阅读“列表” - 在线或在线打印。

<div>更加通用。如果你列出蛋糕的成分，是的，这是一个列表。如果你列出了远足旅行的东西，那就是一个清单。

但是，例如，用户形式列出了一些实际上不是列表的随机事物，也没有列出一系列段落，也没有列出所有“标题”。有些东西是日期，有些是复选框，有些是文字。如果你问我，请把它分开。如果一个盲人用<ul>和<li>进行了标记，并且他们听到“这是一个...的列表”，当它只是一个躲闪的东西时，他就会被误导。真的是一个清单。

Answer 6

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

另一个论点是当你禁用css时。浏览器将呈现它的默认样式，这样可以更好地查看是否使用了其他浏览设备。它还增强了可访问性。

Answer 7

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

Answer 8

我个人喜欢li的语义。查看源代码时，如果它们被li包装，您会立即看到有一个列表。 div集合不提供语义含义，通常列表的唯一语义由css类引入，如“listItem”。这显然表明应该首先使用li。

如果你的演示逻辑中有一个循环，我总是喜欢li而不是div。

Answer 9

＆LT;李＆GT;表示列表中的项目，它允许解析器（浏览器，搜索引擎，蜘蛛）知道您正在列出项目。您可以使用DIV而不是LI，但这些解析器永远不会知道这些项目正在列出，而DIV除了它是一个块之外并没有真正描述任何东西。

Answer 10

使用<li>（在适当的情况下）会减少您经常在网页中看到的<div>标记汤，这有助于开发人员大量使用。

不是<div>是坏的，但每当标签被过度使用时（通常是<div>），它就会将标签的语义稀释到完全没用的地步。我最近从我们聘请的承包商处了解到这一点，我们帮助使用我们的网络应用程序的CSS / UI，并且它对HTML代码的可读性/可维护性的区别对我来说非常明显。

Answer 11

如果你所关心的只是让列表以最小的努力以某种方式显示，那么这已经不费吹灰之力了：<li>比<div> 更少输入一个字符它的结束标记在HTML中是可选的。

除此之外，还有其他所有关于语义的说法。

Answer 12

在原始浏览器或移动设备上正确呈现

Answer 13

这取决于项目。我最近做了一个项目，其中包含使用列表设计的菜单。他们想要添加一些效果，比如滑动/渐变，还想让它可以在多个级别上折叠。

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

即使你的项目还没有这些要求，考虑将来如何改变它可能是明智的......

Answer 14

关于ul li的另一件事是;你可以使用ul作为容器来帮助你设置Style class

<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 15

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

吸取的教训：如果您的内容本身可以包含html，请不要将列表标签与通用css选择器一起使用。

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

15 个答案: