「HTML」什么是 HTML 中的 div 標簽

：語法

2：作用

div 標簽可以用來劃分 HTML 結(jié)構(gòu)，從而配合 CSS 來整體控制某一塊的樣式。

div 標簽是塊級元素，它可用做組合其它 HTML 元素的容器。

div 標簽可以用作嚴格的組織工具，如果用 id 或 class 來標記 div 標簽，則 div 標簽的作用會更加完美。

3：例子

我們以 “堅持就是勝利” 這句話的中英文書寫方式為例，看一下 div 是如何劃分結(jié)構(gòu)的

首先先看一下編輯器效果，如下

再來看一下瀏覽器的運行效果，如下

如果我們把 div 標簽去掉，只用段落標簽 p 來實現(xiàn)，其實瀏覽器的運行效果是一樣的，那我們?yōu)槭裁催€要用 div 標簽?zāi)?，這不是多此一舉嗎？

其實不然，這是在代碼量比較少的情況下，兩者的差距不明顯，但如果代碼有成百上千行的時候，就體現(xiàn)到了 div 標簽劃分結(jié)構(gòu)的作用，同時也使代碼更具有邏輯性。

總結(jié)來說，div 標簽最重要的用途是劃分區(qū)域，然后再結(jié)合 CSS ，針對指定區(qū)域進行樣式控制。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取

原文鏈接：https://blog.csdn.net/qq_42351033/article/details/102680545

、HTML 塊元素

大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素；
元素在瀏覽器顯示時，通常會以新行來開始和結(jié)束；
如：<h1>，<p>，<ul>，<table>，<div>等標簽；

二、HTML 內(nèi)聯(lián)元素

內(nèi)聯(lián)元素在顯示時通常不會以新行開始；
如：<b>， <td>， <a>， <img>，<span>等標簽；

三、HTML <div> 元素

HTML 中的<div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器；
<div> 標簽定義 HTML 文檔中的一個分隔區(qū)塊或者一個區(qū)域部分；
<div> 元素經(jīng)常與 CSS 一起使用，用來布局網(wǎng)頁；

四、div的使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<style>
 .all{
 width:500px;
 height:500px;
 margin:0 auto;
 background-color:#000;
 }
 .one{
 height:100px;
 background-color:#89E1BF;
 }
 .two{
 height:100px;
 background-color:#DEE099;
 }
 .three{
 height:100px;
 background-color:#D7A1CE;
 }
 
</style>
<body>
 <!--父div，all是黑色-->
 <div class="all">
 <!--子div，one是綠色-->
 <div class="one">
 </div>
 <!--子divtwo，是黃色-->
 <div class="two">
 </div>
 <!--子div，three是紫色-->
 <div class="three">
 </div>
 </div>
</body>
</html>

演示效果如圖所示：

這樣一個需求，就是在一個DIV中包含有一個Image標簽，但是在Div標簽中包含有一張背景圖片，設(shè)計圖上的樣子是這張背景圖片是有一個透明度的，但是如果直接使用opacity屬性設(shè)置的的話就會連Div中的內(nèi)容的透明度也會受到影響，那么我們?nèi)绾卧贖TML中設(shè)置div背景圖片的透明度呢？，可以通過以下幾種方法實現(xiàn)。

方法一：使用偽元素

這是在日常開發(fā)中被推薦使用的方法，通過這種方式實現(xiàn)不會影響到div中的其他內(nèi)容的透明度只會影響它自己背景的透明度，詳細實現(xiàn)如下。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .container::before {
            content: "";
            background-image: url('your-image.jpg');
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5; /* 調(diào)整透明度 */
            z-index: 1;
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            這里是內(nèi)容
        </div>
    </div>
</body>
</html>

方法二：使用RGBA顏色疊加

這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時候，結(jié)果實在是不盡人意。所以還是選擇了上面的推薦方法，不過這種方式要比上面的那種方式實現(xiàn)起來要簡單很多。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內(nèi)容
    </div>
</body>
</html>

方法三：使用CSS濾鏡

這種方式實現(xiàn)會影響到整個的div的樣式，也就是說頁面中的內(nèi)容的透明度也會受到影響，并且這種影響不會被其他樣式所改變。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: url('your-image.jpg') no-repeat center center;
            background-size: cover;
            filter: opacity(0.5); /* 調(diào)整透明度 */
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內(nèi)容
    </div>
</body>
</html>

以上就是實現(xiàn)如何調(diào)整div的背景透明度，在一些特殊場景中我們還可以通過JS的方式來實現(xiàn)。上面的方法中，推薦使用的是偽元素方法，因為它在修改了div背景透明度之后，并不會影響到其他的元素，RGBA色彩添加則是局限于一些色彩華麗的地方使用，而對于一些單色調(diào)的內(nèi)容來講這種方式實現(xiàn)效果不是太好。通過CSS過濾樣式，雖然是最直接的方式，但是如果在div內(nèi)部有內(nèi)容的情況下會影響到整個組件體系的樣式。

在實際開發(fā)中，我們可以選擇合適的方式來實現(xiàn)這個需求。當然還有其他的實現(xiàn)方式，有興趣的讀者可以留言我們一起討論。

在線咨詢

上一篇：Axure教程：獲取頁面尺寸、內(nèi)聯(lián)框架自適應(yīng)大小
下一篇：JavaScript 設(shè)置和控制下拉菜單

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

「HTML」什么是 HTML 中的 div 標簽

方法一：使用偽元素

方法二：使用RGBA顏色疊加

方法三：使用CSS濾鏡

您的項目需求