溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML中div標(biāo)簽如何使用

發(fā)布時(shí)間：2020-09-26 10:57:51 來(lái)源：億速云 閱讀：252 作者：小新 欄目：web開發(fā)

這篇文章主要介紹HTML中div標(biāo)簽如何使用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

什么是div標(biāo)簽？

div標(biāo)簽表示一組必要的結(jié)構(gòu)。目的是將夾在div標(biāo)簽之間的字符分成塊狀。因此，單獨(dú)的div標(biāo)簽沒(méi)有諸如改變顏色或改變字符樣式的效果。

另外，如果div標(biāo)簽不適合其他元素，則就暫時(shí)不要使用它。

但是，實(shí)際上，當(dāng)需要指定哪個(gè)元素時(shí)，我們經(jīng)常會(huì)使用div標(biāo)簽。

通過(guò)將id和class添加到div標(biāo)簽并使用CSS處理id和class，你就可以更改div標(biāo)簽中的顏色或改變?yōu)槠渌麡邮健?/p>

div標(biāo)簽與Section標(biāo)簽的比較

我認(rèn)為section標(biāo)簽在文檔上顯示單個(gè)集合比較合適

section標(biāo)簽用于將組指示為文檔。

我認(rèn)為章節(jié)有章節(jié)的項(xiàng)

正如章節(jié)子句的這個(gè)概念一樣，section標(biāo)簽是一個(gè)塊，如果它被提取，通常沒(méi)有意義。

在報(bào)紙文章中，即使你只剪輯章節(jié)項(xiàng)，我也不認(rèn)為整篇文章的意圖可以傳達(dá)。

通過(guò)比較，section標(biāo)簽的使用方式與div標(biāo)簽的使用方式不同，而是作為句子用于表示組。

div標(biāo)簽的用法

寫下div標(biāo)簽如下。

<div>內(nèi)容</div>

如上所述，div標(biāo)簽通過(guò)添加id和class非常有用。如何分配id和class如下。

<div id="id名">內(nèi)容</div>
<div id="class名">內(nèi)容</div>

順便說(shuō)一下id和class

順便說(shuō)一下，id和class是什么？id和class被稱為屬性，id是I具有D號(hào)之類的東西，具有相同id名稱的東西只能在該頁(yè)面內(nèi)使用一次。

相反，我們將id屬性用于我們僅使用一次的事物。

另一方面，class屬性可以在同一頁(yè)面上使用多次。如果要指定“此元素和此元素的顏色相同”，請(qǐng)使用class屬性。

當(dāng)然，即使你只使用一次，也可以使用class屬性。

我們來(lái)看實(shí)際的例子

我們先來(lái)看看div標(biāo)簽包圍的結(jié)果

對(duì)于id和class，我們指定每個(gè)名詞的顏色名稱。

使用以下源代碼創(chuàng)建div.html并在瀏覽器中打開它。

div.html

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="red">蘋果</div>
    <div class="skyblue">天空</div>
    <div class="yellow">香蕉</div>
    <div class="blue">大海</div>
    <div class="lightyellow">蒲公英</div>
  </body>
</html>

在瀏覽器中顯示效果如下：

HTML中div標(biāo)簽如何使用

上述只有文字顯示，現(xiàn)在讓我們用CSS作為背景上色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
 #red {
        background-color: #FF0000;
      }
      .skyblue {
        background-color: skyblue;
      }
      .yellow{
        background-color: yellow;
      }
      .blue{
        background-color: blue;
      }
      .beige{
        background-color: beige;
      }
 </style>
  </head>
  <body>
  <div id="red">蘋果</div>
    <div class="skyblue">天空</div>
    <div class="yellow">香蕉</div>
    <div class="blue">大海</div>
    <div class="beige">蒲公英</div>
  </body>
</html>

在瀏覽器中顯示效果如下：

HTML中div標(biāo)簽如何使用

可以看到背景是彩色的，也還可以確認(rèn)指定了多個(gè)相同的類。

以上是HTML中div標(biāo)簽如何使用的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手