首页 前端知识 无涯教程-HTML - 图片

无涯教程-HTML - 图片

2024-05-31 19:05:19 前端知识 前端哥 966 659 我要收藏

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

插入图片

您可以使用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>

这将产生以下输出-

HTML - 图片 - 无涯教程网无涯教程网提供图像对于美化以及在网页上以简单的方式描绘许多复杂的概念非常重要。本教程将引导您完...https://www.learnfk.com/html/html-images.html

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10141.html
标签
评论
发布的文章

用点jquery实现的登录页面

2024-06-06 00:06:07

echarts-锥型柱状图

2024-06-06 00:06:05

echarts的使用

2024-06-06 00:06:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!