优秀的编程知识分享平台

网站首页 > 技术文章 正文

「转行测试开发-HTML」(六)---div和span、图像标签的使用

nanyue 2024-12-03 17:09:40 技术文章 5 ℃

今天我们说下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 像素，设置图像的边框粗细


具体我们看下实例:

  1. 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>


好的，今天先到这里，一会我们继续。

Tags：

猜你喜欢

最近发表
标签列表