web前端入門到實戰：html常見的塊元素與內聯（行內）元素用法說明

html平時常見的塊元素有：div, p, h2, h3, h4等，內聯元素有：span, a, img等。

塊元素的屬性：無論內容是什么，都會獨占一整行。主要用于頁面布局。

內聯元素的屬性：只占自身大小的元素，不會占用一行。主要用于選中文本設置樣式。

div塊元素僅僅只用于進行頁面布局，它自身不帶任何默認樣式。

span內聯元素可以用來選中文本設置文本的樣式，其自身不會帶默認樣式。

一般情況下，只使用塊元素包含內聯元素，而不會使用內聯元素去包含塊元素。

a元素可以包含任意元素，除了其本身。

p元素不可包含任何的塊元素。

塊元素之div：<br>
    <div >div 噫吁嚱，危乎高哉！蜀道之難，難于上青天！蠶叢及魚鳧，開國何茫然！</div>
    <div >div 噫吁嚱，危乎高哉！蜀道之難，難于上青天！蠶叢及魚鳧，開國何茫然！</div>
    <div >div 噫吁嚱，危乎高哉！蜀道之難，難于上青天！蠶叢及魚鳧，開國何茫然！</div>
    <div >div width=300px 噫吁嚱，危乎高哉！蜀道之難，難于上青天！蠶叢及魚鳧，開國何茫然！</div>
    <div >div width=500px 噫吁嚱，危乎高哉！蜀道之難，難于上青天！蠶叢及魚鳧，開國何茫然！</div>
    塊元素之p：<br>
    <p >p 爾來四萬八千歲，不與秦塞通人煙。西當太白有鳥道，可以橫絕峨眉巔。</p>
    <p >p 爾來四萬八千歲，不與秦塞通人煙。西當太白有鳥道，可以橫絕峨眉巔。</p>
    <p >p 爾來四萬八千歲，不與秦塞通人煙。西當太白有鳥道，可以橫絕峨眉巔。</p>
    <p >p width=300px 爾來四萬八千歲，不與秦塞通人煙。西當太白有鳥道，可以橫絕峨眉巔。</p>
    <p >p width=500px 爾來四萬八千歲，不與秦塞通人煙。西當太白有鳥道，可以橫絕峨眉巔。</p>
    塊元素之h(h2, h3, h4)：<br>
    <h2 >h2 蜀道難</h2>
    <h3 >h3 蜀道難</h3>
    <h4 >h4 蜀道難</h4>
    <h4 >h4 width=300px 蜀道難</h4>
    <h4 >h4 width=500px 蜀道難</h4>
    內聯元素之span：<br>
    <span >西當太白有鳥道，可以橫絕峨眉巔。</span>
    <span >西當太白有鳥道，可以橫絕峨眉巔。</span>
    <span >西當太白有鳥道，可以橫絕峨眉巔。</span>
    <br>內聯元素之a：<br>
    <a href="#" >地崩山摧壯士死，然后天梯石棧相鉤連。</a>
    <a href="#" >地崩山摧壯士死，然后天梯石棧相鉤連。</a>
    <a href="#" >地崩山摧壯士死，然后天梯石棧相鉤連。</a>
    <a href="#" >地崩山摧壯士死，然后天梯石棧相鉤連。</a>
        web前端開發學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（詳細的前端項目實戰教學視頻，PDF）

效果顯示（默認在谷歌瀏覽器下）：

??從上面的效果圖中，可以看出，有些塊元素和內聯元素會自帶默認樣式，比如：p, h2, h3, h4

p自帶默認樣式為：

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

?h2自帶默認樣式：

h2 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

?h3自帶默認樣式：

h3 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

?h4自帶默認樣式：

h4 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
web前端開發學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（詳細的前端項目實戰教學視頻，PDF）

?當然還有body元素也會帶默認樣式：

body {
    display: block;
    margin: 8px;
}