千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:北京千锋IT培训  >  技术干货  >  html5技术干货  > 零基础教你学前端——图片标签进阶

零基础教你学前端——图片标签进阶

来源:千锋教育
发布人:syq
时间: 2022-11-07 11:24:27

  我们继续学习图片标签在实际开发中的使用。看案例:

20

  事例中有的图片正常显示,有的图片没有正常显示,出现了一个破损的小图片,并且在破损的小图片右侧有一些文本。

21

  文本作用就是对图片解释说明,这个图片由于某种原因不能正常显示但仍然能用文本来提示用户这个图片所展示的内容,尤其对屏幕阅读器友好,或者视力障碍者可以通过屏幕阅读器知道这里有个图片,图片想要展示什么内容。实现这个效果很简单,只需要在img标签上添加一个alt属性。

22

  编辑器中,新建一个image7.html,创建一个img图片标签,引入一个图片,添加alt属性,值为这是千锋教育的logo。

23

  浏览器中打开,并没有发现alt属性中的文本,alt属性定义的图片描述,只有当图片加载失败时才会显示。接下来我们就把图片的路径,修改成一个破损图片的路径,回到浏览器中,我们看到了一个破损的小图标,也有了相应的文本提示且占页面空间的。

24

  为了进一步对图片进行解释说明我们把鼠标放在正常显示的图片上面的时,鼠标的右下角会显示一个提示文本,这个效果只需要在img标签上添加一个title属性,title是标签名,也是属性名,标签名和属性名并不冲突。

  回到编辑器,新建一个image8.html,创建一个img标签,引入一张图片,在img标签上添加一个title属性,赋值为千锋HTML5学科——前端培训界的扛把子回到浏览器查看效果,把鼠标放在图片上面,看到鼠标后面有了对应的文本提示。

25

  当鼠标位置不同,显示文本的位置也不同,title属性定义的内容不占据页面空间且默认隐藏的,只有鼠标划入的时候才会显示。

26

  网页图片两个有用的功能都实现了!

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

10年以上业内强师集结,手把手带你蜕变精英

请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通

免费领取

今日已有369人领取成功

刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取

猜你喜欢LIKE

说说Vuex原理

2022-11-14

vuex怎么拿数据

2022-11-14

零基础教你学前端——图片标签进阶

2022-11-07

最新文章NEW

零基础教你学前端——超链接之页面跳转

2022-11-07

零基础教你学前端——图片标签拓展

2022-11-07

零基础教你学前端——什么是网页?

2022-11-07

相关推荐HOT

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>