Menu Close

HTML图像

图像对于美化网页, 以及在您的网页上以简单的方式描绘许多复杂的概念非常重要。 本教程将带您完成在网页中使用图像的简单步骤。

插入图片 <img>  <src> <alt>

您可以使用 <img> 标签在网页中插入任何图像。 以下是使用此标签的简单语法。

<img src = "Image URL" ... attributes-list/>

<img> 标签是一个空标签,也就是说,它只能包含属性列表,没有结束标签。

例子

要尝试以下示例,让我们将 HTML 文件 test.htm 和图像文件 test.png 保存在同一目录中 –

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
    
   <body>
      <p>Simple Image Insert</p>
      <img src = "https://2743.com/wp-content/uploads/2021/09/test.png" alt = "图像解释(主要让搜索引擎找到该图,并让自己容易找到" />
   </body>
    
</html>

如果我们把test.html和 test.png 放在同一个目录下,HTML源程序也可以这样

<!DOCTYPE html>
<html>
   <head>
      <title>Using Image in Webpage</title>
   </head>
    
   <body>
      <p>Simple Image Insert</p>
      <img src = "test.png" alt = "图像解释(主要让搜索引擎找到该图,并让自己容易找到" />
   </body>
    
</html>

定义图像的高度和宽度 <Width><height>

根据要求设置图像宽度和高度。 也可以根据像素或实际大小的百分比来指定图像的宽度和高度。

<!DOCTYPE html>
<html>
   <head>
      <title>Using Image in Webpage</title>
   </head>
    
   <body>
      <p>Simple Image Insert</p>
      <img src = "https://2743.com/wp-content/uploads/2021/09/test.png" alt = "图像解释" width="150" height="20" />
   </body>
    
</html>

结果显示

定义图像边框<border>和排列<align>

默认情况下,图像周围会有边框,您可以使用边框属性以像素为单位指定边框粗细。 厚度为 0 表示图片周围没有边框。

<!DOCTYPE html> 
<html> 
<head> 
<title>Using Image in Webpage</title>
 </head>
 <body> 
<p>Simple Image Insert</p> 
<img src = "test.png" alt = "图像解释"   border = "3" align="right" /> 
</body> 
</html>

 

<align>参数 <left> <center> and <right>

READ  HTML 链接
除教程外,本网站大部分文章来自互联网,如果有内容冒犯到你,请联系我们删除!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Leave the field below empty!

Posted in HTML 教程