整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
今日小知識(shí)】：div和span的作用及用法，希望可以幫到正在學(xué)習(xí)HTML的你噢~~~
一般用于配合css完成網(wǎng)頁基本布局。<div>標(biāo)簽可定義文檔中的分區(qū)或節(jié) 。可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。如果用 id 或 class 來標(biāo)記 ，那么該標(biāo)簽的作用會(huì)變得更加有效。class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標(biāo)識(shí)單獨(dú)的唯一的元素。class可以在頁面里面重復(fù)使用，id由于在頁面里面只能出現(xiàn)一次，所以不能重復(fù)使用，所以盡量用class來寫，這樣能在頁面里面重復(fù)引用你寫的css，減小工作量和代碼量。
一般用于配合css修改網(wǎng)頁中的一些局部信息。它其實(shí)就是用來組合文檔中的行內(nèi)元素，也就是將內(nèi)容放在span標(biāo)簽之中。span沒有固定的格式表現(xiàn)，如果需要，可以添加屬性來表現(xiàn)形式
1.div標(biāo)簽會(huì)獨(dú)占一行，span標(biāo)簽不會(huì)。
2.div是一個(gè)容器級(jí)別的標(biāo)簽，span是一個(gè)文本級(jí)別的標(biāo)簽。
3.div基本上與span相似，或者說具有span所有的功能，此外還具有span不及的特色。div是一個(gè)塊，也就是所謂的"容器"，它具有自己獨(dú)立的段落，獨(dú)立的標(biāo)題，獨(dú)立的表格。
4.div是一個(gè)塊級(jí)元素，可以包含段落、標(biāo)題、表格，乃至諸如章節(jié)、摘要和備注等。而span是行內(nèi)元素，span的前后是不會(huì)換行的，它沒有結(jié)構(gòu)的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，可以使用span。
容器級(jí)別標(biāo)簽可以嵌套所有標(biāo)簽，文本級(jí)別標(biāo)簽只可以嵌套文字/超鏈接/圖片。
div h ul ol dl li dt dd …
span p buis strong em ins del….
希望以上內(nèi)容可以幫助到在學(xué)習(xí)HTML的你們噢~~~如有補(bǔ)充可以私聊我噢~~~我們一起學(xué)習(xí)~~~
iv和span元素沒有特定的語義，都是用來幫助頁面排版的塊元素。
div&&span標(biāo)簽
div：塊級(jí)元素，可定義文檔中的分區(qū)或分節(jié)，用來為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景。通過在頁面中放置多個(gè)div并定義好位置及大小等屬性，可以達(dá)到給網(wǎng)頁布局的效果。
特點(diǎn)：獨(dú)占一行。
span：行內(nèi)元素，主要使用場(chǎng)合是與css一同使用，為部分文本設(shè)置樣式屬性。
特點(diǎn)：可一行多個(gè)同時(shí)顯示。
基本語法格式：
<div> 文本 </div> <span>文本</span>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>doument</title>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>注意：
容器級(jí)的標(biāo)簽和文本級(jí)的標(biāo)簽的區(qū)別？
容器級(jí)的標(biāo)簽可以嵌套其它所有的標(biāo)簽，文本的標(biāo)簽只能嵌套文字/超鏈接/圖片。
：語法
2：作用
div 標(biāo)簽可以用來劃分 HTML 結(jié)構(gòu)，從而配合 CSS 來整體控制某一塊的樣式。
div 標(biāo)簽是塊級(jí)元素，它可用做組合其它 HTML 元素的容器。
div 標(biāo)簽可以用作嚴(yán)格的組織工具，如果用 id 或 class 來標(biāo)記 div 標(biāo)簽，則 div 標(biāo)簽的作用會(huì)更加完美。
3：例子
我們以 “堅(jiān)持就是勝利” 這句話的中英文書寫方式為例，看一下 div 是如何劃分結(jié)構(gòu)的
首先先看一下編輯器效果，如下
再來看一下瀏覽器的運(yùn)行效果，如下
如果我們把 div 標(biāo)簽去掉，只用段落標(biāo)簽 p 來實(shí)現(xiàn)，其實(shí)瀏覽器的運(yùn)行效果是一樣的，那我們?yōu)槭裁催€要用 div 標(biāo)簽?zāi)?，這不是多此一舉嗎？
其實(shí)不然，這是在代碼量比較少的情況下，兩者的差距不明顯，但如果代碼有成百上千行的時(shí)候，就體現(xiàn)到了 div 標(biāo)簽劃分結(jié)構(gòu)的作用，同時(shí)也使代碼更具有邏輯性。
總結(jié)來說，div 標(biāo)簽最重要的用途是劃分區(qū)域，然后再結(jié)合 CSS ，針對(duì)指定區(qū)域進(jìn)行樣式控制。
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取
原文鏈接：https://blog.csdn.net/qq_42351033/article/details/102680545
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
