阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    HTML alt

    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 知识

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录