Html 简明教程

HTML - Images

HTML 图像为网页提供可视化内容,增强用户体验并传达信息。它们可以是照片、图形、图标或插图。要在 HTML 文档中插入图像,我们可以使用 * <img>* 标记。

HTML Images provides a visual content for web pages, enhancing user experiences and conveying information. They can be photographs, graphics, icons, or illustrations. To insert an image on HTML document we can use <img> tag.

Reason to use Images

HTML 为嵌入、操作和控制图像提供了各种元素,有助于提升网站的美观和功能性。了解图像标记、属性和响应式设计原则对于有效的 Web 开发至关重要。我们通常在产品页面上的英雄部分使用图像,它需要 src 和 alt 属性。

HTML offers various elements for embedding, manipulating, and controlling images, contributing to the aesthetics and functionality of websites. Understanding image tags, attributes, and responsive design principles is essential for effective web development. We usually use images within hero section on the product page, it required src and alt attributes.

  1. Increase Readbility: Using proper images/graphics can increase the readibility of our website, like what kind of products or services we provide.

  2. SEO Impact: If we can use images with proper attributes that does not effect the loading time can be benificial to improve the website SEO.

我们将在本文中了解使用图像的许多其他优势。

There are lots of other advantages to use images we will know in this article.

尝试单击图标 运行按钮来运行以下 HTML 代码以查看输出。

Try to click the icon run button to run the following HTML code to see the output.

Examples of HTML images

在下面的示例中,我们将看到如何设置图片的宽度、高度、标题,如何使图片在网页上更吸引人!以及其他许多有关图像的内容。

In the bellow examples we will see how to set the width, height, title, how to make image more attarctive on the webpage! and so many many other things on images.

Inserting an Image in HTML

你可以使用 <img> 标签在你的网页中插入任何图像。<img> 标签是一个空标签,这意味着它只能包含属性列表,并且没有结束标签。

You can insert any image in your web page by using <img> tag. The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.

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

Importing images from another folder

通常情况下,我们会将所有图像保存在一个单独的目录中。所以让我们将 HTML 文件 test.htm 保存在我们的主目录中,并在主目录中创建一个子目录 images,我们将在其中将我们的图像保存为 test.png。假设我们的图像位置是“/html/images/test.png”,请尝试以下示例。

Usually, we keep all the images in a separate directory. So let’s keep HTML file test.htm in our home directory and create a subdirectory images inside the home directory where we will keep our image as test.png. Assuming our image location is "/html/images/test.png", try the following example.

<!DOCTYPE html>
<html>
<head>
   <title>Using Image in Webpage</title>
</head>
<body>
   <img src="/html/images/test.png" alt="Test Image" />
</body>
</html>

Set Image Width and Height

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

You can set image width and height based on your requirement using width and height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size.

<!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="450" height="200" />
</body>
</html>

Set Image Border

默认情况下,图像周围会有一个边框,你可以使用 * border* 属性以像素为单位指定边框厚度。厚度为 0 意味着图片周围没有边框。

By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.

<!DOCTYPE html>
<html>
<head>
   <title>Set Image Border</title>
</head>
<body>
   <p>Setting image Border</p>
   <img src="/html/images/test.png" alt="Test Image" border="3" />
</body>
</html>

Set Image Alignment

默认图片会与页面左端对齐,但你可以使用 * align* 属性将图片置于中央或右侧。

By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right.

<!DOCTYPE html>
<html>
<head>
   <title>Set Image Alignment</title>
</head>
<body>
   <p>Setting image Alignment</p>
   <img src="/html/images/test.png" alt="Test Image" border="3" align="right" />
</body>
</html>

Free Web Graphics

如欲获得包括图案的免费网络图形,你可以在 Free Web Graphics 找到。

For Free Web Graphics including patterns you can look into Free Web Graphics