想像一下,如果一个网页没有图片,那会怎么样……

什么是图片

高大上的定义:“图片是指由图形、图像等构成的平面媒体。”(从某科上扣来的)打开一个网页,最吸引人的除了标题文字,就是图片了。说的接地气一点,图片可以展示文字无法衍生的内容。漫画比小说更吸引人的未解之谜解开了!
事实上,很多图片一般是被嵌套在<a>标签里的,以后会慢慢介绍。

<img>标签

标签基本代码:<img src="">
上例子:编程社的logo(菜单栏里的那片翠绿)

<img src="https://www.cycode.club/wp-content/uploads/2019/05/cropped-123-4.png">


看看属性:
1. src
source(资源地址)的缩写。顾名思义这个属性内贴填写的是图片的资源地址。写些什么呢,大致分两种:网上URL或者本地相对/绝对路径。例如上面的例子就是引用URL。
2. title
图片提示符。简单来说光标扫过会出现的一个提示。话不多说上例子:

<img src="https://www.cycode.club/wp-content/uploads/2019/05/cropped-123-4.png" title="翠园编程社logo">

预览效果

不多介绍
3. alt
图片占位符,这是一个很重要的属性之一。说的接地气一点,这是一种留下犯错时的一个补救机会,但不能完全补救。与提示符不同,属性值正常情况下不会显示出来。不多说上例子(还是我们的logo)

<img src="https://www.cycode.club/wp-content/uploads/2019/05/cropped-123-4.png"alt="翠园编程社的logo">

执行后是这样的

是不是没什么变化?但是假如图片资源地址出错呢?

<img src="https://www.cycode.club/wp-content/uploads/2019/05/cropped-123-4.pn"alt="翠园编程社的logo">

这里图片格式“.png”被改成了不存在的“.pn”
把它执行之后是这样的

这里加一个没有alt属性的比较

<img src="https://www.cycode.club/wp-content/uploads/2019/05/cropped-123-4.pn">


嘿,这就是常见的图片损坏(每次看到就让人“心灰意冷”),在这里的原因是图片格式出错。一般来说,一些前端工程师的资源都是后端打包好的,毕竟一个网页可能有上百张图片上百甚至上千行代码,不一定检查的出来,所以无法确定一张图片是否错误。如果你浏览一些特别的网站(一本正经),出现损坏的照片,回收片头,很多图片一般是被嵌套在<a>标签里的,所以你就会失去点击它的兴趣,这样下来可能会有极大的损失。所以alt可以简单描述图片内容,是一种“补救”措施,但实际上效果也并不是很好。所以要记住设计好网页别忘了自己(甲乙方都可)看一看哦!(敲黑板,这是重点,快记下来)
4. 其他
例改变大小的style等,这在布局中有大作用哦!

小结

阅读完上面的内容,你一定有疑问:怎么感觉似曾相识?没错,其实这些内容别的小编多多少少都介绍过一些。但是,小编懒得不行想温故知新。事实上,一个标签不是靠简单的一带而过的讲解就可以明白的。而在应用一个标签时,往往都会有新的感悟。好啦鸡汤灌不下了自己去练练吧!别忘了片头的提示,下一期将会让你大开眼界!

下期预告:<a>标签,不只是超链接

部分资料引用自百度百科

最后修改日期: 2020年4月16日

作者

0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论