前端工程师养成-笔记02（span标签，标题标签，图像标签）

上文谈到了html的基础标签和一些常用的标签，接下来就继续谈谈常用的标签

一、`<span>`标签

<span></span>是双标签，它的作用是可以更改某一段文本的样式，可以精准的对一个部分进行美化
但是要注意span标签本身是不具有格式表现的，只有对它应用样式时才能产生变化
具体使用：

<!doctype html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="description" content="这是描述本网页的一句话"><meta nmae="keywords" content="关键词 搜索 demo"><title>我是网页的标题</title><style>* {margin: 0;padding: 0;}</style>
</head>
<body><div><p>我是这个<span style="color: red">网页</span>的第一个文本</p></div>
</body></html>

在上面的代码中，我只想对网页这两个字的颜色进行修改
，因此我使用了span标签来对局部进行修改
如下是效果

这里在对网页的颜色进行设置的时候，写法是‘属性：属性值’ （<span style="color: red">),如果有多个属性，中间用;分隔

二、标题标签h1，h2…

在日常浏览网页中，我们经常发现一个页面会有很多文章，同样，也会有很多的标题
在html中，有一些标题标签

<h1></h1>
<h2></h2>
......

h1通常一个页面只有一个，因为h1是最大的标题，从h1到后面h2逐级开始递减，除h1之外，其他标签可以没有个数限制

三、图片标签img

网页自然是少不了图片的，img标签就可以添加图片
具体如下：

<img src="" width="" height="" alt="">

src属性是图片的路径，分成绝对路径和相对路径两种，在初期我们还是更多的用相对路径，width和height则是图片的宽高，在img标签中，width和height的值我们都写图片的原宽高，之后我们再对它的样式进行修改，使用图片的例子如下：

<img src="img/05.png" width="1286" height="712" alt="图片">

使用效果如下：

这里使用的就是相对路径，使用相对路径，首先我们要明确html文件和图像文件的相对位置，我这里二者的相对位置如下图：

05.png文件放在img文件夹里，所以相对路径为img/05.png
/的意思是进入到一个文件，/前是想进入的那个文件名
后面还有三个属性，width，height和alt，width和height填像素数字就行，不用加单位，如图：

在属性中可以看到分辨率是1286*712，因此就是width*height，所以我们直接写width="1286" height="712"就行了，不需要加单位。
最后的alt属性就是在图片加载不出来的时候在旁边显示的描述话语