无涯教程网

关注我们

HTML - 图片

HTML - 图片

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

插入图片

您可以使用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="/html/images/test.png" alt="Test Image" />
   </body>
	
</html>

这将产生以下输出-

您可以根据自己的喜好使用PNG，JPEG或GIF图像文件，但请确保在 src 属性中指定正确的图像文件名。

alt 属性是必填属性，用于在无法显示图像时为图像指定替代文本。

图像宽度/高度

您可以根据需要使用 width 和 height 属性设置图像的宽度和高度。您可以根据像素或图像实际大小的百分比来指定图像的宽度和高度。

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
	
   <body>
      <p>Setting image width and height</p>
      <img src="/html/images/test.png" alt="Test Image" width="150" height="100"/>
   </body>
	
</html>

这将产生以下输出-

图像边框

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

<!DOCTYPE html>
<html>

   <head>
      <title>设置图像边框</title>
   </head>
	
   <body>
      <p>Setting image Border</p>
      <img src="/html/images/test.png" alt="Test Image" border="3"/>
   </body>
	
</html>

这将产生以下输出-

图像对齐

默认情况下，图像将在页面左侧对齐，但是您可以使用 align 属性将其设置在中间(center)或右侧(right)。

<!DOCTYPE html>
<html>

   <head>
      <title>设置图像对齐</title>
   </head>
	
   <body>
      <p>Setting image Alignment</p>
      <img src="/html/images/test.png" alt="Test Image" border="3" align="right"/>
   </body>
	
</html>

这将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

白话法律42讲 -〔周甲徳〕

Netty源码剖析与实战 -〔傅健〕

如何看懂一幅画 -〔罗桂霞〕

To B市场品牌实战课 -〔曹林〕

张汉东的Rust实战课 -〔张汉东〕

容器实战高手课 -〔李程远〕

陈天 · Rust 编程第一课 -〔陈天〕

深入浅出分布式技术原理 -〔陈现麟〕

说透低代码 -〔陈旭〕

好记忆不如烂笔头。留下您的足迹吧 :)