HTML标签——图像标签|青训营笔记

146 阅读2分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 9 天。今天我们开始谈谈常用的HTML标签——图像标签,请大家多多指教!

【图像标签】

要想在HTML网页中显示图像就需要使用图像标签<img><img>标签基本语法格式如下所示:

<img src="图像URL" />     <!--单标签-->

在上述语法中,src属性用于指定图像文件的路径,属性值可以是绝对路径,也可以是相对路径,它是<img>标签的必备属性。要想在网页中灵活地应用<img>标签,只使用src属性是不行的还需要其他属性的配合。

属性注意点:

标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间用空格隔开
标签名与属性之间必须用空格隔开
属性之间没有顺序之分

图像标签的src属性

  • 属性名:src
  • 属性值:目标图像的路径

图像标签的alt属性

  • 属性名:alt
  • 属性值:替换文本
    • 当图片加载失败时,才显示alt文本
    • 图片加载成功,不会显示alt文本

图像标签的title属性

  • 属性名:title
  • 属性值:提示文本
    • 当鼠标悬停时,才显示文本

注意:title属性不仅可以用于图像标签,还可以用于其他标签

图像标签的width属性和height属性

  • 属性名:width和height
  • 属性值:宽度和高度

注意:
如果只设置了一个width或height,另一个设置会自动等比例缩放(图像不会变形)
如果同时设置了width和height,设置不能可能会使图像变形

案例演示

<body>
    <img src="D:\好看的\命韵峋环❤.jpg" alt="这是李峋和公主" title="命韵峋环❤" width="1325">
</body>

使用浏览器打开,显示效果如下图所示

image.png

【小结】

今天总结了图像标签,收获多多!