为什么添加 <a> 会破坏整个 HTML 结构？ [复制]

Question

这是我的代码：

$data['full'] .= "<li>".
                    "<a href='/myweb/qanda/".$end["id"]."/".$end["subject"]."'>".
                        '<div class="tools">
                            <div class="numb">'.$end["total_votes"].
                                '<div class="vote_text">رای</div>
                            </div>
                            <div class="numb_viewed">'.$end["total_viewed"].
                                '<div class="viewed_text">بازدید</div>
                            </div>
                        </div>'.
                        '<div class="context">'.
                            '<div class="sub_title">'.$end["cat"]."</div>
                            <h2 class='$paidQuestionSubjectCls'>".$end["subject"].'</h2>'.
                            "<h4>".strip_tags($end["body_html"])."</h4>".
                        '</div>'.
                    "</a>".
                "</li>";

会像这样生成：

一切都好。一切都被包裹在a 标签中。

---

现在我需要将这一行添加到上面的代码中：

<a class="tag" href="somethin">برچسب1</a>

这是生成的代码：

$data['full'] .= "<li>".
                    "<a href='/myweb/qanda/".$end["id"]."/".$end["subject"]."'>".
                        '<div class="tools">
                            <div class="numb">'.$end["total_votes"].
                                '<div class="vote_text">رای</div>
                            </div>
                            <div class="numb_viewed">'.$end["total_viewed"].
                                '<div class="viewed_text">بازدید</div>
                            </div>
                        </div>'.
                        '<div class="context">'.
                            '<div class="sub_title">'.$end["cat"]."</div>
                            <h2 class='$paidQuestionSubjectCls'>".$end["subject"].'</h2>'.
                            "<h4>".strip_tags($end["body_html"])."</h4>".
                            '<a class="tag" href="somethin">برچسب1</a>'. // this is added
                        '</div>'.
                    "</a>".
                "</li>";

但令人惊讶的是它会生成错误：

看到了吗？ div.context 元素已跳出 @9​​87654331@ 标记。我怎样才能将所有内容都保存在a 中？

Answer 1

因为你的锚里有一个锚：

<a href="#first">first <a href="#second">second</a></a>
 ^------------- that one closes here ------------^   ^
                        ^-------- this closes here --^

它不像 div 中的 div 用于锚点/内联元素。值得注意的是，如果你遇到类似的问题，95%的情况都是这种问题。