HTML 标签列表

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 标签的高度和宽度属性

你已经了解了如何在你的网页中插入图片,现在如果我们想根据我们的要求给一些高度和宽度来显示图像,那么我们可以通过图像的高度和宽度属性来设置它。

例子 (Example)

<img src="animal.png" height ="180" width ="300" alt="animal image">

输出:

注意:始终尝试插入具有高度和宽度的图像,否则在网页上显示时可能会闪烁。


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>

输出:


支持浏览器

元素ChromeIEFirefoxSafariOpera
<img>YesYesYesYesYes


上一主题 HTML 链接 下一主题 HTML 表格
  • 使用社交账号登录,本站支持
全部评论(0)