5

嗨，我有大约六个月的 Web 开发经验。我有以下观察，我经常使用<div>标签，它使我能够定位元素，归档元素，而且似乎我可以使用<div>标签来做任何事情，只需使用它的显示属性。

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

我错过了什么？元素是否有一些<li>比<div>元素更好或更有用的属性？

请不要将此问题仅限于水平菜单列表；我想知道你会使用 a<li>而不是其他东西的任何场景。

4

4 回答 4

7

是的，您可以严格地使用 div 标签做任何事情（或多或少）（除了表单和输入、图像等例外）。但这不是重点。

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

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

于 2012-09-25T17:57:15.123 回答
3

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

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

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

如果你想保持<div>元素的原始语义，你可以使用list角色：

<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>
于 2012-09-25T17:54:58.243 回答
1

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

这是在 HTML5 中添加许多新标签的动机：使布局具有更多语义，使维护代码的人员和屏幕阅读器更易于理解。所以是的，你可以只用 div 让页面看起来像你想要的那样，但这会更难理解。

于 2012-09-25T17:56:01.563 回答
0

现在取决于您的需要，您可以使用任何标签，例如，如果您想创建自定义选择，则不能使用 div，因为使用 ul li 更有用，请查看以下示例：http: //jsfiddle.net/RwtHn/1152/ 现在，如果您想确定要在其中添加不同段落、图片或其他静态元素的部分，则使用 div 更好。检查这个 ul li ：http ://www.w3.org/TR/html401/struct/lists.html 和这个 divs ：http ://www.w3.org/wiki/HTML/Elements/div 。何时使用该使用什么不是规则，但如果您编码良好，它可以帮助您进行 Web 开发。干杯。

于 2012-09-25T18:44:10.203 回答