目录
插入图片（img标签）与常用的字体效果
我们常常可以在网页中看到许许多多的图片，或者可以点击图片跳转，这是什么标签的功劳呢？
我们现在就来接触一下我们的图片标签——img标签
img标签是用来将我们本地图片或者图片外链插入我们的HTML网页中的标签，可是一个img标签并不能达到我们需要的效果，因此它必须和src属性一起搭配，少一个都不可以
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="" alt="">
</body>
</html>
当你从我们的编辑器输入img时，直接快捷回车，会发现它自带了一个src属性和一个alt属性，这两个属性的作用我们来逐个解析
src属性
src属性我们上面说了，是和img标签密不可分的，不能少，为什么不能呢？因为src属性的作用是指定图地址
如果没有图片地址，那我们又怎么将图片放到网页上呢？是吧！
所以src的属性值就必须是文件夹中图片的位置，不过这个位置必须在HTML的文件夹内
注意力，根据HTML规范，我们需要建立一个img文件夹来存放图片，放在文件夹的其他位置确实可以，但是这不符合规范哦！
要像这样：
然后我们在src的属性值里面输入图片地址，我们的前端编辑器都是可以提示快捷输入图片的，比如这样：
我们的img文件夹就是专门存放图片文件的！
这样我们就可以在网页上显示自己想要嵌入的图片了，不过图片的格式有限制!分别是——png、jpg、gif
gif格式就是你们看到的动态表情包啊、动图等等，就是gif格式。
alt属性
alt属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
为了好理解一点，我就这样说吧！alt属性的属性值是自己定义的内容，这个内容在你图片损坏或者失效的时候就会显示alt里面的属性值，比如这样：
<img src="img/bg_chs.png" alt="提示：图片损坏">
这样的话，如果图片丢失或者其他原因显示不了就会显示alt属性里面的内容！
title属性（不是标签）
注意，我们这里title是属性不是标签哦！
我们有时候使用电脑查找图片，当鼠标停留（悬停）在图片上方时，会显示图片的信息文字，这就是我们title属性的作用了，当我们为图片加上title属性，鼠标悬停在图片上方，就会显示出title属性值里面的内容
<img src="img/bg_chs.png" alt="提示：图片损坏" title="这是一张演示图片">
这个大家自己尝试一下吧！这个标签主要是为了用户的体验感，不是必须的！
图片高宽设置（width、height属性）
如果上面的教程大家都尝试了，你会发现，这个图片无法更改大小，一点也不美观！
怎么可能不能更改大小，只是现在才姗姗来迟而已啦！
我们想要改变图片的大小可以用我们的width和height这两个属性来改变
width属性可以用来改变我们图片的宽度height属性可以用来改变我们图片的高度
我直接演示一下吧！
我这里的宽高都是设置的200px，此时就是一个200像素高宽的正方形图片！
有人就问了，200px是什么？px是我们计算机高宽的单位，中文叫像素，我们这里实际上就是200个像素大小，我们的显示屏就是由一个个非常非常小的正方形组成，一个正方形就是1像素，也就是1px
除了像素，我们还可以用其他的单位，如pt、pc、rem、em等等，一般都是px，有兴趣可以去了解了解
图片超链接
我们先前说了，有的网站可以点击图片跳转到指定链接，这是怎么弄的？其实就是超链接 我们使用a标签与img标签搭配就可以，就这样：
<a href="链接地址"> <img src="图片地址" alt="" > </a>
好了，图片标签讲完了，谢谢各位的耐心 /嘻嘻
字体效果
我们最后在讲一点不重要的内容，我们都知道知道一些字体效果，比如加粗、斜体什么的
全字体效果演示图
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<b>b标签--粗体效果 b标签</b><br/>
<i>i标签--你好世界!斜体字</i><br/>
<em>em标签--你好世界!着重字体</em><br/>
<strong>strong标签--你好世界!加重语气</strong><br/>
<small>small标签--你好世界!小号字体</small><br/>
<sup>sup标签--你好世界!上标字体</sup><br/>
<sub>sub标签--你好世界!下标字体</sub><br/>
<ins>ins标签--你好世界!插入文字</ins><br/>
<del>del标签标签--你好世界!删除文字</del><br/>
</body>
</html>
</body>
</html>
字体加粗——b标签
b标签内的文字将会加粗
字体斜体——i标签
i标签内的字体将会斜体
着重字体——em标签
em标签内的文字也会斜体
加重语气——stong标签
strong标签内的字体会加粗b标签差不多
上下标字体——sup标签与sub标签
sup标签内字体变成上标字体
sub标签内字体变成下标字体
不理解的话——浏览器
下划线——ins标签
ins标签内的文字将会显示下划线
删除线——del标签
del标签内的文字将会显示删除线
这里其实这些标签用的不多，因为后期一般都是CSS控制标签效果
下章见