html网页转图片_HTML图片-CSDN博客

html网页转图片

HTML图片 (HTML Images)

Images are visuals of something that look elegant. In web pages, images are used to create a good and appealing design.

图像是外观精美的视觉效果。在网页中，图像用于创建良好且吸引人的设计。

The <img> tag is used to define images in HTML. The tag does not have a closing tag.

<img>标签用于定义HTML中的图像 。标签没有结束标签。

Syntax:

句法：

<img src="location_of_image" />

1)HTML中的src属性 (1) The src attribute in HTML)

The src attribute in HTML is used to specify the location (URL or location) of the image.

HTML中的src属性用于指定图像的位置(URL或位置)。

Example:

例：

<!DOCTYPE html>

<html>

<body>
    <h2>Image : src attribute</h2>
    <img src="includehelp_logo.png" />
</body>

</html>

Output

输出量

Values of src attribute

src属性的值

The image in the same folder as HTML: direct name is specified.
与HTML相同文件夹中的图像：指定直接名称。
The image in another folder: the name of the folder/image_name.
另一个文件夹中的图像：文件夹名称/图像名称。
The image of another server: The full address of the image is required.
另一台服务器的映像：必须提供映像的完整地址。

2)HTML中的alt属性 (2) The alt attribute in HTML)

The alt attribute in HTML is used to give an alternate text to the image. This alternate text is useful when the image is not shown on the webpage (due to internet issues or errors in locating the image) or if a screen reader is being used by the user.

HTML中的alt属性用于为图像提供替代文本。当图像未显示在网页上(由于互联网问题或定位图像的错误)或用户使用屏幕阅读器时，此备用文本很有用。

Syntax:

句法：

<img src="location_of_image" alt="alternate_text" />

Example:

例：

<!DOCTYPE html>

<html>

<body>
    <h2>Image : alt attribute</h2>
    <img src="includehelp_logo.png" alt=" Logo of includehelp.com" />
    <br/>
    <img src="includehelp_logo_x.png" alt="Another Logo of includehelp.com" />
</body>

</html>

Output

输出量

3)调整图像大小：宽度和高度属性 (3) Resizing the Image: width and height Attributes)

The size of the image can also be adjusted according to the programmer.

图像的大小也可以根据程序员进行调整。

There are multiple ways in HTML to resize the image. You can do it using the style and height and width attributes.

HTML中有多种方法可以调整图像的大小。您可以使用style和height和width属性来实现。

Resizing the image using style

使用样式调整图像大小

You can specify the height and width of the image using style,

您可以使用样式指定图像的高度和宽度，

<img src="location_of_image" alt="alternate_text" style="width:50px;height:50px;"/>

Example:

例：

<!DOCTYPE html>

<html>

<body>
    <h2>Image : Resizing the image</h2>
    <img src="includehelp_logo.png" alt=" Logo of includehelp.com" style="width:50px;height:50px;" />
    <br/>
    <img src="includehelp_logo.png" alt=" Logo of includehelp.com" style="width:100px;height:100px;" />
    <br/>
    <img src="includehelp_logo.png" alt=" Logo of includehelp.com" style="width:200px;height:100px;" />
</body>

</html>

Output

输出量

Resizing the image using height and width Attribute

使用height和width属性调整图像大小

You can specify the height and width of the image using height and width attributes.

您可以使用height和width属性指定图像的高度和宽度。

<img src="location_of_image" alt="alternate_text" width="50" height="50" />

Example:

例：

<!DOCTYPE html>

<html>

<body>
    <h2>Image : Resizing the image</h2>
    <img src="includehelp_logo.png" alt="Logo of includehelp.com" width="50px" height="50px" />
    <br/>
    <img src="includehelp_logo.png" alt="Logo of includehelp.com" width="100px" height="100px" />
    <br/>
    <img src="includehelp_logo.png" alt="Logo of includehelp.com" width="200px" height="100px" />
</body>

</html>

Output

输出量

The style attribute is preferred more over height and width attributes to avoid changes by CSS.

样式属性比高度和宽度属性更受青睐，以避免CSS进行更改。

4)图片链接 (4) Images as a Link)

An image can also be used as a clickable link. For creating an image as a link, you need to put,

图像也可以用作可点击链接。要创建图片作为链接，您需要添加，

<a href="link"> <img src="" /> </a>

Example:

例：

<!DOCTYPE html>

<html>

<body>
    <h2>Image : Images as a Link</h2>
    <a href="https://www.includehelp.com/">
        <img src="includehelp_logo.png" alt="Logo of includehelp.com" />
    </a>
</body>

</html>

Output

输出量

5)将图像浮动到一个方向 (5) Floating image to a direction)

You can float an image to left or right in the block of code. The float attribute is used for this task.

您可以在代码块中向左或向右浮动图像。 float属性用于此任务。

<img src="location_of_image" alt="alternate_text" style="float:direction;" />

Example:

例：

<!DOCTYPE html>
<html>

<body>
	<h2>Image floating </h2>
	<p>
		<img src="includehelp_logo.png" alt="Includehelp" style="float:right;">
		Include Help is a programming website that help programmer to learn and practice programming.
	</p>
</body>

</html>

Output

输出量