图像对于美化网页, 以及在您的网页上以简单的方式描绘许多复杂的概念非常重要。 本教程将带您完成在网页中使用图像的简单步骤。
插入图片 <img> <src> <alt>
您可以使用 <img> 标签在网页中插入任何图像。 以下是使用此标签的简单语法。
|
1 |
<img src = "Image URL" ... attributes-list/> |
<img> 标签是一个空标签，也就是说，它只能包含属性列表，没有结束标签。
例子
要尝试以下示例，让我们将 HTML 文件 test.htm 和图像文件 test.png 保存在同一目录中 –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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 放在同一个目录下，ＨＴＭＬ源程序也可以这样
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!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>
根据要求设置图像宽度和高度。 也可以根据像素或实际大小的百分比来指定图像的宽度和高度。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!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 表示图片周围没有边框。
|
1 2 3 4 5 6 7 8 9 10 |
<!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>
除教程外，本网站大部分文章来自互联网，如果有内容冒犯到你，请联系我们删除！