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

图片放到网页上

用<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基础8--插入图片及嵌入

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

备选文本

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

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

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

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

宽度和高度

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

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

打开浏览器

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

图片标题

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>

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

搭配说明文字

添加一段说明文字来搭配图片，用<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>

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

嵌入

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

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

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

打开网页

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