HTML&CSS基礎-內聯和塊元素


          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>

 

二.瀏覽器打開以上代碼渲染結果

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM