HTML-img标签

  img标签还是特别常用的;他算是一个行内块元素;具有两者的特点

  常用的两个属性如下:

<img src="" alt="">

  src属性则是要链接到图片地址,即可以是本地图片,也可以是远程网络图片;但注意的是,应用其他网站的图片时,尽量征得作者的同意

  alt属性,其实这个属性在页面显示上没啥意义的;但如果你的网站需要对搜索引擎要一些要求,则可以用到这个属性;比如说 alt="京东",当搜索引擎在搜索【京东】相关的图片时,此图片会更优先被搜索出来,就这样;我个人主要经常忘记这属性的作用是啥了,有点不太起眼哈哈

  还有有初学者经常搜索网上的图片,然后使用img来链接,一定会发生一种情况是图片的大小不合适,基本都会采用设置width和height来调整;所以注意点来:

  1. 在PC端,不建议修改img的width和height;

假设图片是400X400,然后要修改成200X200;这样可以吗?可以,但是有点浪费内存;为什么?首先你理想图片大小是200X200,所占的内存肯定是比400X400要小的,你不要以为通过修改width和height缩成200X200后所占内存也减少了,没有这回事,之前400X400占多少,修改大小后还是多少。

  如果你要放大,从400X400 变成 800X800,也不建议,图片会失真,你可以试试。

  总结就是,尽量让你公司美工提供原始大小的图片

  2. 在移动端,由于需求的原因,其实经常要改图片大小;往往是 大图片放 小,很少小放大的;

  3. 如果确定要修改图片大小,只修改其中一个即可,则会等比例放大或缩小,如果width和height同时修改,很可能就会导致图片特别难看,且失真了

posted @   爱编程DE文兄  阅读(324)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
历史上的今天:
2020-10-17 springmvc返回html页面解决方案
点击右上角即可分享
微信分享提示