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
輸出量
翻譯自: https://www.includehelp.com/html/images.aspx
html網頁轉圖片
)
