美文网首页网页前端后台技巧(CSS+HTML)互联网科技码农的世界
web前端入门到实战:img中alt和title属性的区别

web前端入门到实战:img中alt和title属性的区别

作者: 560b7bb7b879 | 来源:发表于2019-09-28 13:08 被阅读0次

在图像标签img中,除了常用的宽度width和高度height属性之外,还有两个比较重要并且也会用到的属性,就是alt和title,这都是用来显示图片内容的具体信息的,但是这两个属性也有不同的地方。alt 用来给图片来提示的,title用来给链接文字或普通文字提示的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片的alt和title属性</title>
</head>
    <body>
       <img src="song.jpg" width="100px" height="100px" alt="月亮"/>
    <!--alt指的是当图片名字不正确或者当图片的路径有错误时,在本来显示图片的位置里显示出alt的内容,以方便自己或者用户识别该图片是干什么的-->
        <img src="song.jpg" width="100px" height="100px" title="月亮"/>
    <!--title指的是当图片名字不正确或者当图片的路径有错误时,在本来显示图片的位置里也会显示出alt的内容,并且当图片名字、路径都正确时,当鼠标移到图片的区域范围内,也会显示出title的信息-->
    </body>
</html>

在标签中经常会用到alt标签,这对于seo的优化是有一定的帮助。

自己是一个6年的前端工程师,希望本文对你有帮助!

这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

点击:加入

相关文章

网友评论

    本文标题:web前端入门到实战:img中alt和title属性的区别

    本文链接:https://www.haomeiwen.com/subject/dyqfuctx.html