首頁 > web前端 > html教學 > 什麼是div標籤? HTML中div標籤怎麼使用?

什麼是div標籤? HTML中div標籤怎麼使用?

不言
發布: 2018-11-26 13:36:26
原創
8144 人瀏覽過

HTML中的div標籤是實作網頁的重要基礎,是學習HTML知識不可或缺的內容,這篇文章就來為大家介紹關於HTML中div標籤的使用方法。

什麼是div標籤?

div標籤表示一組必要的結構。目的是將夾在div標籤之間的字元分成塊狀。因此,單獨的div標籤沒有諸如改變顏色或改變字元樣式的效果。

另外,如果div標籤不適合其他元素,就暫時不要使用它。

但是,實際上,當需要指定哪個元素時,我們經常會使用div標籤。

透過將id和class加入div標籤並使用CSS處理id和class,你就可以更改div標籤中的顏色或改變為其他樣式。

div標籤與Section標籤的比較

我認為section標籤在文件上顯示單一集合比較合適

section標籤用於將群組指示為文檔。

我認為章節有章節的項

正如章節子句的這個概念一樣,section標籤是一個區塊,如果它被提取,通常沒有意義。

在報紙文章中,即使你只剪輯章節項,我也不認為整篇文章的意圖可以傳達。

透過比較,section標籤的使用方式與div標籤的使用方式不同,而是作為句子用來表示群組。

div標籤的用法

寫div標籤如下。

<div>内容</div>
登入後複製

#如上所述,div標籤透過新增id和class非常有用。如何分配id和class如下。

<div id="id名">内容</div>
<div id="class名">内容</div>
登入後複製

順便說一下id和class

順便說一下,id和class是什麼? id和class稱為屬性,id是I具有D號之類的東西,具有相同id名稱的東西只能在該頁面內使用一次。

相反,我們將id屬性用於我們只使用一次的事物。

另一方面,class屬性可以在同一頁上使用多次。如果要指定“此元素和此元素的顏色相同”,請使用class屬性。

當然,即使你只使用一次,也可以使用class屬性。

我們來看實際的範例

我們先來看看div標籤包圍的結果

對於id和class,我們指定每個名詞的顏色名稱。

使用以下原始程式碼建立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>
登入後複製

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

什麼是div標籤? HTML中div標籤怎麼使用?

#上述只有文字顯示,現在讓我們用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>
登入後複製

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

什麼是div標籤? HTML中div標籤怎麼使用?

#可以看到背景是彩色的,也可以確認指定了多個相同的類別。

以上是什麼是div標籤? HTML中div標籤怎麼使用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板