为什么我的html在父母之外弹出？

Question

我正在尝试创建一个a元素，其中整个事物是一个链接。在里面，我想要一个图像（img）和一些文本（另一个a）。但是，当我创建它时，第二个a元素不会成为第一个元素的子元素;他们只是兄弟姐妹。

<a class="boxlink" href=".">
  <img src="http://cdn.akc.org/content/hero/puppy-boundaries_header.jpg" height="100">
  <a>Why is this outside the parent?</a>
</a>

正如您在检查中看到的那样，</a>从第二个a元素之后移到它之前。为什么会发生这种情况，我该如何解决？

Answer 1

链接不能包含其他链接。您的第二个<a>代码已移出第一个<a>代码，因为在另一个<a>代码中包含<a>标记毫无意义;它是invalid markup。它已被移动，因为您的解析器足够智能，可以发现这种无效的语法，并且“正确”＃39;它是最合适的有效语法。

要解决此问题，您需要将第二个<a>标记移到第一个<a>标记之外（就像您的解析器一样）。从那里开始，只需用CSS设置页面样式即可控制两个链接的显示位置。

如果你想要一个有多个点的图像＆＃39;你可以点击，你正在寻找 <map> 标签：

＆＃13;

＆＃13;

<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="https://www.w3schools.com/tags/sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="https://www.w3schools.com/tags/mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="https://www.w3schools.com/tags/venus.htm" alt="Venus">
</map>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）