本文首发公众号： 伊洛的小屋，欢迎关注并查看更多内容！！！
图片放到网页上
用<img> 元素来把图片放到网页上，需要一个src（一般读作其全称 source）来使其生效
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo</title>
</head>
<body>
<img src="demo.jpg">
</body>
</html>
|
打开浏览器
通常都会把图片和 HTML 放在同一个服务器上
备选文本
属性alt对图片的文字描述，用于在图片无法显示或不能被看到的情况
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo</title>
</head>
<body>
<img src="demoo.jpg" alt="这本应该是一张风车的图片">
</body>
</html>
|
打开浏览器（这里故意的把图片的名称写错）
宽度和高度
调节图片在浏览器中的宽度和高度
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo</title>
</head>
<body>
<img src="demo.jpg" alt="这本应该是一张风车的图片" width="650" height="400">
</body>
</html>
|
打开浏览器
图片标题
title属性来提供标题，鼠标悬停的时候就会有对应的内容显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| 公号：伊洛的小屋
个人主页：https://yiluotalk.com/
博客园：https://www.cnblogs.com/yiluotalk/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo</title>
</head>
<body>
<img src="demo.jpg" alt="这本应该是一张风车的图片" width="650" height="400"
title="很美的风景图">
</body>
</html>
|
搭配说明文字
添加一段说明文字来搭配图片，用<p>标签或者<figcaption>，<figcaption>可以是几张图片、一段代码、音视频、方程、表格或别的
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo</title>
</head>
<body>
<img src="demo.jpg" alt="这本应该是一张风车的图片" width="650" height="400"
title="很美的风景图">
<p>荷兰风车图片</p>
<figcaption>荷兰风车景色图片</figcaption>
</body>
</html>
|
嵌入
<iframe>,<embed>,<object>；<iframe>用于嵌入其他网页，<embed>,<object>分别允许嵌入PDF,SVG