在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幹嘛;