在html网页中如何插入图片（1）【百科全说】

在编写的网页中插入图片，可以使浏览网页的用户得到更好的体验效果，那么如
何在网页中插入一个图片那，本大神就来给大家详细讲解下，在网页中如何插入
一张图片。

操作方法

01

1.如图所示，我们新建一个记事本，并将记事本的名字改为“插入图片.html” ，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
02

2..如图所示，我们在这个html文件上鼠标右击，在弹出的下拉列表中，我们依次选择“打开方式（H）”再选择“选择默认程序（C）...”然后鼠标点击确定打开此项。
03

3..如图所示，在这个选择程序的对话框中，我们选择“Sublime Test”这个程序，打开这个html文件。
04

4..如图所示，我们输入html5的声明标签为—<！DOCTYPE html>，以告诉浏览器我们编写的是一个html5的网页。
05

5.如图所示，我们依次先用<html>这个标签包住网页的主体，这个是必须的。
06

6..如图所示，我们接下来我们在里面依次编写html5网页的头部标签— <head></head>这一对标签。
07

7如图所示，我们再编写主体部分的标签—<body>和</body>。（html标签一般是成对出现的比如：<head>和</head>这一对。）
08

8.如图所示，我们先插入一个<title>标签，为这个网页设置一个标题，标题为 “插入图片”。
09

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

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

操作方法

相关推荐