122

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

4

15 回答 15

152

为了语义正确。HTML 具有表达事物列表的能力，它可以帮助 Google 机器人、屏幕阅读器和各种不只关心网站呈现的用户更好地理解您的内容。

于 2009-02-14T19:55:34.843 回答
134

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

你的问题中有一个关键词：“看”。您是否也可以让盲人使用盲文阅读器输入相同的内容？你能用文本到语音合成器让盲人听起来一样吗？您仍然可以使用自定义客户端 CSS 用户样式表让视障人士看起来相同吗？

“看”这个词是一个非常危险的词——当你在 HTML 中使用它时，所有的警报都应该在你的脑海中响起。HTML 是一种用于描述超媒体文档的语义结构的语言。语义结构没有“外观”，它是一个抽象概念。

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

于 2009-02-14T20:41:23.080 回答
17

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

于 2009-02-14T19:55:14.440 回答
17

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

术语“语义”是指您使用现有结构的固有含义来创建明确含义的方式。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 仍然应该呈现一个具有清晰层次结构的漂亮页面：从上到下，最重要的内容在前，列表中包含项目符号和编号。最好在顶部附近添加一个链接（对于非视觉用户），让您可以跳至：主要内容、重要表单或主要标题（如目录）。

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

于 2010-06-10T15:12:38.037 回答
7

有很多关于使用<li>或使用的讨论，<div>但没有一条评论给出了这些标签内部内容的可靠示例。我的感觉是，<ul>并不是<li>那么重要，因为我不能告诉你我上次在网站、报纸或杂志上阅读“清单”是什么时候——在线或印刷。

<div>用途广泛得多。如果您要列出蛋糕的成分，是的，那是一个清单。如果您要列出远足旅行要打包的东西，是的，那是一个清单。

但是，例如，用户表单会列出一些随机的东西，这些东西不是真正的列表，也不是一系列段落，也不是所有“标题”。有些东西是日期，有些是复选框，有些是文本。分吧，如果你问我。如果它被标记为盲人会被误导，<ul>并且<li>当它只是一个大杂烩，而不是真正的列表时，他们听到“这是...的列表”。

于 2011-03-04T22:38:54.593 回答
4

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

另一个论点是当你禁用 css 时。浏览器将呈现其默认样式，如果使用其他浏览设备，则更易于查看。它还增强了可访问性。

于 2009-02-14T19:58:43.650 回答
4

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

于 2009-02-14T20:06:00.763 回答
3

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

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

于 2009-02-14T20:08:39.633 回答
3

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

于 2009-02-14T20:38:38.610 回答
3

这取决于项目。我最近做了一个使用列表设计菜单的项目。他们想要添加一堆效果，比如滑动/淡入淡出，还想要让它在多个关卡中可折叠。

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

即使您的项目还没有这些要求，考虑将来如何更改它可能是谨慎的......

于 2011-04-09T17:02:38.830 回答
2

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

这并不是<div>坏事，但每当标签被过度使用（<div>通常是这样）时，它会稀释标签的语义含义到完全无用的程度。我最近从我们聘请的一名承包商那里了解到这一点，该承包商帮助我们处理 Web 应用程序的 CSS/UI，它对 HTML 代码的可读性/可维护性的影响对我来说非常明显。

于 2009-02-14T21:01:27.900 回答
2

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

这是除其他人所说的语义之外的内容。

于 2009-02-14T21:07:09.837 回答
2

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

于 2009-02-14T22:43:01.480 回答
2

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

经验教训：如果您的内容本身可以包含 html，请不要使用带有通用 css 选择器的列表标签。

于 2013-02-01T17:45:25.563 回答
0

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

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

希望有帮助 谢谢

于 2009-02-14T20:04:16.650 回答