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

windows记事本（任意一个版本即可）

Sublime(也是一种记事本)

任意一个浏览器即可（这里使用Google Chrome浏览器）

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

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

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

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

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

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

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

8.如图所示，我们先插入一个★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★☟继续学习点击查看下面连续经验☟☀在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☀html文本标签的使用（17）☀https://jingyan.baidu.com/article/39810a234c0f28b636fda63d.html☀html无序列表的使用（18）☀https://jingyan.baidu.com/article/48b37f8dc95e4c1a646488a7.html☀html有序列表的使用（19）☀https://jingyan.baidu.com/article/a3a3f8112047e48da2eb8aa7.html☀html定义列表的使用（20）☀https://jingyan.baidu.com/article/e75057f20b3827ebc91a89a7.html☀CSS常用单位介绍（21）☀https://jingyan.baidu.com/article/60ccbceba5afe164cab197a7.html☀CSS颜色单位RGB值介绍（22）☀https://jingyan.baidu.com/article/95c9d20d7540e9ec4e75612a.html☀CSS颜色单位的十六进制的RGB值介绍（23）☀https://jingyan.baidu.com/article/46650658ef368af548e5f860.html☀CSS字体样式设置一（24）☀https://jingyan.baidu.com/article/ce43664946a8fb3772afd366.html☀网页中字体的分类（25）☀https://jingyan.baidu.com/article/8065f87f433a91233024986c.html☀CSS字体样式设置二（26）☀https://jingyan.baidu.com/article/60ccbceba5c4e164cbb19770.html☀CSS行高的设置（27）☀https://jingyan.baidu.com/article/77b8dc7fac84cc6175eab65e.html☀CSS文本样式的的设置（28）☀https://jingyan.baidu.com/article/597a06430b72de312b5243e9.html☀网页中的盒子模型边框介绍（29）☀https://jingyan.baidu.com/article/adc81513b2a837f723bf73cd.html☀网页中的盒子模型边框简写属性介绍（30）☀https://jingyan.baidu.com/article/da1091fb7f7449027849d696.html☀网页中的盒子模型内边距的设置（31）☀https://jingyan.baidu.com/article/f25ef254b59549482c1b8280.html☀网页中的盒子模型外边距的设置（32）☀https://jingyan.baidu.com/article/e9fb46e13771bb7521f76683.html☀网页中的盒子模型外边距的重叠问题（33）☀https://jingyan.baidu.com/article/c74d6000c6ebe40f6a595d18.html(｡◕ˇ∀ˇ◕)＃〓§〓〓〓〓〓§〓〓〓〓〓〓§〓〓〓〓〓§〓＃ 　　↓　　　　　↓　　　　　　↓　　　　　↓ 　☆★☆　　　☆★☆　　　　☆★☆　　　☆★☆ ☆　祝　☆　☆　你　☆　　☆　幸　☆　☆　福　☆ 　☆★☆　　　☆★☆　　　　☆★☆　　　☆★☆ 　　↓　　　　　↓　　　　　　↓　　　　　↓ 　　※　　　　　※　　　　　　※　　　　　※

1.欢迎大家有问题时，向本大神进行提问哦！

2.html5是标签语言，记住标签很重要哦！

3.教程不只是本篇，而是前端从入门到精通一个系列，欢迎浏览其他教程经验， 祝您早日成为前端大神。