Question

您好我有六个月的网络开发经验。我有以下观察，我经常使用<div>标签，它使我能够定位元素，归档元素，似乎我可以使用<div>标签来完成所有操作，只需使用其显示属性即可。

我从来没有必须组合使用<ul>或<li>元素，水平菜单导航除外，我不知道为什么你不能用<div>元素做到这一点，但它似乎是实现水平菜单的“惯例”。

我错过了什么吗？ <li>元素有哪些属性比<div>元素更好或更有用？

_{请不要将此问题仅限于水平菜单列表;我想知道你会使用<li>而不是别的东西。}

Answer 1

是的，您可以使用div标签严格执行任何操作（或多或少）（例外情况，例如表单和输入，图像，以及不是）。但那不是重点。

首先，特定标签应用了默认的css。例如，李有子弹。您可以更改这些，但在许多情况下，使用具有您正在寻找的样式的标记会更容易。

但最重要的原因是所谓的“语义标记”，即你使用哪个元素对应于语义的概念。 li意味着它是一个项目列表，所以即使你没有应用CSS（例如当屏幕阅读器为盲人朗读一个页面时），它仍然有意义。

Answer 2

使用一个标签而不是另一个标签的唯一原因是语义。 HTML语法的目的是为正在呈现的内容提供意义。

<ul>元素是无序列表。这意味着内容是订单不重要的项目集合。

<div>元素只是一个结构元素，没有与之关联的语义。您当然可以使用<div>元素来创建通常与<ul>元素相关联的样式，但这意味着会丢失原始元素的固有语义。

如果您想使用<div>元素维护原始语义，可以使用list role：

<div role="list">
    <div role="listitem">...content...</div>
    <div role="listitem">...content...</div>
    <div role="listitem">...content...</div>
</div>

然而，WAI-ARIA角色模型得不到很好的支持，因此您最好使用基本标记：

<ul>
    <li>...content...</li>
    <li>...content...</li>
    <li>...content...</li>
</ul>

Answer 3

HTML标记应该有助于解释布局的意图。当你将div用于所有内容时，它对内容一无所知。 ul / li清楚地表明您有相关项目列表。

这是在HTML5中添加许多新标签的动机：使布局具有更多语义，使人们更容易理解维护代码和屏幕阅读器。所以是的，你可以用一个div来制作一个你想要的页面，但是它会更难理解。

Answer 4

现在取决于您的需求，您可以使用任何标记，例如，如果您想创建自定义选择不适合使用div，因为使用ul li更有用，请查看此示例：http://jsfiddle.net/RwtHn/1152/ 现在，如果你想确定一个你想要添加不同paragaphs的部分，pics或其他静态元素可以更好地使用div。检查这个ul li：http://www.w3.org/TR/html401/struct/lists.html和这对于div：http://www.w3.org/wiki/HTML/Elements/div。在使用什么时不是规则，但如果您编写良好的话，它可以帮助您进行Web开发。欢呼声。

div vs li何时使用它们

4 个答案: