Visual Studio折疊HTML代碼

Question

我有一些如下的html代碼，由我們的圖形開發人員提供。 問題是當我將其導入asp.net（c＃）頁面時，我看到了很多孤立的div。 感覺好像幾個關閉div都沒有打開div。 以下是代碼段。

<div class="col-lg-2 col-lg-3 quick-launch">
    <div class="thumbnail">
        <a href=""> <img src="assets/img/app_images/app_7.jpg" width="115" height="114">
        <div class="caption">
            <h3>TEST</h3>
        </a></div>
    </div>
</div>

有人可以在這里讓我知道Visual Studio中是否有引起這種情況的事情嗎？

Answer 1

您正在反轉<div>和<a>結束標記。 這是有效的HTML（但不是有效的XHTML，因此最好檢查DOCTYPE ），但可能會使Visual Studio編輯器混亂 ：

<a href=""> <img src="assets/img/app_images/app_7.jpg" width="115" height="114">
    <div class="caption">
    <h3>TEST</h3>
    </a>
</div>

a應該是：

<a href=""> <img src="assets/img/app_images/app_7.jpg" width="115" height="114">
    <div class="caption">
        <h3>TEST</h3>
    </div>
</a>

編輯：這有什么問題？ 之所以有效，是因為HTML解析器不會抱怨 <a><div><a/></div> （如果DOCTYPE不是XHTML ），但是您應該抱怨它。 讓我解釋一下：解析器不會抱怨，因為</div> （結束標記）不是可選的，所以它不會只是默默地添加它。 從理論上講，實際上瀏覽器可以通過多種方式處理此問題。 當到達</a>時，其中一些會默默關閉<div> （然后</div>將關閉外部的一個），另一些則不這樣做（我重復一遍，因為它不是可選的關閉標記），然后</div>將關閉內部（和右側）一個。 IMO由於這種不可靠的行為，您應該要求開發人員/圖形設計人員修復該代碼。 一般來說（除了<hr>和<br>這樣的少數例外），我會編寫HTML代碼， 因為它是 XHTML。