- 您好！欢迎来到鲲鹏知舟
HTML 图像
HTML img 标签用于在网页上显示图像。HTML img 标签是一个空标签，只包含属性，HTML 图像元素中不使用结束标签。
让我们看一个 HTML 图像的例子。
例子 (Example)
<!DOCTYPE> <html> <body> <h2>HTML 图像示例</h2> <img src="/public/static/images/try/good-morning.jpg" alt="Good Morning Friends"/> </body> </html>
输出：
HTML img 标签的属性
src 和 alt 是 HTML img 标签的重要属性。HTML 图像标签的所有属性如下。
1) 源代码
它是描述图像来源或路径的必要属性。它指示浏览器在服务器上的何处查找图像。
图像的位置可能在同一目录或另一台服务器上。
2）替代
如果无法显示，alt 属性定义图像的替代文本。alt 属性的值以文字描述图像。alt 属性被认为有利于 SEO 前景。
3) 宽度
它是一个可选属性，用于指定显示图像的宽度。现在不推荐。您应该应用 CSS 来代替 width 属性。
4) 高度
它 h3 图像的高度。HTML 高度属性还支持 iframe、图像和对象元素。现在不推荐。您应该应用 CSS 来代替 height 属性。
使用带有 img 标签的高度和宽度属性
你已经了解了如何在你的网页中插入图片，现在如果我们想根据我们的要求给一些高度和宽度来显示图像，那么我们可以通过图像的高度和宽度属性来设置它。
输出：
注意：始终尝试插入具有高度和宽度的图像，否则在网页上显示时可能会闪烁。
alt 属性的使用
我们可以使用带有标签的alt 属性。如果图像无法在浏览器上显示，它将显示替代文本。以下是 alt 属性的示例：
例子 (Example)
<img src="/public/static/images/try/animal.jpg" height="180" width="300" alt="animal image">
输出：
如何从另一个目录/文件夹获取图像？
要在您的 Web 中插入图像，该图像必须存在于您放置 HTML 文件的同一文件夹中。但是如果在某些情况下图像在其他目录中可用，那么您可以像这样访问图像：
句法 (Syntax)
<img src="E:/images/animal.png" height="180" width ="300" alt ="animal image">
在上面的语句中，我们将图像放在本地磁盘 E------>images 文件夹------>animal.png。
注意：如果 src URL 不正确或拼写错误，则它不会在网页上显示您的图像，因此请尝试输入正确的 URL。
使用 <img> 标签作为链接
我们还可以将图像与其他页面链接，或者我们可以使用图像作为链接。为此，将 <img> 标签放在 <a> 标签内。
例子 (Example)
<a href="https://www.rocschool.com/tutorial/";><img src="/public/static/images/try/robot.jpg" height="100" width="100"></a>
输出：
支持浏览器
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <img> | Yes | Yes | Yes | Yes | Yes |
-
使用社交账号登录,本站支持
全部评论(0)