一个 <p> 标签可以放在 <a> 标签里面吗？

Question

可能是重复的问题：
将div放在锚点内是否正确？

当我们编写某种“产品列表”时，你只需要一个链接，但它应该包含产品图片、产品名称、产品标题等。我们可以使用包含p或其他标记的容器吗？这样做会有任何跨浏览器问题吗？

我听说在html5中，一个标签可以包含p标签，但对于使用它仍然没有信心。

代码示例如下：

<ul class="xxx_list">  
<li class="hproduct">  
    <a href="#" class="url" title="" target="_blank">  
        <img class="photo" src="shoujike.jpg" alt="手机壳">  
        <p>  
            <span class="price_wrap">&yen;<span class="price">88.00</span</span>  
            <span class="fav">收藏</span>  
        </p>  
        <p><a class="fn" href="">基本商品单元的商品名称</a></p>  
    </a>  
</li>  
</ul>

- jiguang

---

当然可以，为什么不可以呢？ - IluTov

你的段落 <p> 中包含了一个链接标签 <a>，而这个链接标签本身也被包含在另一个链接标签 <a> 中 - 显然这是不允许的。 - BoltClock

https://dev59.com/RnI-5IYBdhLWcg3wfoa1 - Pankit Kapadia

所以，只要使用"display:block"，一切都没问题了？ - jiguang

Firefox 3.6是最近一个出现此问题的浏览器。 - Alohci

这里<a/>内部也有<p/>，另外<hgroup/>直接在<body/>内部。为什么不呢？看起来像是DHTMLX。参见来源：https://whatwg.org/。不要将HTML块/表元素放在行内元素中。使用`<span/>`因为将块放在行内元素中是不规范的且不兼容。 - 18C

Answer 1

在HTML 4.x（及早期版本）和XHTML 1.x中 - 不允许在<a>元素内包含<p>元素。

在HTML 5中 - <a>元素可以包含<p>元素，但浏览器对此有点不稳定。您可能需要在样式表中显式设置<a>为display: block。

问题中的代码还包括一个<p>内的<a>。这是不允许的。一个<a>元素不能是另一个<a>元素的子元素。

- Quentin

---

这很奇怪，应该被禁止。在行内元素内放置 HTML 块级元素是无法理解的。我可以理解行内块级元素内放置块级元素，但不能在行内元素中...然后，在 HTML5 中 <table/> 能够位于 <a/> 标签中吗？ - 18C

请不要将CSS显示样式与HTML 4元素分组中的“块”和“内联”混淆（在HTML 5中已不存在）。 - Quentin

我不会混淆它。我对HTML4中“内联和块”元素的定义进行了注释。HTML5的理念是与HTML4向后兼容。在HTML4中，<p/>是“内联”元素，可以放入<a/>中吗？ - 18C

HTML 5 向后兼容，几乎所有在 HTML 4 中能做的事情在 HTML 5 中同样可以实现。但反过来则不成立。 - Quentin

因此，旧浏览器可能会糟糕地显示HTML5网站。旧浏览器中的一部分可能会错误地解释“内联”元素中的“块”元素。在这里，我将“inline-block”命名为<button/>元素。 - 18C

Answer 2

a 标签内部可以包含默认设置为 display: inline 或者 inline-block 的标签，例如 span、em、strong 等等。

你可以将 p 标签改成带有某些类的 span 标签并在 CSS 中为该类编写样式。

附注：不能在 a 标签内部使用另一个 a 标签。

更新：

<ul class="xxx_list">  
    <li class="hproduct">  
        <a href="#" class="url" title="" target="_blank">  
            <img class="photo" src="shoujike.jpg" alt="手机壳">  
            <span class="some-class-name">  
                <span class="price_wrap">&yen;<span class="price">88.00</span</span>  
                <span class="fav">收藏</span>  
            </span>  
            <span class="fn">基本商品单元的商品名称</span>  
        </a>  
    </li>  
</ul>

- Belyash