整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
今日小知識(shí)】：div和span的作用及用法，希望可以幫到正在學(xué)習(xí)HTML的你噢~~~
一般用于配合css完成網(wǎng)頁(yè)基本布局。<div>標(biāo)簽可定義文檔中的分區(qū)或節(jié) 。可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。如果用 id 或 class 來(lái)標(biāo)記 ，那么該標(biāo)簽的作用會(huì)變得更加有效。class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標(biāo)識(shí)單獨(dú)的唯一的元素。class可以在頁(yè)面里面重復(fù)使用，id由于在頁(yè)面里面只能出現(xiàn)一次，所以不能重復(fù)使用，所以盡量用class來(lái)寫，這樣能在頁(yè)面里面重復(fù)引用你寫的css，減小工作量和代碼量。
一般用于配合css修改網(wǎng)頁(yè)中的一些局部信息。它其實(shí)就是用來(lái)組合文檔中的行內(nèi)元素，也就是將內(nèi)容放在span標(biāo)簽之中。span沒(méi)有固定的格式表現(xiàn)，如果需要，可以添加屬性來(lái)表現(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相似，或者說(shuō)具有span所有的功能，此外還具有span不及的特色。div是一個(gè)塊，也就是所謂的"容器"，它具有自己獨(dú)立的段落，獨(dú)立的標(biāo)題，獨(dú)立的表格。
4.div是一個(gè)塊級(jí)元素，可以包含段落、標(biāo)題、表格，乃至諸如章節(jié)、摘要和備注等。而span是行內(nèi)元素，span的前后是不會(huì)換行的，它沒(méi)有結(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í)~~~
大多數(shù) HTML 元素被定義為塊級(jí)元素或內(nèi)聯(lián)元素。
編者注：“塊級(jí)元素”譯為 block level element，“內(nèi)聯(lián)元素”譯為 inline element。
塊級(jí)元素在瀏覽器顯示時(shí)，通常會(huì)以新行來(lái)開始（和結(jié)束）。
例子：<h1>, <p>, <ul>, <table>
html程序員們都知道的<div> 和 <span>，你知道嗎？
內(nèi)聯(lián)元素在顯示時(shí)通常不會(huì)以新行開始。
例子：<b>, <td>, <a>, <img>
HTML <div> 元素是塊級(jí)元素，它是可用于組合其他 HTML 元素的容器。
<div> 元素沒(méi)有特定的含義。除此之外，由于它屬于塊級(jí)元素，瀏覽器會(huì)在其前后顯示折行。
如果與 CSS 一同使用，<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的另一個(gè)常見(jiàn)的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
定義和用法
<div> 可定義文檔中的分區(qū)或節(jié)（division/section）。
<div> 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。
如果用 id 或 class 來(lái)標(biāo)記 <div>，那么該標(biāo)簽的作用會(huì)變得更加有效。
用法
<div> 是一個(gè)塊級(jí)元素。這意味著它的內(nèi)容自動(dòng)地開始一個(gè)新行。實(shí)際上，換行是 <div> 固有的唯一格式表現(xiàn)。可以通過(guò) <div> 的 class 或 id 應(yīng)用額外的樣式。
不必為每一個(gè) <div> 都加上類或 id，雖然這樣做也有一定的好處。
可以對(duì)同一個(gè) <div> 元素應(yīng)用 class 或 id 屬性，但是更常見(jiàn)的情況是只應(yīng)用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標(biāo)識(shí)單獨(dú)的唯一的元素。
HTML <span> 元素是內(nèi)聯(lián)元素，可用作文本的容器。
<span> 元素也沒(méi)有特定的含義。
當(dāng)與 CSS 一同使用時(shí)，<span> 元素可用于為部分文本設(shè)置樣式屬性。
定義和用法
<span> 標(biāo)簽被用來(lái)組合文檔中的行內(nèi)元素。
如果不對(duì) span 應(yīng)用樣式，那么 span 元素中的文本與其他文本不會(huì)任何視覺(jué)上的差異。盡管如此。
可以為 span 應(yīng)用 id 或 class 屬性，這樣既可以增加適當(dāng)?shù)恼Z(yǔ)義，又便于對(duì) span 應(yīng)用樣式。
可以對(duì)同一個(gè) <span> 元素應(yīng)用 class 或 id 屬性，但是更常見(jiàn)的情況是只應(yīng)用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標(biāo)識(shí)單獨(dú)的唯一的元素。
HTML:
<p class="tip"><span>提示：</span>... ... ...</p>
CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
希望以上可以解決你們心中的一些疑惑，其中可能會(huì)有不對(duì)的地方或是需要改進(jìn)的地方，歡迎留言糾正。感覺(jué)還不錯(cuò)歡迎關(guān)注收藏轉(zhuǎn)載哦
天我們說(shuō)下HTML標(biāo)簽中的div、span和圖像標(biāo)簽。其實(shí)div和span是上一節(jié)就要講的標(biāo)簽內(nèi)容，但是當(dāng)時(shí)時(shí)間比較晚了，就沒(méi)有說(shuō)。
<div>和<span>是沒(méi)有語(yǔ)義的，就是一個(gè)盒子，用來(lái)裝內(nèi)容的。這和android開發(fā)中的font很像，也是一個(gè)個(gè)的盒子，將內(nèi)部包起來(lái)。可以這么來(lái)寫:
<div>這是頭部</div> <span>我是內(nèi)容</span> 兩個(gè)都是雙標(biāo)簽。
div是division的縮寫，表示分割分區(qū)(豎著); span意為跨度、跨距(橫著)。div單獨(dú)占一行，實(shí)例如下: 理解為一個(gè)大盒子
看下HTML代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<div>我是一個(gè)div標(biāo)簽，我自己獨(dú)占一行</div>
<div>我是一個(gè)div標(biāo)簽，我自己獨(dú)占一行</div>
</body>
</html>
可以看到，寫了兩個(gè)<div>標(biāo)簽，一個(gè)占一行
<span>一行可以放很多個(gè)標(biāo)簽，理解為 小盒子，舉例如下:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<div>我是一個(gè)div標(biāo)簽，我自己獨(dú)占一行</div>
<div>我是一個(gè)div標(biāo)簽，我自己獨(dú)占一行</div>
<span>我是一個(gè)span標(biāo)簽</span>
<span>我是一個(gè)span標(biāo)簽</span>
</body>
</html>
效果如下:
接下來(lái)說(shuō)一個(gè)很重要的標(biāo)簽---圖像標(biāo)簽
HTML標(biāo)簽中，使用<img>標(biāo)簽用于定義HTML頁(yè)面中的圖像，是一個(gè)單標(biāo)簽。img是image的縮寫，src是<img>標(biāo)簽的必須屬性，用于指定圖像文件的路徑和文件名。屬性，指的是屬于這個(gè)圖像標(biāo)簽的特性。對(duì)于圖片，需要將圖片和html文件放到一起。
代碼圖示：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg"/><br />
<!-- <img src="HTML5.jpeg"> -->
</body>
</html>
效果如下:
如果我們?cè)偌尤胪瑯拥囊恍写a，看看顯示(加上換行)
代碼如圖:
代碼內(nèi)容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg"/><br />
<img src="HTML5.jpeg">
</body>
</html>
效果如下:
可以看到<img src="xxx"> 后面不寫 / 也是可以的，<br />后面不寫斜杠也行，即使都是用單個(gè)的情況。src是source的縮寫。
接下來(lái)說(shuō)下圖像標(biāo)簽的其他屬性:
alt 替換文本，圖像不能顯示的文字
title 文本，提示文本，鼠標(biāo)放到圖像上，顯示的文字，類似于 hover
width 像素，設(shè)置圖像的寬度(和android中的差不多)
height 像素，設(shè)置圖像的高度(和android中的差不多)
border 像素，設(shè)置圖像的邊框粗細(xì)
具體我們看下實(shí)例:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg" />
<br />
alt替換文本，圖像顯示不出來(lái)的時(shí)候用文本代替<br />
<img src="HTML5.jpeg" alt="圖像不展示時(shí)，使用文本展示">
</body>
</html>
看下展示效果:
發(fā)現(xiàn) alt后替換文本并沒(méi)有起作用，圖像還是顯示的。這是為什么呢？
其實(shí)原因很簡(jiǎn)單，就是先判斷src后的圖像是否存在，如果存在，就展示圖像，如果不存在，就展示文本。上面語(yǔ)句中，圖像的地址是正確的，所以會(huì)展示圖像。可以將圖像地址進(jìn)行修改。我們?cè)僭囅?/span>
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg" />
<br />
alt替換文本，圖像顯示不出來(lái)的時(shí)候用文本代替<br />
<img src="HTML51.jpeg" alt="圖像不展示時(shí)，使用文本展示">
</body>
</html>
我們來(lái)看看效果，alt后的文本是否能展示
說(shuō)明我們的測(cè)試是正確的。
2.title 提示文本
先看效果:
看下代碼和代碼展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
title提示文本<br />
<img src="HTML5.jpeg" title="鼠標(biāo)hover上，就展示了" />
<br />
</body>
</html>
好的，今天先到這里，一會(huì)我們繼續(xù)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
