我的 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 标记中？
谢谢!
最佳答案
嗯，你说得对。 a 标签(是内联标签)不能包含 blockquote 标签(是 block 级标签)。所以，我认为如果你想把 block 引用包裹在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 解析不佳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34118462/