今天我们说下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 像素，设置图像的边框粗细
具体我们看下实例:
alt
代码如下:
<!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>
好的，今天先到这里，一会我们继续。
发表评论 取消回复