HTML - 图片

HTML - 图片 首页 / HTML入门教程 / HTML - 图片

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

插入图片

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

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

img标签是一个空标签,这意味着它只能包含属性列表,而没有结束标签。

要尝试以下示例,让无涯教程将HTML文件test.htm和图像文件test.png保留在同一目录中-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-images.html

来源:LearnFk无涯教程网

<!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>

这将产生以下输出-

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

技术教程推荐

AI技术内参 -〔洪亮劼〕

从0开始学大数据 -〔李智慧〕

Flutter核心技术与实战 -〔陈航〕

研发效率破局之道 -〔葛俊〕

检索技术核心20讲 -〔陈东〕

MySQL 必知必会 -〔朱晓峰〕

程序员的个人财富课 -〔王喆〕

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

LangChain 实战课 -〔黄佳〕

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