享受每一天,Just Enjoy !

0%

HTML基础8--插入图片及嵌入

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

图片放到网页上

<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