Day9:網頁開發學習之路-div與span(二)

2022 iThome 鐵人賽

DAY 9

自我挑戰組

網頁開發（html.css）系列第 9 篇

14th鐵人賽

claireyang

2022-09-09 20:33:05

2086 瀏覽

分享至

span標籤由一個<span>標籤開始並由一個</span>標籤結束
讓我們輕易的修改網頁中的各種小區塊，文章中有特別的段落或文字要做加強的標註
開頭的<span>標籤內搭配style做出特定的文字效果

所以div與span到底有什麼不同呢？從以下的實例來看一下

第一個區塊

很單純地用div包起來，設定第一個區塊的 background-color: yellow
整個區域就直接變成黃色，
div

第二個區塊

div裡面包含 <h1>、 <p>，他們是在同一個區塊中
<h1>的文字裡標題另外用<span>標籤調整背景

<h1>我是一個<span class="span1">標題</span></h1>

div

第三個區塊

為了更明顯區分div、span，把區塊二當中的span改成用div
很明顯的發現標題被換行了，這就是div(自動換行)、span(不自動換行)的差別

<h1>我是一個<div>標題</div></h1>

div

第四個區塊

span除了針對特定的文字標註文字、顏色，也可以增加外框
使用 <img> 標籤還可以增加圖片，增加一些豐富的元素
div

總結一下，
div是一個區塊模式(block)，會自動換行，在一個網頁中可以設定很多的區塊(block)
用來進行網頁的一些切割
span是行內模式(inline)，span被瀏覽器視為一行，適合拿來針對網頁細部的內容做加強、美化

網頁原始碼如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .div1 {
        background-color: yellow;
      }
      .div2 {
        background-color: rgb(211, 20, 141);
      }
      .div3{background-color: bisque;}
      .title{background-color: darkslateblue;}
      .span1 {
        background-color: aquamarine;
      }
      .span2{color: hotpink;font-family: sans-serif;}
      .span3{border: 0.3rem red solid}
      .text{background-color: rgb(127, 142, 255)}
      .content{background-color: aquamarine}
    </style>
  </head>
  <body>
    <!--第一個區塊-->
    <div class="div1">
      <h1>我是一個標題</h1>
      <p>我是一個段落</p>
    </div>
    <!--第二個區塊-->
    <div class="div2">
      <h1>我是一個<span class="span1">標題</span></h1>
      <p>我是一個段落</p>
    </div>
    <!--第三個區塊-->
    <div class="div3">
      <h1>我是一個<div>標題</div></h1>
      <p>我是一個段落</p>
    </div>
      <!--第四個區塊-->
    <div class="div4">
      <h1 class=text">
        我是一個<span class="span2"><img src="./icons8-tags-48.png" width="30px" height="30px">標題</span>
      </h1>
      <p class="content">
        我是一個段落，可以做<span class="span3">重點</span
        >標記
      </p>
    </div>
  </body>
</html>