在html网页中如何插入图片（1）

在编写的网页中插入图片，可以使浏览网页的用户获得更好的体验结果，那么如

安在网页中插入一个图片那，本年夜神就来给大师具体讲解下，在网页中若何插入

一张图片。

东西/原料

windows记事本（肆意一个版本即可）
Sublime(也是一种记事本)
肆意一个浏览器即可（这里利用Google Chrome浏览器）

方式/步调

1
1.如图所示，我们新建一个记事本，并将记事本的名字改为“插入图片.html”
，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
2
2..如图所示，我们在这个html文件上鼠标右击，在弹出的下拉列表中，我们依
次选择“打开体例（H）”再选择“选择默认法式（C）...”然后鼠标点击确定
打开此项。
3
3..如图所示，在这个选择法式的对话框中，我们选择“Sublime Test”这个程
序，打开这个html文件。
4
4..如图所示，我们输入html5的声明标签为—<！DOCTYPE html>，以告诉浏览器
我们编写的是一个html5的网页。
5
5.如图所示，我们依次先用<html>这个标签包住网页的本家儿体，这个是必需的。
6
6..如图所示，我们接下来我们在里面依次编写html5网页的头部标签—
<head></head>这一对标签。
7
7如图所示，我们再编写本家儿体部门的标签—<body>和</body>。（html标签一般
是当作对呈现的好比：<head>和</head>这一对。）
8
8.如图所示，我们先插入一个<title>标签，为这个网页设置一个题目，题目为
“插入图片”。
9
9.如图所示，我们为了时我们的网页在各浏览器中不呈现乱码问题，我们设置我
们网页的编码体例为utf-8，如许就可以避免呈现乱码的问题（utf-8为万国码，
可以几乎编码息争码地球上所有的文字）。
10
10.如图所示，我们写一个<img>标签用于插入图片，在src属性中写入图片的地址
，在alt中写入这个图片的描述。<img />是自竣事标签。（标签格局一般是：<
标签名属性=“”属性=“”... >如许的）。
11
11.如图所示，我们再写个没有图片的标签，以便展示再没有图片时alt描述带来
的感化。（因为有时因为网速等原因，会使图片无法展示出来，这是用图片描述
来取代一下，就不至于很空白了。）
12
12.如图所示，我们鼠标右击在弹出的下拉列表选择，在“浏览器中打开”，我
们就可以看到我们编写的网页了。
13
13.如图所示，我们看到第一个是图片正常显示的结果，第二张是图片展示不了
的环境下，也有alt的描述，不至于很空白。
14
14.如图所示，我们给这个先前没有图片准确地址的图片，写一个准确的资本地
址。我们再给这张图片设置下标签的属性，设置图片的宽度width=“500”,设置
图片的高度height=“900”。
15
15.如图所示，我们看到图片准确的显示了，可是图片有些变形，这就是申明我
们可以随意设置图片的宽度和高度，浏览器也会去显示，不会管设置的图片是否
变形的。（若是我们需要设置可以只设置高度或者宽度肆意一个，另一个让其按
比例放年夜或缩小就ok了，这个浏览器就可以帮我们做如许的自顺应的。）
16
16.如图所示，我们可以在<img>图片标签的属性src属性中写入相对路径还可以
写入绝对路径，还可所以收集路径，都是ok的。
17
16.这是本教材的源码，供给大师参考哦！

<!DOCTYPE html>

<html>

<head>

<title>hui插入图片演示</title>

<meta charset="utf-8" />
</head>

<body>

<img src="C:\Users\Administrator\Desktop\英语单词年夜闯关\战机.png"
alt="年夜神的飞机" />

<img src="#" alt="年夜神的飞机" />

<img src="C:\Users\Administrator\Desktop\英语单词年夜闯关\战机.png"
alt="年夜神的飞机" width="500" height="900" />

</body>
</html>
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
☟继续进修点击查看下面持续经验☟
☀在html网页中若何建立一个内联框架 (2)☀
https://jingyan.baidu.com/article/6525d4b18a9fb8ac7d2e94b1.html
☀在html网页中若何在图片上加一个链接（3）☀
https://jingyan.baidu.com/article/11c17a2cd059cdf446e39dd3.html
☀html中若何引入外部css文件和外部js文件（4）☀
https://jingyan.baidu.com/article/e9fb46e135a4b97521f766d8.html
☀网页中块元素和内联元素区分（5）☀
https://jingyan.baidu.com/article/455a99506cc368a167277841.html
☀网页中常用选择器的利用（6）☀
https://jingyan.baidu.com/article/e73e26c06979b524adb6a7cc.html
☀网页中的儿女选择器和子元素选择器（7）☀
https://jingyan.baidu.com/article/546ae185cab3621149f28cc3.html
☀网页中伪类选择器的利用（8）☀
https://jingyan.baidu.com/article/4d58d5416f39099dd4e9c0c7.html
☀CSS的伪类利用（9）☀
https://jingyan.baidu.com/article/c1465413e1d3700bfdfc4c42.html
☀CSS属性选择器利用（10）☀
https://jingyan.baidu.com/article/2fb0ba40f3eefa00f3ec5f73.html
☀CSS子元素的伪类利用（11）☀
https://jingyan.baidu.com/article/7082dc1c35cdbbe40a89bdef.html
☀CSS兄弟元素选择器（12）☀
https://jingyan.baidu.com/article/fdffd1f8669086f3e98ca192.html
☀CSS否认伪类利用（13）☀
https://jingyan.baidu.com/article/915fc414ac8a4c51394b2094.html
☀CSS样式的担当介绍（14）☀
https://jingyan.baidu.com/article/546ae185ca61621149f28c95.html
☀CSS选择器优先级介绍（15）☀
https://jingyan.baidu.com/article/375c8e19f5fd8c25f3a2296e.html
☀CSS伪类选择器的挨次介绍（16）☀
https://jingyan.baidu.com/article/a65957f43eca0424e67f9b3b.html
(｡◕ˇ∀ˇ◕)
＃〓§〓〓〓〓〓§〓〓〓〓〓〓§〓〓〓〓〓§〓＃
　　↓　　　　　↓　　　　　　↓　　　　　↓
　☆★☆　　　☆★☆　　　　☆★☆　　　☆★☆
☆　祝　☆　☆　你　☆　　☆　幸　☆　☆　福　☆
　☆★☆　　　☆★☆　　　　☆★☆　　　☆★☆
　　↓　　　　　↓　　　　　　↓　　　　　↓
　　※　　　　　※　　　　　　※　　　　　※