这是我参与「第五届青训营」伴学笔记创作活动的第 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>
使用浏览器打开,显示效果如下图所示
【小结】
今天总结了图像标签,收获多多!