<img>标签

■ 定义

<img>标签用于定义网页的图片显示

<img>标签是单标签

img代表单词image,意为图像

■ 属性

□ src属性

是<img>标签的必需属性,用于在页面上显示图像

需要使用该属性指定图片的URL地址,即图像文件的路径和文件名

<img src="图片的url">

□ alt属性

alt属性用来为图像定义一串预先自定义的可替换的文本

当浏览器无法载入图像时,会显示替换文本来告知用户相关信息

使用替换文本属性有助于更好的显示信息,提高页面友好度

<img src="图片的url" alt="替换文本">

□ border属性

用于定义图片的边框,默认单位为px(像素)

border属性一般通过css设定,而非标签内设定

<img src="图片的url" alt="替换文本" border="1" />  
<!-- 图片的边框是1px-->

□ title属性

用于显示提示文本,鼠标放到图像上会显示title属性值

□ height与width属性

height与width属性用于设置图像的高度与宽度,默认单位为px(像素)

<img src="图片的url" alt="替换文本" width="304" height="228">

注意:

  指定图像的高度或宽度是一个很好的习惯

  如果图像指定了高度或宽度,页面加载时就会保留指定的尺寸

  如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局

  一般高度和宽度设定好其中一个,另一个会自动等比例缩放,如果两个都设定,需精准设定,否则容易导致高度和宽度不协调而失真

■ 注意

加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片

加载图片是需要时间的,如果页面加载的图片过多,会影响响应的速度,所以建议慎多用<img>标签

原文地址:https://www.cnblogs.com/shiliye/p/14047837.html