HTML alt

🌙
手机阅读
本文目录结构
axihe

HTML img alt 图片替代文字

HTML img alt 属性的功能是建立图片替代文字,这个图片替代文字与 img title 颇为类似,但不同的是 img alt 用在当图片出错或图片失效时(例如图片被移除或伺服器权限修改) ,让浏览器显示出替代文字;

但是当滑鼠移到图片上的时候,并不会显示替代文字,等于是图片的备案,假设文章中的图片失效,网页设计师可能不会希望出现一个 x ,如果有设定 img alt 属性,就可以显示出可阅读的文字。

本文参考:https://www.axihe.com/api/html/images/tag-img.html

HTML img alt 语法范例

<img src="图片网址" alt="要显示的图片替代文字">

HTML img alt 属性范例

<img src="#" alt="">
<img src="#" alt="这是图片替代文字">

呈现的效果

1:


2:这是图片替代文字


范例中共准备了两个 img tag,不过都没有实际的图片存在,故意测试 img alt 的效果,其中一张图片的 alt 为空,另外一张则有设定 alt 的文字,各位读者朋友可以用 IE、 FireFox、Google Chrome、Opera 分别看结果有什么不同?

虽然 img alt 是当图片失效的时候才会有作用,但 alt 这个属性在 ie 浏览器下,当滑鼠提到图片上,还是会显示替代文字的,其他常见的浏览器像是 Google Chrome、FireFox 、Opera 这些到是不会显示。另外,Google Chrome 部份版本无法显示 img alt 的替代文字效果。

HTML img alt 的替代文字可以写繁体中文,通常用来表示图片的内容,或者图片的连结,例如有对图片使用 HTML <a>标签的时候,但建议不要在 alt 标签中塞入太多无意义的文字来误导读者。

更多 HTML 搜索

通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容,可以知道他们实际工作使用了什么技术或者什么地方薄弱;

你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容;

注:这里仅收录了常见搜索,并不是无论搜索什么都记录在里面的;

如果你是为了面试做准备的,那么推荐你查看 HTML面试题,这里基本包涵了市场上的所有 HTML 方面的面试题,让你更加牢固的掌握 HTML 知识


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang