Day8 Html常用標籤_3

2021 iThome 鐵人賽

DAY 8

Modern Web

我的網頁前端小小小教室系列第 8 篇

13th鐵人賽

karta1366796

團隊imac_跳過這篇

2021-09-22 01:44:54

739 瀏覽

分享至

區塊div

區塊的概念在網頁裡十分重要，當我們要針對特定的地方做CSS設定時，就會用到區塊的概念。可以把它想像成一個矩形的範圍，針對這裡面的範圍去做設定。而網頁就是由很多很多的矩形所構成的。

假設今天有一標題h1跟段落p，我想要設定h1跟段落p這個範圍裡是藍色的

<body>
    <div style="background-color: blue;">
        <h1>我想要在這個範圍裡是藍色</h1> 
        <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
            內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
            內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        </p>
    </div>
</body>

行內元素span

div跟span常常拿來比較，因為他們都是一個範圍的性質，而差別在哪呢?span是用在當你想要在一個小區域內設定、或是你不想要占用到整個欄位時。

<body>
    <div style="background-color: blue;">
        <h1>我想要在這個範圍裡是藍色</h1> 
        <p>內容內容內容內容內容 <span style="background-color: red;">內容內容內容內容內容內容內容內容內容內容內容內</span>容內容內容內容內容內容內容內容內容內容內容內容內容內容
            內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
            內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        </p>
    </div>
</body>

你可以對裡面的內容作設定，而不會像div設定會占用到整攔導致換行。

<body>
    <div style="background-color: blue;">
        <h1>我想要在這個範圍裡是藍色</h1> 
        <p>內容內容內容內容內容 <span style="background-color: red;">內容內容內容內容內容內容內容內容內容內容內容內</span>容內容內容內容內容內容內容內容內容內容內容內容內容內容
            內容內容內容內容內容內容內容
            <div style="background-color: aqua;">內容內容內容內容內容內容內容內容內容內容內容內</div> 容內容內容內容內容內容內容內容內容內容內容
            內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        </p>
    </div>
</body>