整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天我們說下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>
好的，今天先到這里，一會我們繼續。
低版本安卓中對TextView加載html所支持的標簽不夠多，比如在搭載了android 5.1的手機上我們的app調用了Html.froml為TextView設置文本時，當source包含span標簽時不會處理，高版本則會去處理；
對比下高低版本的Html.java如下：
android api level 22
android api level 28
我們發現，高版本是支持span標簽的，那低版本怎么處理呢？我們看到方法handleStartTag
中在不支持的標簽都會回調一個方法：
所以我們只需要傳入自定義的TagHandler就可以處理Html.java不支持的標簽了。
一開始我們為TextView設置文本時這樣寫：
String text="創建<span style='color: #ff8500;'>7</span>天，累計消費<span style='color: #ff8500;'>15</span>元";
textview.setText(Html.fromHtml(text));高版本手機正常加載span標簽，低版本的手機效果如下：
更改后這樣寫：
String text="創建<span style='color: #ff8500;'>7</span>天，累計消費<span style='color: #ff8500;'>15</span>元";
textview.setText(Html.fromHtml(text,null,new CustomTagHandler()));更改后在低版本效果如下：
CustomTagHandler的實現參考高版本的Html.java，完整代碼如下：
TML中的span標記和div標記
在使用css排版網頁時，span和div常用的兩個的標記。利用這個兩個標記，加上css樣式控制，可以實現很復雜的網頁效果，下面為大家詳細講解一下他們區別和使用。
span和div概念區別和相似點
div標記是html3.0時提出來的，但是不常用，直到css的出現才慢慢變得應用廣泛起來。HTML4.0以后span才被引入，主要針對樣式表設計的。div與之間可以理解成一個容器，這個容器可以放段落、標題、圖片等各種HTML元素。div與之前的內容可看做一個獨立內容的對象，對于css的控制。先需要對div控制，再對div中各標記的元素再進行控制。
span標記與div標記一樣，作為容器標記廣泛應用在HTML中。span與中間同樣可以容納各種html元素，span與中間也可以視為獨立的對象。span和div兩個標記都可以獨立出區塊，這一點沒有很大的區別。
span和div功能區別
span和div區別在于，div是一個塊級元素，它包含的元素會自動換行。而span是行內元素，在它的前后不會換行。span沒有結構上的意義，只是單純的應用樣式，其他元素不適合時，就可以使用span元素。span可以作為div的子元素，但div不能是span的子元素，如果出現span中出現div不符合ws3c的頁面標準。
span和div使用區別
span元素寬度是被包圍的內容寬度決定，不建議給span設置寬度屬性width，可以給span設置margin值，設置與父元素之前的距離。span可以通過css聲明（display:block）轉換為塊元素，想對一行中的文字或圖片單獨設置樣式，而又由不需要換行的條件下又不影響其他行內其他內容，span可以很好解決這些問題。
每天一個知識點，每日寄語“不論你在什么時候開始，重要的是開始之后就不要停止。”
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
