极客笔记如何在HTML页面插入图片？
图片可以通过帮助读者更好地理解网页内容来使内容更有趣。
我们可以将图片插入HTML页面中。要在HTML页面中插入图片，使用<img>标签。这是一个空标签，仅包含属性，因为不需要闭合标签。
我们应该在<body>...</body>标签中使用<img>标签。<img>标签指定要在HTML文档中显示的图片。
<img>标签有两个属性：
- src - 添加图片源，即图片的URL（文件的位置）。
- alt - 添加备用文本，width用于添加宽度，height用于添加图片的高度。
图片不是技术上插入到网页中的；图片是与网页链接的。<img>标签为图片创建了一个空间。
语法
以下是在HTML页面中插入图片的语法。
<img src="url" alt="alternatetext">
示例
以下是向HTML页面添加图片的示例程序。
<!DOCTYPE html>
<html>
<body>
<h2>HTML Article on Inserting image to the web page</h2>
<img src="https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg">
</body>
</html>
现在让我们看看如果用户由于网络连接缓慢或者 src 属性错误而无法查看图像时，alt 属性（替代文本）是如何工作的。alt 属性的值描述了图像的属性。
示例
在下面的示例程序中，我们将指定一个不正确的路径来插入在 HTML 页面中的图像，并观察 alt 属性的工作方式。
<!DOCTYPE html>
<html>
<body>
<h2>HTML Article on Inserting image to the web page</h2>
<img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="search engine image" >
</body>
</html>
文本“搜索引擎图像”是当无法查看图像时图像的替代文本。
示例：更改图像大小
我们还可以使用style属性来更改图像的大小，即图像的高度和宽度。以下是更改图像大小的示例程序：
<!DOCTYPE html>
<html>
<body>
<h2>HTML Article on Inserting image to the web page</h2>
<img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" height="50px" width="50px">
</body>
</html>
