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

最新推荐文章于 2025-02-01 16:44:44 发布

伊洛的小屋

最新推荐文章于 2025-02-01 16:44:44 发布

阅读量3.5k

点赞数 1

分类专栏： HTML基础文章标签： css js html html5 javascript

本文链接：https://blog.csdn.net/weixin_44386231/article/details/108510938

版权

HTML基础专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在HTML中插入图片，包括使用`<img>`元素、设置备选文本、调整宽度和高度、添加图片标题，以及如何搭配说明文字。此外，还讲解了如何使用`<iframe>`进行网页嵌入，强调了`<iframe>`的基本属性如`src`、`width`、`height`和`sandbox`，以增强网页的安全性和功能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文首发公众号：伊洛的小屋，欢迎关注并查看更多内容！！！

图片放到网页上

用<img> 元素来把图片放到网页上，需要一个src（一般读作其全称 source）来使其生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Photo</title>
</head>
<body>
<img src="demo.jpg">
</body>
</html>

打开浏览器

通常都会把图片和 HTML 放在同一个服务器上

备选文本

属性alt对图片的文字描述，用于在图片无法显示或不能被看到的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Photo</title>
</head>
<body>
<img src="demoo.jpg" alt="这本应该是一张风车的图片">
</body>
</html>

打开浏览器（这里故意的把图片的名称写错）

宽度和高度

调节图片在浏览器中的宽度和高度

<!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属性来提供标题，鼠标悬停的时候就会有对应的内容显示

公号：伊洛的小屋
个人主页：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>可以是几张图片、一段代码、音视频、方程、表格或别的

<!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

允许讲其他的web文档嵌入到当前的文档中。方便引入第三方的网站内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌入地图</title>
</head>
<body>

<iframe src="地图资源"
        width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<p>深圳地图</p>
</body>
</html>

基本要素

allowfullscreen：全屏模式
frameborder：如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0删除边框
src：嵌入文档URL路径
width和height ，想要iframe的宽度和高度
sandbox：提高安全性，会尽可能的减少攻击者在网站搞事情的机会

和元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF</title>
</head>
<body>

<object data="pdf.pdf" type="application/pdf"
        width="800" height="1200" typemustmatch>
</object>
</body>
</html>

打开网页