HTML&CSS基礎-內聯和塊元素
作者:尹正傑
版權聲明:原創作品,謝絕轉載!否則將追究法律責任。
一.html源代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>尹正傑的網頁</title> </head> <body> <!-- div就是一個塊元素: 所謂塊元素就是獨占一行的元素,無論它的內容有多少,它都會獨占一行; div這個標簽沒有任何語義,就是一個純粹的塊元素,並且不會為它里面的元素設置任何的默認樣式; div元素主要是對頁面進行布局的; 其它常見的塊元素: <p></p>: 段落標簽。 <h1></h1>~<h1></h6> 標題標簽 --> <div style="background-color: red; width: 200px;"> 我的博客地址:https://www.cnblogs.com/yinzhengjie </div> <div style="background-color: yellow; width: 1400px;"> 我的博客地址:https://www.cnblogs.com/yinzhengjie </div> <div style="background-color: deeppink;"> 我的博客地址:https://www.cnblogs.com/yinzhengjie </div> <!-- span是一個內聯元素: 所謂內聯元素指的是只占自身大小的元素,不會占用一行。 span沒有任何語義,span標簽專門用來選中文字,然后為文字來設置樣式。 常見的內聯元素: <a></a> <img src=""/> <iframe src="" width="" height=""></iframe> --> <span>我是一個span</span> <span>我是一個span</span> <!-- 塊元素和內聯元素使用原則: 塊元素主要要用來做頁面的布局,內聯元素主要用來選中文本設置樣式; 一般情況下只使用塊元素去包含內聯元素,而不會使用內聯元素去包含一個塊元素; <a></a>元素可以包含任意元素,除了它本身,換句話說就是不能嵌套使用; <p></p>元素不可用包含任意其它的塊元素; 壓根的來說,其實在HTML5中已經把塊元素和內聯元素的概念去除了: 在HTML5有一個非常復雜的內容模型來解釋塊元素和內聯元素,它的內容模型分了8~9種,把標簽分類搞得非常復雜,為了節省我們的腦細胞,我建議大家沒有必要去記那么多種,還是按照之前的規則去記憶塊級標簽和內聯標簽。 --> </body> </html>
二.瀏覽器打開以上代碼渲染結果