百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML5 支持CSS 谷歌字体HTML URL 编码
当前位置：网站首页 > 技术文章 > 正文

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

myzbx 2025-01-31 14:12 19 浏览

今天我们说下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>


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

相关推荐

MORROR ART:毫无音质可言，真的只是好看而已...

今天早上我在微博上发了一条短视频，内容是某款网红音箱正在放声歌唱——这玩意就是此前曾经在网上挺火的所谓“悬浮歌词音箱”。这款产品是我同事收到的礼品，但她嫌在家里放着没用，所以拿到公司里做我们的拍摄道具...

「JS优化篇」你的 if - else 代码肯定没我写的好

作者：小生方勤转发链接：https://mp.weixin.qq.com/s/JzOQ_OwAYoP5Ic1VBtCZNA前言最近部门在对以往的代码做一些优化，我在代码中看到一连串的if(){}el...

细聊微内核架构在前端的应用「干货」

作者：semlinker转发链接：https://mp.weixin.qq.com/s/ywc98dS4TVB4t3L2tIyk8g一、微内核架构简介1.1微内核的概念微内核架构（Microke...

ThreeJS 入门教程(一) 是选择桌面的固守还是云原生?

导读：最近我购置了一台新的电脑，硬盘空间只有1T。我很担心这个电脑还能用多久。性能限制或者空间的限制，都使得在未来3-5年内，这个电脑会被淘汰。但是，基于云APP的使用，老的电脑是足够了，而且，我们也...

推荐三款正则可视化工具「JS篇」（正则在线调试）

作者：代码先森转发链接：https://mp.weixin.qq.com/s/rw29yKBwti5sIsx2GKG9pw前言最近老王对可视化非常着迷。例如，算法可视化、正则可视化、Vue数据劫持可...

Javascript 多线程编程的前世今生

作者：jolamjiang腾讯技术工程转发链接：https://mp.weixin.qq.com/s/87C9GAFb0Y_i5iPbIL5Hzg为什么要多线程编程大家看到文章的标题《Javasc...

Pug 3.0.0正式发布，不再支持 Node.js 6/8

作者：李俊辰前端之巅转发链接：https://mp.weixin.qq.com/s/q-49Gf-SFijeu7d2MqztIQ前言近日，Pug3.0.0正式发布，Pug原名Jade，是由...

36个工作中常用的JavaScript函数片段「值得收藏」

作者：Eno_Yao转发链接：https://segmentfault.com/a/1190000022623676前言如果文章和笔记能带您一丝帮助或者启发，请不要吝啬你的赞和收藏，你的肯定是我前进的...

深入JavaScript教你内存泄漏如何防范

作者：大道至简转发链接：https://mp.weixin.qq.com/s/0w6aWwpR3MAJnmyLwDnAzA前言一般情况下，忽视内存管理不会对传统的网页产生显著的后果。这是因为，用户刷新...

由浅入深，66条JavaScript面试知识点(七)

作者：JakeZhang转发链接：https://juejin.im/post/5ef8377f6fb9a07e693a6061目录由浅入深，66条JavaScript面试知识点（一）由浅入深，66...

用STM32做了个电子秤，成本仅两位数，精度高!解析一下原理

俗话说得好！人在胖，秤在看！所以，我想DIY一个精度高的体重秤！并希望它不只能称体重：还能像这样称克重（可设置KG，G，最低可称100克）……这样一来，做甜品的时候，还能拿来应应急。保姆级教程，记录在...

前端开发需要了解常用7种JavaScript设计模式

作者|Deven译者|王强策划|小智转发链接：https://mp.weixin.qq.com/s/Lw4D7bfUSw_kPoJMD6W8gg前言JavaScript中的设计模式指的是...

毛姆的一个手法|王培军（毛姆作品简介）

鲁本斯画《海伦娜·芙尔曼肖像》钱锺书在《宋诗选注》文同小传中说：“具体的把当前风物比拟为某种画法或某某大画家的名作”，是“从文同正式起头”。如钱先生所举的：“峰峦李成似，涧谷范宽能”，“独坐水轩人不到...

欣赏 | 朝戈:我渴望找到直达心灵的永恒

朋友，通过艺术让我们共同感知世界的永恒与不朽。——朝戈橙色的人物117X71cm布面油画2003包与陈185cm×103cm2007年白色80cm×40cm2009年光布面油画-Light-Oilo...

Web页面如此耗电!到了某种程度，会是大损失

现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说，电池寿命都很重要。在这篇文章里，我们将讨论影响电池寿命的因素，以及作为一个web开发者，我们如何让网页耗电更少，以便用户有更多时间来关注我们的...

一周热门
最近发表
标签列表