前端基礎HTML---內聯和塊元素
阿新 • • 發佈：2021-06-29
塊元素和內聯元素
div就是一個塊元素
所謂的塊元素就是會獨佔一行的元素,無論他的內容有多少
他都會獨佔一整行
塊元素有: div p h1 h2 h3....
div這個標籤沒有任何語義,就是一個純粹的塊元素
並且不會為它裡面的元素設定任何的預設樣式
div元素主要用來對頁面進行佈局的
span是一個內聯元素(行內元素)
所謂的行內元素,指的是隻佔自身大小的元素,不會佔用一行
常見的內聯元素:
a img iframe span
span沒有任何的語義,span標籤專門用來選中文字,
然後為文字設定樣式
塊元素主要用來做頁面佈局,內聯元素主要用來選擇文字設定樣式,
一般情況只是用塊元素包含內聯元素,而不會用內聯包含一個塊元素
a元素可以包含任意元素,但是除了它本身
p元素不可包含任何其他的塊元素(包括他自身也不行)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>內聯和塊元素</title> </head> <body> <!--塊元素和內聯元素 div就是一個塊元素 所謂的塊元素就是會獨佔一行的元素,無論他的內容有多少 他都會獨佔一整行 塊元素有: div p h1 h2 h3.... div這個標籤沒有任何語義,就是一個純粹的塊元素 並且不會為它裡面的元素設定任何的預設樣式 div元素主要用來對頁面進行佈局的 span是一個內聯元素(行內元素) 所謂的行內元素,指的是隻佔自身大小的元素,不會佔用一行 常見的內聯元素: a img iframe span span沒有任何的語義,span標籤專門用來選中文字, 然後為文字設定樣式 塊元素主要用來做頁面佈局,內聯元素主要用來選擇文字設定樣式, 一般情況只是用塊元素包含內聯元素,而不會用內聯包含一個塊元素 a元素可以包含任意元素,但是除了它本身 p元素不可包含任何其他的塊元素(包括他自身也不行)--> <div style="background-color: red; width: 60px;"> 我是div標籤 </div> <div style="background-color: aqua; width: 80px;"> 我是div標籤 </div> <p>這是p標籤</p> <p>這是p標籤</p> <!-- a元素可以包含任意元素,但是除了它本身 --> <a href="#"><p>這是p標籤</p></a> </body> </html>