html - HTML5 继承（标签？）问题

Question

我想在 HTML5 中创建灯箱结构。

这是我的代码：

<p>
   <a href="images/1.jpg" class="lightbox">
      <img src="images/1.jpg" style="width: 320px; height: 200px" alt="" />
      <div class="zoom">Zoom.</div>
      test test
   </a>
   Paragraph text.        
</p>

现在，“zoom”div 和“test test”文本应该是名为“lightbox”的链接的子节点，但是浏览器将上面的代码呈现为三个单独的链接（这怎么可能？）：

<p>
   <a href="images/1.jpg" class="lightbox">
      <img src="images/1.jpg" style="width: 320px; height: 200px" alt=""/>
   </a>
</p>
<div class="zoom">
   <a href="images/1.jpg" class="lightbox">Zoom.</a>
</div>
<a href="images/1.jpg" class="lightbox"> test test </a>
   Text 
<p/>

这是jsfiddle：

http://jsfiddle.net/amMMV/1/

我 100% 确定标签有问题，但我找不到任何东西。

Answer 1

<div>将 a作为 a 的子元素是无效的<a>，除非<a>将 a 设置为块级元素。

无论如何，在标签中包含任何块级元素（例如<div>）永远是无效的。<p>