2

我的 HTML 在被浏览器解析后不知何故搞砸了。

这是我的输入：

 <a href="/quotes/{{ $quote->id }}" style="text-decoration: none; color: inherit; display: block">
     <blockquote>
         <p id="quote-{{ $quote->id }}-text">{{ $quote->quote }}</p>

         <small class="author" id="quote-{{ $quote->id }}-author">
             <a href="/authors/{{ $quote->author->username }}">{{ $quote->author->name }}</a>
         </small>
     </blockquote>
 </a>

这是我从 Chrome 开发工具中得到的输出：

    <body>
<a href="/quotes/{{ $quote->id }}" style="text-decoration: none; color: inherit; display: block">
         </a> <!-- Why is it closing this tag over here? -->
    <blockquote><a href="/quotes/{{ $quote->id }}" style="text-decoration: none; color: inherit; display: block">
             <p id="quote-{{ $quote->id }}-text">{{ $quote->quote }}</p>

             <small class="author" id="quote-{{ $quote->id }}-author">
                 </small></a><small class="author" id="quote-{{ $quote->id }}-author"><a href="/authors/{{ $quote->author->username }}">{{ $quote->author->name }}</a>
             </small>
         </blockquote>
     </body>

问题是浏览器a在解析 html 时关闭了标签，我认为，并且不再blockquote被包装a。如何将标签包装blockquote在a标签中？

谢谢！

4

1 回答 1

4

是的，你是对的。a 标签（是 inline-tag）不能包含 blockquote 标签（是块级标签）。所以，我认为如果你想将块引用包装在 a 标签中是不可能的。

看看这条规则：块级标签与内联标签

  1. 块级标签可以包含内联标签。

  2. 反之则不然——内联标签不能包含块级标签。

  3. 一些块级元素可以包含一些其他块级元素。

或者，也许您可​​以使用 javascript onclick事件进行重定向：

<blockquote onclick="window.open('/quotes/{{ $quote->id }}')">
     <p id="quote-{{ $quote->id }}-text">{{ $quote->quote }}</p>

     <small class="author" id="quote-{{ $quote->id }}-author">
         <a href="/authors/{{ $quote->author->username }}">{{ $quote->author->name }}</a>
     </small>
 </blockquote>
于 2015-12-06T14:51:47.863 回答