我们可以在 <a> 标签中添加 <ul> 吗？答案

【问题标题】：can we add <ul> inside <a> tag?我们可以在 <a> 标签中添加 <ul> 吗？
【发布时间】：2012-06-08 09:03:53
【问题描述】：

当我在锚标记内编写 html 代码时，我的 Dreamweaver 编辑器在锚标记中显示错误。不应该使用内部标签吗？有没有写/使用标签的规则？

我正在使用 Html 5。这是我的代码。 http://jsfiddle.net/CfPnj/

【问题讨论】：

我认为这是完全合法的。可以显示html代码吗？
@KiiroSora09 cough 它的illegal cough cough :)
咳嗽对不起，我想我误解了这个问题。
请检查我是否已在 jsfiddle 中附加了我的代码。
如果对您有帮助，请不要忘记接受答案...

【解决方案1】：

在 HTML5 中，您可以将块元素的大小设置为 <a> 元素。见http://dev.w3.org/html5/markup/a.html#a-changes
这是 HTML5 中的新功能。在任何其他版本的 HTML 中，它都是非法的。

更新（稍后添加，当我更好地理解 HTML5 时）

这是因为<a> 的内容模型已从内联更改为透明。换句话说，您可以在<a> 中放入的内容现在与您可以在<a> 的父级中放入的相同。此处问题的实际答案是“视情况而定”。
例如，

<div><a><ul><li></ul></a></div>

是完全有效的 HTML5，而

<span><a><ul><li></ul></a></span>

不是（因为span 是一个内联元素）。
希望这会有所帮助！

【讨论】：

【解决方案2】：

<ul> 是块元素标签，<a> 是内联元素标签 - 块元素标签应该从不进入内联元素标签，反之亦然（或内联元素其他内联元素标签内的标签）...

从这里开始，然后用谷歌搜索更多信息：http://line25.com/articles/10-html-tag-crimes-you-really-shouldnt-commit

【讨论】：

除非你使用的是 HTML5，它允许它
@andyb 我很抱歉，但这只是纯粹的语义上的废话，并且在任何浏览器中对于残疾人士来说都会惨遭失败 - 避免像瘟疫一样，而是遵循 Asif 的回答......
我在语义上并没有不同意！我只是指出它在 HTML5 中是有效的 syntax ，您的回答并不清楚。从语义上讲，我同意应该避免它并且无法理解它为什么被改变（正如我在回答中所说）
@andyb 它已更改，因为某些组合确实有意义，但这显然不是这种情况 - html 中允许使用很多的东西（所有版本) 没有通过任何可访问性验证...

【解决方案3】：

一般来说，内联元素只允许其他内联元素作为子元素。如果您检查HTML 4.01 Doctype Definition，您会发现<a> 标签确实是这种情况（第342 行）。您的 IDE 将 <a> 标记内的 <ul> 标记标记为无效是正确的，尽管大多数浏览器仍然会“做正确的事情”。

【讨论】：

【解决方案4】：

您是否正在尝试做这样的事情：

<a href="google.com">
    <ul>
        <li>Google.com</li>
        <li>Gmail.com</li>
    </ul>
</a>

根据 HTML 规则，它在语法上是正确的，因为 HTML 不显示任何 error，因此它在您的 Dreamweaver 中显示为 bug。

它会播种这样的东西：

- Google.com
- Gmail.com

但两个链接的位置相同google.com。

我以为你正在尝试做这样的事情：

<ul>
    <li><a href="google.com">Google.com</a></li>
    <li><a href="stackoverflow.com">stackoverflow.com</a></li>
</ul>

它将被渲染为：

而且没有任何错误..

【讨论】：

【解决方案5】：

您不必将代码放在锚链接中，因为当您单击链接时，您将被重定向到锚的顶部，因此您无需在<a>中编写所有代码

【讨论】：

【解决方案6】：

根据http://validator.w3.org，这在 HTML5 中有效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
     <a href="#"><ul><li>foo</li></ul></a>
  </body>
</html>

但不是在 HTML4.1 中（严格）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
  <html lang="en">
    <head>
      <title>title</title>
    </head>
    <body>
      <p>
        <a href="#"><ul><li>foo</li></ul></a>
      </p>
   </body>
  </html>

但这样做在语义上（对我来说）感觉不对:-)

查看规范 a <ul> is allowed 预期流内容的位置和<a> is categorized作为流内容。

【讨论】：