網頁跑版
更新日期:如果網頁跑版的話
請注意tag是否成對
(部分HTML 沒有結束tag)
例如:
<div>
<div>
.......
</div>
<div>
.......
</div>
少一個結束</div>
特別要注意的是
tag的配對並不是你覺得哪兩個配對就哪兩個
例如以下錯誤
<section>
<div> <!-- div 1號 head -->
資料內容
<div style="background-color: red;"> <!-- div 2號 head, 底色紅色 -->
資料內容2
</div> <!-- div 2號 end -->
資料內容3
</div> <!-- div 1號 end -->
</section>
<div> <!-- div 1號 head -->
資料內容
<div style="background-color: red;"> <!-- div 2號 head, 底色紅色 -->
資料內容2
</div> <!-- div 2號 end -->
資料內容3
</div> <!-- div 1號 end -->
</section>
<section>
<div> <!-- div 1號 head -->
資料內容
<div style="background-color: red;"> <!-- div 2號 head, 底色紅色 -->
資料內容2
資料內容3
</div> <!-- div ?號 end, 這會跟誰成對？ -->
</section>
<div> <!-- div 1號 head -->
資料內容
<div style="background-color: red;"> <!-- div 2號 head, 底色紅色 -->
資料內容2
資料內容3
</div> <!-- div ?號 end, 這會跟誰成對？ -->
</section>
答案是 div ?號end 會是跟 div 2號 head 組成一對，而且會把資料內容2與資料內容3都包進去
因為瀏覽器自己會抓距離最近的相同的tag head組成一對
然後在最後面補上缺少的tag end
因此會成為下面的格式
<section>
<div> <!-- div 1號 head -->
資料內容
<div style="background-color: red;"> <!-- div 2號 head, 底色紅色-->
資料內容2
資料內容3
</div> <!-- div 2號 end -->
</div> <!-- div 1號 end (自動補上)-->
</section>
<div> <!-- div 1號 head -->
資料內容
<div style="background-color: red;"> <!-- div 2號 head, 底色紅色-->
資料內容2
資料內容3
</div> <!-- div 2號 end -->
</div> <!-- div 1號 end (自動補上)-->
</section>
所以就跑版了
