13 图像标签(重要)

1.图像标签

在HTML标签中, <img>标签用于定义HTML页面中的图像。

<img scr="图像URL"/>

img是单词image的缩写,意为图像。

src是<img>标签的必须属性,它用于指定图像文件的路径和文件名。

所谓属性:简单理解就是属于这个图像标签的特性。

图像标签

在这里插入图片描述

代码示例：

注意把图片和程序放到一个文件夹里，这样子它才能找到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3> 图像文本标签使用：女神的美照</h3>
    <img src="img.jpg"/>

    <h3> alt 替换文本 当图像显示不出来的时候使用替换文本</h3>
    <img src="img1.jpg" alt="我是小玉本人"/>

    <h3> title 提示文本 把鼠标放到图像上显示文字</h3>
    <img src="img.jpg" alt="我是小玉本人" title="我是小玉本人思密达"/>

    <h3> width 设置图像宽度</h3>
    <img src="img.jpg" alt="我是小玉本人" title="我是小玉本人思密达" width="500"/>

    <h3> height 设置图像高度</h3>
    <img src="img.jpg" alt="我是小玉本人" title="我是小玉本人思密达" height="300"/>

    <h3> border 设置图像边框粗线</h3>
    <img src="img.jpg" alt="我是小玉本人" title="我是小玉本人思密达" width="500" border="20"/>
</body>
</html>

运行结果

在这里插入图片描述

图像标签属性注意点:

①图像标签可以拥有多个属性,必须写在标签名img的后面。

②属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

③属性采取键值对的格式,即key= "value"的格式,属性= “属性值”。

重点掌握点:

请说出图像标签哪个属性是必须要写的?

src属性

请说出图像标签中alt和title属性区别?

区别：

alt:替换文本，当图像显示不出来是，替换文字出现

title:提示文本，鼠标放到图像上时可以显示文字

版权声明：本文为hello_sunny123原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。