做一个简单的京东购物栏

通过之前的补充标签和转义字符，我相信大家一定也熟练的掌握了这几个标签的用法和含义，接下来，我们就要学习别的标签了，那么会有人说，之前学的不就是标签了吗，那确实是，但是那是标签中最基础的，换句话来说，要是前面都学不会的话，那这里的就不用看了。

看标题就知道，我们这章要讲的就是做一个简单的京东购物栏，我相信大家很多都有上网购物的经历，先给个京东的链接吧，大家可以先去看看购物栏的样子，链接传送门：https://www.jd.com 。要做的效果图，我也放在下面：

要达到的部分效果图

第一眼看到上面这张图片的时候，刚学了前面知识点的朋友，多多少少是有点懵的。那我们来分析一下，首先，你第一眼看到的就是这张图片，然后大的图片下面还有一个小的图片，然后就是文字和数字，或多或少有一点css的效果在里面（这里先不讲css），那么我们会发现，我们能写出来的就只有没有css效果的文字了，作为前端，那肯定是不可以的，所以接下来，我们就要学会下面的知识点。

一般来说，有些网页给人的效果除了一些动画的效果之外，其次就是图片给人视觉的冲击感，图片的插入，是有特定的标签的，也就是img标签，img是图片的意思，用来告诉浏览器我们需要显示一张图片，img标签是个单标签，我们先来感受一下这个标签的用法，请看下面的代码：

<img src="" alt="">    // img标签一般的写法

这个标签给我们的感觉就是它比之前学的标签东西多，多了一个src和一个alt的属性，对比像<title></title>这类的，特点很明显。其实img标签的属性有很多，接下来就说几个常用的属性。

第一个最常用的是src属性，src这个属性代表着路径，也就是你要插入的图片的路径，src是英文source的缩写，src 是用来告诉img标签，需要显示的图片名称，下面演示一下src的用法：

<img src="/image/phone.jpg">

此时，这里就涉及到另一个知识点了，那就是关于图片的路径问题。路径分为绝对路径和相对路径。首先讲一下绝对路径，从字面上来理解，我觉得是非常好懂的，就是根上的路径，换种话来说绝对路径就是每次都从指定的盘符开始查找，举个例子，比如说你下了一个游戏，你放在了D盘，你右击属性的时候，就会看到路径的显示，而这个路径往往就是从什么盘到哪里到哪里，从最开始的位置到你想要的文件现在的位置。请看下面我截的图，此时，我桌面上文件的路径的显示就是绝对路径。

绝对路径

绝对路径对应的代码里的写法，我就根据我自己写的来了，只要右击你的图片查看属性，写上去就行了，具体的代码形式请看下面：

<img src="E:\前端项目\HTML\images\phone.jpg">  //绝对路径写法

那么，大家多少可以感觉到如果你写代码，要写图片或者文件路径的时候，你用绝对路径是不是就太长了些，可以是可以的，就是很麻烦，所以一般来说，没人会去用这个绝对路径。此时，我们就要用到相对路径的写法，这个词字面上来理解也是非常的容易的，但是刚学的小伙伴可能不容易记住，相对这个词就是你找文件的时候，它是相对另一个对照物来说的，我们同样的换句话来说就是，相对路径就是每次都是从.html文件所在文件夹开始查找。它之所以不容易记住，是因为它分为三种情况：同级、上级和下级。

什么是同级？举个例子，你是三年级，你的朋友也是三年级，你们就是同级的。我们将这个例子转化到相对路径里，如果，你正在写的html文件和你要引入的图片在同一个文件夹里并且里面没有别的文件夹，此时，它们就是同级的。语言上说明可能有点直白，我们来看下下面的图：

同级

在同一个HTML文件夹里，html文件和jpg文件为同级，所以这里的相对路径我们就可以写成是：

 <img src="phone.jpg">   //同级相对路径

它的含义是，在.html文件所在的文件夹中查找名称叫做phone.jpg的图片

什么是下级？同样的例子，你是三年级，你的朋友是二年级，那你的朋友就在你的下一级。放到相对路径里来说，就是存储图片的文件夹和.html文件在同一个文件夹中。请看下面的图：

下级

我们再来仔细的分析一下，此时，我们的HTML文件夹里有.html文件和一个image文件夹，我们要找的图片就在这个image文件夹里面，那么对于image文件夹来说，.html文件是不是在image文件夹的下一级，所以我们的相对路径就要写成下面的形式：

<img src="image/phone.jpg">    //下级相对路径

它的含义是，在.html文件所在的文件夹中查找名称叫做image的文件夹中找到名称叫做phone.jpg的图片(其实图片文件夹最好起名叫images，我这里没有加s，有点不规范的)

什么是上级？还是相同的例子，你是三年级，你朋友是四年级，那么你的朋友就在你的上一级。放到相对路径里来说，就是存储图片的位置在存储.html的文件夹的上一级。请看下面的图：

上级

我们来看下，在HTML文件夹里，有demo文件夹，里面放了一个.html文件夹，而在demo文件夹的外面有我们要的的图片，那么对于图片来说，demo里的.html文件是不是就在它的上一级，所以我们的相对路径就要写成下面的形式：

<img src="../phone.jpg" >  //上级相对路径

它的含义是，在.html文件所在的文件夹中查找这个文件夹的上一级文件夹，然后再在这个上一级文件夹中找到名称叫做phone.jpg

的图片，其中../的含义是返回目录上一级。

所以结合三种相对路径不同形式下的写法，我们得到的页面效果都是相同的

图片相对路径插入的效果

到这里，img标签的src属性就讲的差不多了，接下来就是alt属性，alt是英文alternate的缩写，用来告诉浏览器当需要显示的图片找不到时显示的内容。请看下面演示的代码：

<img src="" alt="此处图片加载不出来"> //alt属性作用

alt属性作用

此时，我们并没有写上图片的路径，所以网页上是不会有图片的，就会显示出我们在alt属性写上的文字，如上面的图所示，当然，当你的路径写错的时候，同样也会显示alt属性里面的内容，所以当你检查图片插入的时候有没有错误，就可以用到alt属性了。

第三个常用属性就是title属性，用来告诉浏览器，当鼠标悬停在图片时显示的内容。请看下面的示范代码：

<img src="images/phone.jpg" alt="此处图片没有加载" title="华为mate30"> //title属性作用

tilte属性的作用

当我们去运行页面的时候，将鼠标放在显示的图片上，就会看到我们写的title标签的文字了，一般来说就是介绍一下这张图片的名称。

第四个常用的属性，是关于设置图片的长和宽的，也就是width属性和height属性，比较官方的解释是img标签中的width和height 这两个属性的作用：是用来告诉标签将来需要显示的图片的宽和高。我们先来看下示范代码：

 <img src="images/phone.jpg" width="100px" height="100px"> //width和height属性的作用

width和height属性的作用

我们可以明显的看到，再次去浏览器上看图片的时候，由于你设置了图片的长和宽，图片变小了，这里我们用到的px是像素的意思，就是一个点，点越小页面就越清晰，屏幕的分辨率就越高。比较官方的解释是px就是表示pixel，像素，是屏幕上显示数据的最基本的点，是相对长度单位。相对于显示器屏幕分辨率而言。这里我不多的解释，这个单位是我们日后写前端经常要用到的单位。那么此时看到页面显示的图片，我们肉眼觉得变小了，但是实际上图片的大小到底有没有变为我们设置的长和宽的大小呢？我们可以检查一下，怎么检查？在我们写的html页面里按下F12，打开我们的调试，这个按键是方便于程序开发人员的，你可以直接在页面上进行相关的调试，是非常方便的。除了F12，你也可以右击鼠标，看到最下面的检查然后打开它，打开的内容和F12看到的是一样的，如下图：

进行页面调试的界面

点击检查=F12

打开调试器之后，页面展示的内容也就是Elements部分，就是我们在编辑器上写的html代码，将鼠标移到Elements

里面的img标签上面，会看到页面会显示出img的部分属性，我们直接看下面的图：

演示如何看img图片大小

如上图右边所指的部分，也就是我们写的img标签代码，当我们将鼠标放在上面的时候，我们将视线看向图左边的部分，它能判断出我们写的代码对应的部分，所以页面上展示出来的图片对应的信息就被显示出来了，圈出来的蓝色的部分100x100，就是我们写的图片的长和宽。这种检查自己页面的方法，大家学会了吗？所以我们可以总结出，width和height属性的特性:1、如果 img 标签没有指定需要现实的图片宽高，那么系统会按照图片默认的宽高显示。2、如果img 标签指定了宽高，那么系统会按照指定的宽高显示 。3、如果我们手动指定了img标签的宽高，有可能导致图片变形；如果想指定宽高的图片不变形，可以指定宽度或高度的其中一个值即可，只要指定其中一个值（高 / 宽 ），系统会自动根据该值计算出对应的宽 / 高，并且等比拉伸，不会变形。

我们可以对img属性还能再拓展练习一下，现在，我们不只展示一张图片，我又加进去了几张图片，现在，我想要一起展示我新放进去的几张图片，代码该怎么写呢？可以看下面的代码示范：

<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1535951958,2040168440&fm=11&gp=0.jpg" alt="">

大家可以看到这里src图片路径非常的长，因为我们除了将图片放在文件夹里去找，还可以直接将你想要拿的网上图片的地址直接拿过来就行了，不明白的可以看下面的图进行操作。但是，我们会觉得路径实在是太长了，而且万一这个地址不能请求或者图片丢失的话，维护起来是非常麻烦的，所以一开始讲src这个属性的时候，我并没有说，不是非常的推荐，但是了解还是要有的。

复制图片地址

所以，接下来我们还是老老实实用规范的写法去写代码，请看代码：

<img src="images/first.jpg" alt="">
<img src="images/second.jpg" alt="">
<img src="images/third.jpg" alt="">
<img src="images/fourth.jpg" alt="">
<img src="images/fifth.jpg" alt="">

绿色的为新增的五个图片

此时我们运行代码看下页面的效果

五张图片的页面效果

在我们没有设置长和宽的情况下，系统会用默认图片的大小，当第五张图片的长在第一行图片中放不下的时候，就会自动去第二行，图片的排列都是从左到右的，并且对其方式都是以图片的下边对齐的，这样展示出来的效果是参差不齐的，所以我们就要设置图片，不管你是长和宽都设置，还是只设置其中一个都是可以的，只要注意设置的时候注意比例，不然就会图片就变形了，也是很难看的，像下面代码这样就行了：

<img src="images/first.jpg" alt="" width="200" height="120">
<img src="images/second.jpg" alt="" width="200" height="120">
<img src="images/third.jpg" alt="" width="200" height="120">
<img src="images/fourth.jpg" alt="" width="200" height="120">
<img src="images/fifth.jpg" alt="" width="200" height="120">

细心的小伙伴会发现我这里写长和宽大小的时候并没有加上px单位，其实不加是可以的，但是我不是非常的推荐，虽然浏览器会自动识别，加上你没加上的px，但是加上去会更加规范一点。

加上长和宽属性的效果

当我们将五张姐姐们的图设定大小一样的时候，呈现出来的效果就非常的整齐。你以为到这里就结束了吗？还有一个拓展，如果，我们一张图片的长就占了一整行，甚至超过，会怎么样呢，我们可以来试一下：

 <img src="images/music.jpg" alt="">

我们同样没有设置这张图片的长和宽，直接运行代码

红色圈出来的为滚动条

我圈出来的是滚动条，为什么会有滚动条，是因为，我们选择的图片本身的长度超过了我们页面的长度，由于是一张图片，所以不会出现多出来的部分就去下面一行的情况了，怎么解决呢？有些人会说，这还不简单吗，直接设置长小于等于页面的长度不就好了，其实也不用这么麻烦，因为这样设置的话，你还必须要知道页面的大小，直接将长设置为100%，就可以做到正好和页面大小一样的效果了，这里100%的意思是撑满整个窗口。

<img src="images/music.jpg" alt="" width="100%">

长为100%

这样是不是下面就不会出现难看的滚动条了，所以图片设置大小这里要灵活运用，怎么简单怎么来，这种设置方法，对于设置背景图，轮播图的背景图都是非常nice的。同样的如果你图片的高度超过了页面的高度，也只要设置个100%，就可以适配了。

讲到这里，关于img属性的介绍就差不多结束了，那么文章的最后，再给大家说说一般图片怎么拿。第一种，是我上面拓展的，右击图片拿到图片的地址，然后放在src里面就能用了。第二种，就是右击图片，选中图片另存为，然后保存到你想要的文件夹里，再用上面讲的三种拿到图片路径的方法。

图片另存为方法

第三种，但是有些图片你去拿的时候，可能不能让你保存或者说你也拿不到地址，因为有些图片其实是用背景插入的方法写的(这里还没讲到这种CSS插入图片的方法，莫急，了解一下)，我们只要右击图片点击检查，打开后台，然后就可以看到一个叫background的属性，后面跟着一串地址，将鼠标放在这串蓝色的地址上就会看到，我们想要的图片会显示出来，怎么拿呢？非常的简单，右击在连接上，点击Open in new tab,就会将图片打开在一个新的页面上，然后我们就可以保存了，不理解的可以看下面我的演示图

第一步，右击图片检查进入调试界面，看到background背景属性

第二步，鼠标放在蓝色的地址上，会出现对应的图片，可以检查是不是自己想要的图片

第三步，鼠标右击链接，选择Open in new tab

第四步，进入一个新的页面，里面有我们想要的图片，右击就可以进行保存和复制地址了

第四种，又是一个比较特殊的情况了，你拿的图里面可能有很多的图(又被称为是合成图)，但是你只要其中的一个，那怎么样才能拿到，基础好的人会说，这还不简单，定位就好了，当然这确实可以，但是这里我们还没讲到，所以最朴实的办法就是截图，你可以直接快捷键系统截图，又或者QQ，WX截图工具都可以，但是我们规范点还是要用到Photoshop这个软件的，没有的小伙伴，点击我的网盘链接进去下载链接: https://pan.baidu.com/s/1SG4__zjudpGgRwy3goIurA 提取码: mjcn。

一张图有多个图标

打开下载完的photoshop软件，打开我们要进行切割的图片

打开要进行操作的图片

你要是觉得图片看起来很小的话，可以按住Alt键+滚轮进行放大，然后点击左边那一竖工具栏那里的裁剪图标进行裁剪。

进行放大图片

选中范围，将要裁剪的图标框好，切记黑色的底，不要把白色也给圈进去，选好之后，双击

裁剪要仔细

裁完之后保存我们刚刚裁剪完的图标

裁完之后，另存为就行了。然后就像之前一样，路径正确就能显示出来了。最后进行保存ctrl+alt+shift+s,展示出来的效果图如下：

ctrl+alt+shift+s

第五种，其实这一种是我之前没想到的情况，然后我后来又加上去了，那就是你的UI把图给你，不用你自己去找，就很棒棒的那种，基本上你进一家公司都会有UI设计师，所以图这一块的话，不需要自己动手了。

当然了，这里我还有东西想教给大家，之前讲了关于调试器的东西，我们会看到默认你打开调试器的时候，调试器在你的右边，有些人的习惯可能是放在下面或者是左边，这种都是可以调的，下面的图，我就介绍了一些你刚入前端会用到的一些东西，暂时适合目前，以后我会再详细的讲一遍的。

调试的一些作用

如果Element部分的代码太多了，你实在找不到你想查看的部分的代码，一种是你直接在你想要查的地方右击检查，会直接显示对应的代码，但是有时候如果太挤的话，不是很能找到，所以我们就要用到下面小箭头去指向目标，然后点击一下，就会跳过去了。

对应目标直接右击检查

箭头指向功能

差点忘了最开始说要做一个简单的京东购物栏的，我就运用我之前讲的知识点，先实现没有css效果的部分样子，请看代码：

<img src="images/phone.jpg" alt="此处图片没有加载">
<p>
   <img src="images/phone.jpg" alt="此处图片没有加载" width="35px">
</p>
   <h2>￥4499.00</h2>
 <p>
    华为mate30手机(5G/4G版可选)亮黑色<br>
    8GB+128GB全网通(5G版)
 </p>
 <p>
    <b>1.1万+</b>条评价
 </p>
  <p>炜东电商旗舰店
     <img src="images/little.png" alt="此处图片没有加载">
 </p>
 <p>
    放心购 &nbsp;&nbsp;&nbsp;险
 </p>

简易效果图

到这里是真的结束，一些关于img标签的东西以及一些补充都讲完了，东西略多，也有点啰嗦，还是那句话，文章只适合新手，大神就不要喷我了，有一些讲错的，还没讲到位的知识点，我后续都会补充和改正的，我的目的只是希望能和大家一起进步。我也会分享我工作中的一些事情，刚工作的时候真的非常的迷茫，与其说你什么都不懂，不如说，你不知道该学什么，一个页面，一个项目来的时候，你的思路是什么，当你卡壳的时候，你会觉得自己很没用，然后就会疯狂去看一些教学视频，甚至去上一些补习班，这些方法本来就没什么错，但是当你学了半年，甚至一年的时候，你再回过头想一下，你可能就忘记了一些最基础的东西，所以，代码要不断的去练习，看是没有用的，不要忘了自己的初心。送大家一句话吧，开心是一天，难过是一天，那你什么不选择快乐呢。

如果有小伙伴想看我之前写的代码的，可以去这个地址自行练习：https://tingnan6.coding.net/p/htmlBasics/d/htmlBasics/git?tab=file。如果有小伙伴不能进去的话，可以提问我，我也是第一次玩coding，之前都是码云。代码是根据文章更新的，看到这里的小伙伴，非常感谢你们的支持。