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