图片标签 [HTML][web前端]

图片标签

图片标签的作用就是向当前页面中引入一个外部图片

通过img标签来引入外部图片

• img标签是一个自结束标签(自闭和标签)

• img标签中的src属性用于指定图片的路径(路径的规则和超链接的规则是一样的)

  • 但是我们可以发现超链接中是href属性指定路径,而图片这里我们是使用src属性指定路径,这个其实是因为我们的超链接是一种引用,而图片是一种引入
    • 对于引用我们都是使用href,对于引入我们都是使用src

• img标签中的alt属性是对图片的描述

  • 这个描述在默认情况之下是不会显示的 , 浏览器会在无法加载这张图片的时候显示这个描述 , 比如图片的路径错误的时候这个图片肯定是加载失败的,这个时候就会显示出我们的图片描述
  • 那么这个图片描述有什么作用?
    • 搜索引擎会根据alt中的内容来识别图片,如果不写alt属性,则图片不会被搜索引擎所收录
      • 我们如果给我们的网页中的图片加上描述, 这个时候浏览器就会将我们的有描述的图片收录下来,等到我们的用户搜索的时候如果我们的图片的描述和用户搜索的内容相似,这个时候浏览器就会有可能会将我们被收录的照片显示出来,用户还可以根据搜索的图片,比如这个照片就是我们的网页中的图片,这个时候用户还可以根据这个图片直接进入到我们的网页中
        • 所以对于我们想要被浏览器检索到的图片我们就一定要加上alt属性(也就是加上对图片的描述),但是对于我们不想被浏览器检索到的图片或者说是一些私密照片我们则不要加alt属性(也即是不要添加描述)

• img标签中的width属性用于设置图片的宽度(单位是像素)
  img标签中的height属性用于设置图片的高度(单位是像素)

  • 注意: 宽度和高度中如果我们只修改了一个,则另一个会等比例缩放 – > 也就是保持图片的原比例,如果保持图片的原比例图片看起来会在水平或者垂直方向看上去有一些扭曲
  • 我们在pc端不建议修改图片的大小: (需要多大就裁多大的图片就可以了)
    • 因为如果我们是将大图片缩小,这个时候就有一些浪费内存(因为如果我们是裁一个小的图片,这个时候占用的内存肯定会更少)
    • 如果是小图片放大,这个时候可能会导致图片失真(也即是看起来有点"模糊")
  • 我们的移动端(手机端),经常需要对图片进行大图缩小的处理 --> 为了保证图片的清晰度

img既不属于块元素,也不属于行内元素,而是属于替换元素

• 替换元素是基于块元素和行内元素之间的一种元素
• 哪里体现出了img是一种替换元素?
  • 我们网页中写一个img标签,在img标签的src属性中指定一个本机的或者网络上的图片的地址,然后我们就可以发现在网页中显示的不是img标签中的地址的文字内容,而是将这些地址对应的文字内容替换成了一张图片,因此我们将img称之为替换元素