HTML 解析不当

Question

我的 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>

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

谢谢！

Answer 1

是的，你是对的。 a 标签（是内联标签）不能包含 blockquote 标签（是块级标签）。所以，我认为如果你想把 blockquote 包裹在 a 标签中是不可能的。

看看这条规则：Block-Level tags versus Inline tags

Block-level tags can contain Inline tags.

The reverse is not true -- inline tags cannot contain block-level tags.

Some block-level elements can contain some other block-level elements.

或者您可以使用 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>

HTML 解析不当

HTML gets parsed poorly

html

anchor

laravel

blockquote