持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
今天来学习如何给页面中添加图片，让我们根据以下步骤完成一个有自己喜欢的图片的html页面吧~
学习完成后我们能够实现的页面如下：（摘自MDN截图，页面为CSS 基础 - 学习 Web 开发 | MDN (mozilla.org)）
这张页面截图中黑色部分为一张图片,在这张图片上方和下方还有几行文字以及一些细节部分。
实现html页面内部有图片
学习知识
关于路径
首先了解两个概念：
- 绝对路径
- 是指在所有的资源中找到要添加的图片依次寻找需要走的路径
- 相对路径
- 是指从当前位置找到要添加的图片的位置的话需要走的路径
关于标签属性
在html中有单标签和双标签两种标签，这两种标签都是可以添加属性的，具体写法如下
- 单标签：
<标签名 属性1="属性值1"/> - 双标签：
<标签名 属性1="属性值1" 属性2="属性值2"></标签名>
单标签和双标签都可以添加属性，每个属性都会对应多个不同的属性值可以选择
如果要添加多个属性，各个属性之间应空出一个空格的距离
关于图片标签
图片标签是一个单标签，单标签的写法是 <标签名/> ；也可以省略斜杠，写做<标签名>。
图片标签的属性：
| 属性 | 含义 | 属性值 |
|---|---|---|
| src | 表示要添加的图片的位置，该属性必须写，否则图片不能展示 | |
| title | 当鼠标放在图片上时展示的提示信息 | 根据自己的需要编辑 |
| alt | 当图片加载失败的时候，显示的提示信息 | 根据自己的需要编辑在图片无法展示的时候的提示信息 |
| width | 宽度 | 写任意数字 |
| heigh | 高度 | 写任意数字 |
width 和height的属性值单位为px,此处也可以省略不写。
观察样式需要哪些标签来实现
- 有三段文字需要用到
<p></p>来实现 - 用
<img/>插入图片
img标签使用注意事项：
方法一：当前页面的实现，src处使用在MDN中获取的图片url，可以确保图片一定能够展示在页面里，这个url属于相对路径，是该图片在MDN界面的相对路径（本文最后附上此方法实现界面的代码片段）
方法二：可以把图片下载至本地，根据图片保存在本地位置的不同，有不同的方法写这个图片的src
- 下图内容两行文字可以使用两个
<p></p>来实现，也可以在选择器（Selector）之后使用一个<br/>实现 - 部分加粗字体，用
<strong></strong>或<b></b>实现
获取文本内容和图片
本文要实现的界面中的图片在MDN中的相对位置为developer.mozilla.org/en-US/docs/… （可以直接复制粘贴到img标签的src属性位置
最终实现以下界面，代码内容可作参考 ）
