HTML学习笔记10-HTML图像_现有index.html 文件和imgs (含图片1.jpg 、2.jpg 和“图片”文件(含3.j-CSDN博客

本文链接：https://blog.csdn.net/doulihang/article/details/98844580

一、HTML图像

图像使用<img>标签定义，该标签为空标签，只有开始标签，没有结束标签。该标签生成的元素只有属性没有内容。实现显示图片的两种方式

1.1.显示本地的图片，图片1.jpg和该html文档在同一目录。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签练习</title>
</head>
<body>

<img src="1.jpg">

</body>
</html>

1.2.显示本地的图片，图片1.jpg在该html文档的下一级文件夹（images）中。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签练习</title>
</head>
<body>

<img src="images/1.jpg">

</body>
</html>

1.3.显示本地的图片，图片1.jpg在该html文档的上一级文件夹中。"../"表示在上一级文件夹中查找图片。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签练习</title>
</head>
<body>

<img src="../1.jpg">

</body>
</html>

2.显示服务器上的图片，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签练习</title>
</head>
<body>

<!--src的value为百度的一张图片地址-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9
999_10000&sec=1565235906377&di=fd001a39cd186101fca5fac2e8ff9c6d&imgtype=
0&src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F175%2F197%2F04
4%2Ff1dd8f9fb5fd47d4ab078ba8ae56517c.jpg">

</body>
</html>

二、定义图片的宽度和高度。

使用width、height属性定义图片的宽度和高度，注意：同时定义width及height属性时，会导致图片变形，如果想图片不变形，只需要定义width、height其中一个属性即可。具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签练习</title>
</head>
<body>

<img src="1.jpg" width="915" height="585">

</body>
</html>

三、图片的alt属性

alt属性用于当图片无法加载时，显示该属性的文字。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签练习</title>
</head>
<body>

<img src="2.jpg" alt="图片无法加载">

</body>
</html>

实现效果如下：

五、图像的title属性

鼠标悬停在图片上时，显示title定义的文字，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签练习</title>
</head>
<body>

<img src="1.jpg" width="500" title="这是我的桌面图片">

</body>
</html>

页面显示如下：