HTML基础8--插入图片及嵌入
2020-09-10 本文已影响0人
伊洛的小屋
图片放到网页上
用<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
<iframe>允许讲其他的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>
<iframe>基本要素
allowfullscreen：全屏模式
frameborder：如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0删除边框
src：嵌入文档URL路径
width和height ，想要iframe的宽度和高度
sandbox：提高安全性，会尽可能的减少攻击者在网站搞事情的机会
<embed>和<object>元素
<!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>
打开网页
