乐趣区

关于前端:零基础教你学前端7图片标签进阶逐字稿

咱们持续学习图片标签在理论开发中的应用。

看案例:

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

文本作用就是对图片解释阐明,这个图片因为某种原因不能失常显示但依然能用文原本提醒用户这个图片所展现的内容,尤其对屏幕阅读器敌对,或者视力障碍者能够通过屏幕阅读器晓得这里有个图片,图片想要展现什么内容。

实现这个成果很简略,只须要在 img 标签上增加一个 alt 属性

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

浏览器中关上,并没有发现 alt 属性中的文本,alt 属性定义的图片形容,只有当图片加载失败时才会显示。

接下来咱们就把图片的门路,批改成一个破损图片的门路,回到浏览器中,咱们看到了一个破损的小图标,也有了相应的文本提醒且占页面空间的。

为了进一步对图片进行解释阐明 咱们把鼠标放在失常显示的图片下面的时,鼠标的右下角会显示一个提醒文本,这个成果只须要在 img 标签上增加一个 title 属性,title 是标签名,也是属性名,标签名和属性名并不抵触。

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

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

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

文章配套视频链接:链接

退出移动版