今天我們說下HTML标簽中的div、span和圖像标簽。其實div和span是上一節就要講的标簽内容，但是當時時間比較晚了，就沒有說。
<div>和<span>是沒有語義的，就是一個盒子，用來裝内容的。這和android開發中的font很像，也是一個個的盒子，将内部包起來。可以這麼來寫:
<div>這是頭部</div> <span>我是内容</span> 兩個都是雙标簽。
div是division的縮寫，表示分割分區(豎着); span意為跨度、跨距(橫着)。div單獨占一行，實例如下: 理解為一個大盒子
看下HTML代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<div>我是一個div标簽，我自己獨占一行</div>
<div>我是一個div标簽，我自己獨占一行</div>
</body>
</html>
可以看到，寫了兩個<div>标簽，一個占一行
<span>一行可以放很多個标簽，理解為 小盒子，舉例如下:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<div>我是一個div标簽，我自己獨占一行</div>
<div>我是一個div标簽，我自己獨占一行</div>
<span>我是一個span标簽</span>
<span>我是一個span标簽</span>
</body>
</html>
效果如下:
接下來說一個很重要的标簽---圖像标簽
HTML标簽中，使用<img>标簽用于定義HTML頁面中的圖像，是一個單标簽。img是image的縮寫，src是<img>标簽的必須屬性，用于指定圖像文件的路徑和文件名。屬性，指的是屬于這個圖像标簽的特性。對于圖片，需要将圖片和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>
效果如下:
如果我們再加入同樣的一行代碼，看看顯示(加上換行)
代碼如圖:
代碼内容如下:
<!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的縮寫。
接下來說下圖像标簽的其他屬性:
alt 替換文本，圖像不能顯示的文字
title 文本，提示文本，鼠标放到圖像上，顯示的文字，類似于 hover
width 像素，設置圖像的寬度(和android中的差不多)
height 像素，設置圖像的高度(和android中的差不多)
border 像素，設置圖像的邊框粗細
具體我們看下實例:
代碼如下:
<!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>
看下展示效果:
發現 alt後替換文本并沒有起作用，圖像還是顯示的。這是為什麼呢？
其實原因很簡單，就是先判斷src後的圖像是否存在，如果存在，就展示圖像，如果不存在，就展示文本。上面語句中，圖像的地址是正确的，所以會展示圖像。可以将圖像地址進行修改。我們再試下
代碼如下:
<!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="鼠标hover上，就展示了" />
<br />
</body>
</html>
好的，今天先到這裡，一會我們繼續。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
