51 lines
1.6 KiB
Markdown
51 lines
1.6 KiB
Markdown
|
---
|
|||
|
title: Images in HTML
|
|||
|
localeTitle: HTML中的图像
|
|||
|
---
|
|||
|
## 介绍
|
|||
|
|
|||
|
您可以使用`<img>`标记定义图像。它没有结束标记,因为它只能包含属性。 要插入图像,您需要定义源,并在无法渲染图像时显示替代文本。
|
|||
|
|
|||
|
`src` - 此属性提供您的PC /笔记本电脑上存在的图像的URL或者包含在其他网站中的图像。请记住,提供的链接不应该被破坏,否则图片将不会在您的网页上生成。
|
|||
|
|
|||
|
`alt` - 此属性用于克服图像损坏或浏览器无法在网页上生成图像的问题。这个名称的属性建议为图像提供“替代”,这是描述图像的一些“文本”
|
|||
|
|
|||
|
## 例
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<img src="URL of the Image" alt="Descriptive Title" />
|
|||
|
```
|
|||
|
|
|||
|
### 要定义图像的高度和宽度,可以使用height和width属性:
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/>
|
|||
|
```
|
|||
|
|
|||
|
### 您还可以定义边框粗细(0表示没有边框):
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<img src="URL of the Image" alt="Descriptive Title" border="2"/>
|
|||
|
```
|
|||
|
|
|||
|
### 对齐图像:
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<img src="URL of the Image" alt="Descriptive Title" align="left"/>
|
|||
|
```
|
|||
|
|
|||
|
### 您还可以在style属性中使用样式:
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>
|
|||
|
```
|
|||
|
|
|||
|
#### 更多信息
|
|||
|
|
|||
|
* 看到在该页面freeCodeCamp `<img>`标签[在这里](https://guide.freecodecamp.org/html/elements/img-tag) 。
|
|||
|
* 要获取有关HTML中图像的更多详细信息,请查看[MDN文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img)
|