整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天我们说下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小时内与您取得联系。
