HTML中P標籤自動換行,瀏覽器補全P標籤時的問題

在HTML5中p是塊級元素。代表一個段落,段落裏面的文字在達到右邊界的時候會自動換行;
在頁面中如果沒有設置,會強制換行;
正確的書寫:

<p>我是一個p標籤</p>

如果書寫的過程中沒有加結束標籤”/p”,瀏覽器會默認補全,這個時候p的補全時會產生一個問題比如一下代碼:

<!DOCTYPE HTML>
<html>
<head>
<meta  charset="utf-8">
</head>
<body>
    <p>我是一個p(看着沒事,讀起來。。。)<p>p裏面的p1</p>我是結束p1</p>我是在最外面。。。
</body>
</html>

顯示結果
這裏寫圖片描述

在console中看一下HTML中補全後的DOM結構
這裏寫圖片描述

可以看到第一個p標籤,由於其後沒有跟着結束,瀏覽器會補全結束標籤,裏面的也會換行,最後一個結束標籤會補全一個其實p標籤,但是”我是結束p1“確沒有包含在裏面;

總結:p標籤是一個塊級元素,代表一個段落,會自動換行;注意一點p標籤中是不能包含塊級元素的;即使在p中包含個塊級元素,也會自動換行,將塊級元素裏面的東西換行顯示,瀏覽器會補全起始p標籤一個結束標籤並換行,將裏面的快元素擠出去,並將最後一個結束p補全一個起始p標籤,裏面什麼都沒有並換行;
如下:

<body>
    <p>我是一個p(看着沒事,讀起來。。。)<div>p裏面的div</div>會包着我麼?</p>
</body>

結果:
這裏寫圖片描述
console中的結果:
這裏寫圖片描述

所以在P標籤的時候要注意這種情況,如果要是用可以使用樣式去掉p標籤塊元素的作用,要是這樣我還用p幹嘛;


發佈了31 篇原創文章 · 獲贊 20 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章