可以将div或锚标签包裹在<LI>周围仍被视为有效的html结构

Question

我还注意到我正在使用的网站的<ul>结构清单编写不正确。我认为此代码不符合正常的HTML标准。

当前，代码是以这种方式编写的。

<ul>

<a href="#"><li>message 1</li></a>

<a href="#"><li>message 2</li></a>

<a href="#"><li>message 3</li></a>

</ul>

当然，正确的HTML格式应该是

<ul>

<li><a href="#">message 1</a></li>

<li><a href="#">message 2</a></li>

<li><a href="#">message 3</a></li>

</ul>

我的问题是..如果您将div或锚标签包裹在

<li>

这仍然使html有效吗？

我猜它是用这种方式编码的，是为了使li可点击。

<ul>列表的正确标准是什么，可以用不同的方式编写吗？

Answer 1

不，虽然有效，但无效。

是的，大多数人喜欢这样做的原因是使其可点击。

除了锚点是可点击的以外，还有许多方法可以使锚点可单击，其中最常用的方法是将锚点环绕在锚点周围。

这对所有非块级元素均有效，但由于事件冒泡，可能对所有元素级类型都有效。

对于块级元素（也可用于内联元素），可以这样做，以使整个元素都可单击

的HTML

<div class="clickable"><a href='....'></a></div>

的CSS

.clickable a {
  display: inline-block; height: 100%; width: 100%;   /*  fill the parent  */
}

当无法使用锚并且仍需要可单击时，一种替代方法是使用单击处理程序，例如jQuery。

$( "li" ).click(function() {
  // Do something here on click
});

可以将div或锚标签包裹在&lt;LI&gt;周围仍被视为有效的html结构